Пользовательский интерфейс Kendo: как изменить цвет фона списка KendoDropDown с помощью шаблона

#jquery #css #kendo-ui #kendo-dropdown

#jquery #css #kendo-ui #kendo-выпадающий список

Вопрос:

У меня есть выпадающий список Kendo, который заполняется нормально. Одним из требований является выделение красного фона элемента, если элемент возвращается, имеет значение false с использованием шаблона. Ниже приведен код, который я придумал до сих пор.

  var carsDropDown = $("#ddlCars").kendoDropDownList({
        dataTextField: "DisplayValue",
        dataValueField: "Id",
        valuePrimitive: true,
        optionLabel: " ",
        dataSource: intakeView.viewModel.carsDataSource,
        template: '#= !data.IsActive ? '<span style="background-color:redBackGroundColor"></span>' : "" #'
    });

CSS:

 .redBackGroundColor {
    background-color: red;   
}

Приведенный выше код выделяет серым цветом все параметры выпадающего списка, включая выбранный параметр. Я хотел бы изменить цвет фона только для параметров, которые возвращаются, isActive на False.

1. Есть ли шанс, что вы хотите class="redBackGroundColor" вместо style="redBackGroundColor" ?

2. Если нет — добавьте какой-нибудь рабочий пример (jsfiddle / snippet)

3. @Dekel изменение его на class не помогло

4. Так что знайте, что пришло время добавить рабочий пример 🙂

Ответ №1:

Во-первых, вам нужно использовать класс, а не стиль, как указывает Dekel. Во-вторых, вы можете рассмотреть возможность изменения цвета переднего плана, а не цвета фона, поскольку цвет фона будет серым при наведении курсора мыши. Вам также необходимо добавить описание в свой шаблон. Что-то вроде этого должно работать:

 var carsDropDown = $("#ddlCars").kendoDropDownList({
    dataTextField: "DisplayValue",
    dataValueField: "Id",
    valuePrimitive: true,
    optionLabel: " ",
    dataSource: intakeView.viewModel.carsDataSource,
    template: '<span class="k-state-default #= IsActive ? "" : "redBackGroundColor" #">#: DisplayValue #</span>'
});

http://demos .telerik.com/kendo-ui/dropdownlist/template

1. это идеально. но если я хочу поиграть с цветом фона, то с каким классом мне следует играть

2. Классы определяются вами. У вас есть класс с именем redBackGroundColor, который действительно изменит цвет фона на красный. Таким образом, приведенный выше код будет применяться к неактивным элементам.

3. Приведенный выше код изменяет цвет переднего плана. Вместо этого я хочу изменить цвет фона.

4. Я попробовал это ‘ Активен? «» : style=»background-color:redBackGroundColor» # «> #: displayValue #</span>’ но это не сработало

5. Вы не можете добавить стиль внутри класса. Ваш конечный результат будет, который не является законным html. Синтак сис хэша Kendo может быть сложным.