Kendo DropDownList — добавить класс в optionLabel

Учитывая следующее раскрывающееся меню Kendo, я хотел бы добавить класс в выбор optionLabel, поэтому, когда ddl расширится, я смогу визуально различать, что такое метка параметра и какие параметры. В идеале это должно быть сделано из dataBound и, очевидно, должно быть сделано из js. Я ищу причудливое решение, я действительно не хочу пересекать большую часть DOM.

http://trykendoui.telerik.com/@vojtiik/uLEc

      $("#products").kendoDropDownList({
                    dataTextField: "ProductName",
                    dataValueField: "ProductID",
                    optionLabel: "select",
                    dataBound: function(e) {
                        // find the option label and add class
                    },
                    dataSource: {
                        transport: {
                            read: {
                                dataType: "jsonp",
                                url: "http://demos.telerik.com/kendo-ui/service/Products",
                            }
                        }
                    }
                });

telerik kendo-ui kendo-asp.net-mvc kendo-dropdown
person Vojtiik    schedule 17.04.2014    source источник

Ответы (4)


arrow_upward
2
arrow_downward

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

$(document).ready(function() {
                    $("#products").kendoDropDownList({
                        dataTextField: "ProductName",
                         dataValueField: "ProductID",
                        optionLabel: "select",
                        change: function(e){
                            var listItem = $( "#products_listbox li:first-child" );
                            listItem.css( "background-color", "red" ) ;
                          },
                        dataSource: {
                            transport: {
                                read: {
                                    dataType: "jsonp",
                                    url: "http://demos.telerik.com/kendo-ui/service/Products",
                                }
                            }
                        }
                    });
                });
person A dev    schedule 17.04.2014
comment
Мне кажется, это хорошо, я считаю, что это также будет работать с databound, поэтому мне не нужно добавлять класс снова и снова. Дай мне попробовать. Спасибо @ user3455199 - person Vojtiik; 17.04.2014
comment
вы также можете использовать это для логики привязки данных. dataBound: function(e){ var optionLabel = e.sender.list.find(li:first-child); optionLabel.addClass (ваш класс); }, - person A dev; 17.04.2014

arrow_upward
3
arrow_downward

Пожалуйста, попробуйте с приведенным ниже фрагментом кода.

Метод 1:

<style type="text/css">
    #products_listbox li:first-child
    {
        background-color: Red !important;
        color: Yellow !important;
    }
</style>

Примечание. Products_list, в этом разделе «Продукты» — ваш идентификатор раскрывающегося списка.

Метод 2:

<script type="text/javascript">
    $(document).ready(function () {
        $("#products").kendoDropDownList({
                dataTextField: "ProductName",
                dataValueField: "ProductID",
                optionLabel: "select",
                open: function(e){
                        var listItem = $( "#products_listbox li:first-child" );
                        listItem.css( "background-color", "red" );
                        listItem.css( "color", "Yellow" );
                        },
                dataSource: {
                    transport: {
                        read: {
                            dataType: "jsonp",
                            url: "http://demos.telerik.com/kendo-ui/service/Products",
                        }
                    }
                }
            });
    });
</script>

Я постараюсь создать более общее решение, как только закончу с этим. я обновлю вас.

Примечание. Используйте method1 для повышения производительности вашей страницы.

person Jayesh Goyani    schedule 17.04.2014
comment
интересно, я не думал о чистом решении css +1 за это! Я переместил решение пользователя @user3455199 в databound, и оно отлично справляется со своей задачей. change или open происходит слишком часто, я хочу сделать это только тогда, когда параметры не меняются между открытиями. Спасибо, и не беспокойтесь об общем решении, которое я уже отсортировал. - person Vojtiik; 17.04.2014

arrow_upward
1
arrow_downward

Вы можете использовать событие open, чтобы найти первый элемент LI из UL и изменить его стили.

e.g.

  open: function(e) {
    this.list.find(">ul>li:first").css("background", "red")
  }

Пример здесь.

person Petur Subev    schedule 17.04.2014

arrow_upward
1
arrow_downward

Как указано в этом вопросе: Kendo UI [kendoDropDownList] - onSelect optionLable, добавьте CSS-класс

Не нужно играть с открытой функцией, вы можете добиться этого с помощью optionLabelTemplate:

$("#selectBox").kendoDropDownList({
    ...
    optionLabel: "Select",
    optionLabelTemplate:'<span style="color:red">Select</span>',
    ...
});

Замените style="color:red" на class="yourClassName" ;-)

person Julien    schedule 21.10.2019