Hi,
I selected an item in the dropdown list and then click other button, this selected item should be hidden in the drop-down list. It is still showing in the list when I clicked dropdown.
Below is the code that I created.
<select id="combo"> <option value="1">John Smith</option> <option value="2">Mary Johnson</option> <option value="3">Bob Ferguson</option> </select>
<script> $(function () { //The igCombo is bound to the SELECT and OPTION elements //defined above $("#combo").igCombo({ dropDownWidth: 400, filteringType: "local", autoComplete: true });
var item = $("#combo").igCombo("itemByValue", "2"); $(item.element).hide(); $(item.element).css("display","none"); var item2 = $("#combo option"); $("#combo option").each(function(index, element){ if(element.value === "2") { $(element).hide(); $(element).css("display","none"); } }) }); </script>
Hello,
The combo builds its own UI and the original element may be hidden, which is why your hiding code doesn’t seem to work (even though the second version does hide the option item) – the parent select is already not visible.
The igCombo is still very much a data-bound control and in this case as described in the Data Binding docs the original SELECT options are inherited (and actually converted to data source items). You can always manipulate that source and let the control take care of the rest.
To remove an item use the getDataSource method to get the source and using the selection index (transformed back for the original source if filtering is active):
var index = $combo.igCombo("selectedIndex");if (index >= 0) { var dataSource = $combo.igCombo("getDataSource"); //in case of filtered results/index var item = dataSource.dataView()[index]; index = dataSource.data().indexOf(item);
dataSource.removeRecordByIndex(index); //re-bind and clear selection $combo.igCombo("dataBind").igCombo("selectedIndex", -1);}
Live sample: http://fiddle.jshell.net/damyanpetev/5aa8fr0y/
Note that you can always store the deleted item and add it back if needed.
Regards, Damyan PetevSoftware DeveloperInfragistics, Inc.
Can you give me sample codes - how to add it back?
Thanks,
Chi Ming
I'm just following up to see if you need any further assistance. If so please let me know.
Regards, Damyan PetevAssociate Software DeveloperInfragistics, Inc.
Hello Chi Ming,
The easiest way I see is using a simple undo stack (ensures multiple items can be hidden and then restored in the same order). You will need to store the removed items in the above snippet:
// save for undo:removedItems.push({ data: item, index: index });
Keeping index is optional and only needed if you want to restore the item in its original position using the insertRow method like so:
$("#restore").on("click", function () { if (removedItems.length) { var item = removedItems.pop(); var dataSource = $combo.igCombo("getDataSource"); // add the item back (preferably in its old position) dataSource.insertRow(item.index, item.data, item.index, true); //re-bind and clear selection $combo.igCombo("dataBind").igCombo("selectedIndex", -1); }});
Note: When inserting items at specific index like above (rather than adding at the end via addRow) you should reset the selection as well when re-binding.
The jsFiddle sample above has been updated and I’ll also attach a second file version for download.
Let me know if I may be of further assistance.