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);
Solved! Go to Solution.
If you prefer using setAttribute, then it should be like this:
comboItem.setAttribute('value', items.value);
comboItem.setAttribute('text-label', items.label);
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:
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.:
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?
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>
If you prefer using setAttribute, then it should be like this:
comboItem.setAttribute('value', items.value);
comboItem.setAttribute('text-label', items.label);
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?
Using vertical height is better, so it is not dependent on your monitor size:
style="height:100vh;"
I will post another post for this issue. Thanks.