Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Chi Ming Pun
435
How to hide selecteditem in the igCombo
posted

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>

Parents
No Data
Reply
  • 2671
    Offline posted

    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 Petev
    Software Developer
    Infragistics, Inc.

    hide_selecteditem_igCombo.zip
Children