CODEWITHSUNDEEP
jquerydropdownlistfor
Soussou
Soussou

Reputation: 33

Hiding an item from KendoUI DDL

I am currently using KendoUI DropDownListfor and I am trying to hide an item from my options list.

I could do this with @Html.DropDownListFor with javascript using the following script: 

$("#relationDDL").children('option[value="2"]').hide();

But when I wanted to change my dropdownlist to the KendoUI one I couldn't achieve that. I used multiple solutions posted in the forum and in How to modify KendoUI DropDownList items but no chance. How can I solve this?

Upvotes: 1

Views: 4283

Answers (1)

Werner
Werner

Reputation: 2154

I know this is a very old question but it may still be relevant today, so here's my solution:

Because the dropdown-items are stored in a seperate container you're be able to hide the items from there.

In your case the container element id is: #relationDDL_listbox.

From there it's easy.

Solution to hide specific option per index:

$('#relationDDL_listbox .k-item').eq(1).hide();

Solution to hide specific option per value:

First you need the the index of the value you want to hide so I wrote a simple function to get it:

//for modern browsers only
function getIndex(kendoDropDownList, value) {
    const index = kendoDropDownList.dataSource.options.data.findIndex(x => x.value == value);
    if (~index) return index;
    throw 'value not found in options';
}

//older browsers
function getIndex(kendoDropDownList, value) {
    var d = kendoDropDownList.dataSource.options.data;  
    for(var i = d.length; i--;) {
        if (d[i].value == value) return i;
    }

    throw 'value not found in options';
}


var index = getIndex($('#relationDDL').data('kendoDropDownList'), '2'); //you may want to use 'const' instead of 'var' for modern browsers
$('#relationDDL_listbox .k-item').eq(index).hide();

I'm pretty sure there are a few more ways to get the same result...

Upvotes: 1

Related Questions