I am trying to remove an item from a Kendo UI Combobox in a for loop but it won't remove the item from the Combobox. Any idea's on what the issue could be? Thanks
Here is the code that I am using
if (!comboboxList) return;
const comboboxListLength = comboboxList.length;
for (let i = 0; i < comboboxListLength; i++) {
const comboBoxId = comboboxList[i];
const { CountryID: countryId, StateID: stateId } = comboBoxId.includes("CustomerOrd") ? CustomerOrderDetails?.CustomerInfo : CustomerOrderDetails?.SellerInfo;
const combobox = $(comboboxList[i]).getKendoComboBox();
const ds = combobox.dataSource;
const comboboxData = ds.data().toJSON();
if (countryId !== 475 && stateId !== 475) {
const doesDefaultStillExistIdx = comboboxData.findIndex(f => f.DictionaryItemID == 475);
if (doesDefaultStillExistIdx !== -1) {
ds.remove(ds.at(doesDefaultStillExistIdx));
}
}
}
The reason your loop isn’t working as expected is because of how the Kendo UI DataSource behaves when you remove items.
When you call ds.remove(), it immediately updates the DataSource and shifts the indices of the remaining items. This means if you’re looping with a fixed length (comboboxList.length), some items can get skipped or your removal may not work correctly.
Also, using ds.data().toJSON() gives you a copy of the data, so removing from the DataSource doesn’t change that array — which can make findIndex misleading if there are multiple items to remove.
A better approach is to filter out the items you want to remove and then delete them directly:
if (!comboboxList) return;
for (let i = 0; i < comboboxList.length; i++) {
const comboBoxId = comboboxList[i];
const { CountryID: countryId, StateID: stateId } = comboBoxId.includes("CustomerOrd")
? CustomerOrderDetails?.CustomerInfo
: CustomerOrderDetails?.SellerInfo;
const combobox = $(comboBoxId).getKendoComboBox();
const ds = combobox.dataSource;
if (countryId !== 475 && stateId !== 475) {
// get all items with DictionaryItemID 475
const itemsToRemove = ds.data().filter(item => item.DictionaryItemID === 475);
// remove them one by one
itemsToRemove.forEach(item => ds.remove(item));
}
}
This way, you don’t have to worry about index shifting, and it will safely remove all the matching items from each combobox.