How to apply styles to a li tag created using kendo combobox?

Question

I'm working on a ASP.NET MVC project and using Kendo-UI for front-end. Question: Situation: My dropdown has all the elements to be displayed but I want to display only some of them initially. And later on when user clicks on a list item saying "More DFUs", I want to change display setting of initially hidden elements to "display:block".

I wrote a script using jquery, which accesses the intended elements on the DOM, and changes styles on them when worked upon in chrome dev-tools. But, when I do the same thing in my actual code files the elements are getting accessed in jquery but the styles are not being applied.

At first I thought this as an issue of CSS specificity, and tried all the selectors ranging from plain element tags, class names, pseudo-classes, ids, and even used '!important' declaration. But to no avail.

I'm attaching the screenshots of intended effects and the jquery script I used. Please suggest a solution if you know one, I will also do the same if I find the solution.

Screenshots: Initially:

Element to be clicked:

Code:

var z = $("ul.k-list");

if (z.length > 0) {
    z.each(function () {
        var ind = $(this).find("li:contains(More DFUs)").index();
        var aa = $(this).find("li:gt(" + ind + ")");
        aa.css("display", "none");   // NOT WORKING
        console.log("this length = " + aa.length);  // WORKING
    });
}

var abc = $("ServiceItemViewModels_0__ServiceItem_DirectionsForUse_Id_listbox");
abc.css("background", "red");

Answer 1

so hopefully this example will help you out.

Without knowing how you are binding the datasource to the combobox I am assuming that it is being bound as a dataSource object.

I have modified some code that I used for a similar situation.

You can see this code via the attached dojo: https://dojo.telerik.com/UbARicoy

So all I have done is assigned two events to the combobox:

dataBound and change event. Here is the highlighted code:

dataBound: function(e) {
      $('#customers_listbox li').removeClass('k-state-disabled');
      var ds = this.dataSource
      ds.data().forEach(function(option) {
        if (ds.view().indexOf(option) % 2) {
          $('#customers_listbox li[data-offset-index="' + 
          ds.view().indexOf(option) + '"]').addClass('k-state-disabled');
            }
          });
        }

So all I am doing here is removing any potential disabled items prior to the datasource being bound and then looping through the datasource and then disabling every alternate item that is in the current view of the items in the datasource.

By applying the k-state-disabled class this disables the item from being selected from the list by clicking on it.

Then when you select an item to change this then fires the change event:

change: function(e) {

   var selectedItem = this.dataItem();
   $('#customers_listbox li').removeClass('k-state-disabled');
   var ds = this.dataSource;
   ds.data().forEach(function(option) {
     var randomMod = Math.floor(Math.random() * 4);
     if ((ds.view().indexOf(option) - 1) % randomMod && option.CustomerID !== selectedItem.CustomerID) {

       $('#customers_listbox li[data-offset-index="' + ds.view().indexOf(option) + '"]').addClass('k-state-disabled');

     }
   })

 }

So again here I am removing the disabled items class then generating a random number to then disabled random items in the list's view except the selected item and ensuring this doesn't get caught by the disable function.