Kendo UI ComboBox 事件

Question

我正在尝试根据所选项目更改 Kendo UI ComboBox 的颜色。

我整理了一个小提琴[http://jsfiddle.net/PeWPE/]

我需要做的是在页面加载时确定所选项目。我可以捕获 onDataBound 事件，但此时找不到所选项目 - 我怀疑它不可用。

当用户从列表中选择一个新项目时，选择事件会为我提供更改组合框颜色所需的所有数据，尽管颜色实际上并没有改变:(

所以，总而言之，有没有办法在设置初始值时更改剑道 ui ComboBox 的颜色（任何修复我的语法的帮助也会很好！）。

感谢您的帮助。

这是代码...

$(document).ready(function () {
 // Create some data - including a color
 var data = [{
     text: "12 Angry Men",
     value: "1",
     color: "White"
 }, {
     text: "Il buono, il brutto, il cattivo.",
     value: "2",
     color: "White"
 }, {
     text: "Inception",
     value: "3",
     color: "Green"
 }, {
     text: "One Flew Over the Cuckoo's Nest",
     value: "4",
     color: "Green"
 }, {
     text: "Pulp Fiction",
     value: "5",
     color: "Blue"
 }, {
     text: "Schindler's List",
     value: "6",
     color: "Blue"
 }, {
     text: "The Dark Knight",
     value: "7",
     color: "Red"
 }, {
     text: "The Godfather",
     value: "8",
     color: "Red"
 }, {
     text: "The Godfather: Part II",
     value: "9",
     color: "Yellow"
 }, {
     text: "The Shawshank Redemption",
     value: "10",
     color: "Yellow"
 }, {
     text: "The Shawshank Redemption 2",
     value: "11",
     color: "Orange"
 }];

 // Create the combo
 $("#movies").kendoComboBox({
     dataTextField: "text",
     dataValueField: "value",
     dataSource: data,
     height: 100,
     change: onChange,
     dataBound: onDataBound,
     select: onSelect
 });

 // Select a value - Note no event is raised when doing this(!)
 var combo = $("#movies").data("kendoComboBox");
 combo.value("9");

 function onChange(e) {
     alert('onChange Called');
     ctrl = this.element.attr("id");
     var dataItem = this.dataItem(e.item.index());
 }

 // This is called - but the color is not being set
 function onSelect(e) {
     alert('onSelect Called');
     var ctrl = this.element.attr("id");
     var dataItem = this.dataItem(e.item.index());
     alert('Control Id: ' +ctrl);     // Check we've got the control
     alert('Color selected: ' + dataItem.color);
     $('input[name="' + ctrl + '_input"]').css({
         backgroundColor: dataItem.color
     });
     $('#movies').css({
         backgroundColor: dataItem.color
     });

 }

 function onDataBound(e) {
     alert('onDataBound Called');
 }

 })

Answer 1

Kendo UI 用自己的 HTML 元素装饰。这是他们必须使其在浏览器和平台之间视觉兼容的方式。

您应该将您的组合框定义为：

$("#movies").kendoComboBox({
    dataTextField : "text",
    dataValueField: "value",
    dataSource    : data,
    height        : 100,
    select        : onSelect,
    dataBound     : onDataBound,
    value         : 9
});

注意：您可以在定义中设置值，之后不需要这样做。

然后将两个事件处理器定义为：

function onSelect(e){
    var dataItem = this.dataItem(e.item.index());
    this.input.css({ 'background-color' : dataItem.color });
}

function onDataBound(e) {
    var dataItem = this.dataItem(this.value());
    this.input.css({ 'background-color' : dataItem.color });
}

onSelect用于更改值，onDataBound用于初始值。

在这里工作的小提琴：http://jsfiddle.net/OnaBai/PeWPE/4/

Answer 2

当您在#movies 输入上创建 KendoUI 组合框时，它实际上会隐藏该输入并创建一个新输入。所以唯一的问题是您使用的选择器不正确。我已经更新了您的 jsFiddle 参考，但是如果您将 onSelect 方法更改为以下内容，它将解决您的问题。

function onSelect(e){
    var ctrl = this.element.attr("id");
    var dataItem = this.dataItem(e.item.index());
    var combobox = $("#movies").data("kendoComboBox");
    combobox.input.css({ 'background-color' : dataItem.color });
    combobox.list.css({ 'background-color' : dataItem.color });
}

它应该可以解决您的问题（它在 jsFiddle 中添加颜色）。