Как применить стили к тегу li, созданному с помощью комбинированного списка kendo? - PullRequest
Новая
       24

Как применить стили к тегу li, созданному с помощью комбинированного списка kendo?

0 голосов
/ 04 февраля 2020

Я работаю над проектом ASP. NET MVC и использую Kendo-UI для внешнего интерфейса. Вопрос: Ситуация: в моем раскрывающемся списке отображаются все элементы, но сначала я хочу отобразить только некоторые из них. А позже, когда пользователь нажимает на элемент списка со словами «Больше DFU», я хочу изменить настройку отображения изначально скрытых элементов на «display: block».

Я написал скрипт, используя jquery, который обращается к предназначенные элементы в DOM и изменяющие их стили при работе с chrome dev-tools. Но когда я делаю то же самое в моих реальных файлах кода, к элементам получают доступ в jquery, но стили не применяются.

Сначала я подумал, что это проблема специфичности CSS, и попробовал все селекторы, начиная от простых тегов элементов, имен классов, псевдоклассов, идентификаторов и даже используя объявление! Но безрезультатно.

Я прилагаю скриншоты предполагаемых эффектов и сценарий jquery, который я использовал. Пожалуйста, предложите решение, если вы его знаете, я также сделаю то же самое, если найду решение.

Скриншоты: Первоначально:

Dropdown

Элемент для нажатия:

Element to be clicked

Код: 

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");

1 Ответ

0 голосов
/ 05 февраля 2020

так что, надеюсь, этот пример поможет вам.

Не зная, как вы связываете источник данных со списком, я предполагаю, что он связывается как dataSource объект.

Я изменил некоторый код, который использовал для аналогичной ситуации.

Вы можете увидеть этот код в прикрепленном додзё: https://dojo.telerik.com/UbARicoy

Итак, все, что я сделал, - назначил два события в выпадающий список:

dataBound и change событие. Вот выделенный код: 

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');
            }
          });
        }

Итак, все, что я здесь делаю, это удаляю любые потенциально отключенные элементы до привязки источника данных, а затем перебираю источник данных и затем отключаю каждый альтернативный элемент в текущем view элементов в источнике данных.

Применение класса k-state-disabled позволяет отключить выбор элемента из списка, щелкнув по нему.

Затем, когда вы выбираете элемент для изменения, затем запускается событие change: 

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');

     }
   })

 }

Итак, здесь я снова удаляю класс отключенных элементов, затем генерирую случайное число для затем отключенного случайные элементы в представлении списка, кроме выбранного элемента, и убедитесь, что это не будет зафиксировано функцией отключения.

...