topic Re: populate combobox from a local json array file in Calcite Design System Questions

populate combobox from a local json array file

LefterisKoumis — Tue, 05 Apr 2022 00:27:51 GMT

I defined a combobox:

<calcite-combobox value="county" label="county" placeholder="County" id="beg_county" style="padding-bottom: 10px; width: 100px;"></calcite-combobox>

Then, I loaded the content of a json file to an array with label and value:

esriRequest("./CountyRouteRanges.json", options) .then((response) => { --------- for (var prop in thedata) { if (thedata.hasOwnProperty(prop)) { countylist.push({ label: prop, value: prop }); } } -------------

But I can't populate the combobox:

let countyselection = document.getElementById("beg_county") countyselection.add(countylist);

Re: populate combobox from a local json array file

BenElan — Tue, 05 Apr 2022 23:16:14 GMT

Hi @LefterisKoumis,

You need to create calcite-combobox-item components for each of the JSON entries, and then append them to the combobox. Here is a codepen:

https://codepen.io/benesri/pen/zYpRpmp?editors=0010

Re: populate combobox from a local json array file

LefterisKoumis — Wed, 06 Apr 2022 21:20:46 GMT

THank you.

After I applied the loop it seems that it populates the combobox but the entries are not visible as they are in white color! I didn't use any css. To resolve the issue I applied css for color:black but it is not working. As you can see I tried also to apply the heightScale="l" but it doesn't expand.:

<calcite-shell-panel slot="contextual-panel" heightScale="l" position="end" detached>

Re: populate combobox from a local json array file

BenElan — Wed, 06 Apr 2022 21:26:35 GMT

Hmm, can you provide a codepen that reproduces the issue? In your original code you were using "label" instead of "textLabel" for the prop. Maybe that's the issue?

https://developers.arcgis.com/calcite-design-system/components/combobox-item/#component-api-properties-textLabel

Re: populate combobox from a local json array file

LefterisKoumis — Wed, 06 Apr 2022 21:34:12 GMT

I fixed that but it still didn't work, because the countyselection.add(option) doesn't work.

So, I replaced it with the code you provided.

for (let items of countylist) { const comboItem = document.createElement('calcite-combobox-item'); comboItem.setAttribute('value', items.value); comboItem.setAttribute('labelText', items.label); countyselection.appendChild(comboItem); }

Countylist is:

<calcite-combobox value="county" label="county" placeholder="County" id="beg_county" style="padding-bottom: 10px; padding-left:30px; width: 100px;" selection-mode="single"> </calcite-combobox>

Re: populate combobox from a local json array file

BenElan — Wed, 06 Apr 2022 22:49:00 GMT

If you prefer using setAttribute, then it should be like this:

comboItem.setAttribute('value', items.value); comboItem.setAttribute('text-label', items.label);

Re: populate combobox from a local json array file

LefterisKoumis — Wed, 06 Apr 2022 22:36:17 GMT

It works. Thank you. Also, as I mentioned in the previous post above, I am trying to make the panel to occupy the whole height. I tried:

<calcite-shell-panel slot="contextual-panel" heightScale="l" position="end" detached>

but it didn't work. So, I applied the style="height: 900px;" at each of the calcite tab . It works, but is there a better way?

Re: populate combobox from a local json array file

BenElan — Wed, 06 Apr 2022 22:47:15 GMT

Using vertical height is better, so it is not dependent on your monitor size:

style="height:100vh;"

Re: populate combobox from a local json array file

LefterisKoumis — Wed, 06 Apr 2022 22:53:49 GMT

I will post another post for this issue. Thanks.