Kendo UI组合框事件

Question

我试图根据所选项改变Kendo UI组合框的颜色。

我已经把显示的问题[http://jsfiddle.net/PeWPE/]

我需要做的是确定所选择的项目在页面加载时什么小提琴。我可以捕获onDataBound事件，但在这一点上找不到选定的项目 - 我怀疑它不可用。

当用户从列表中选择一个新的项目选择事件给了我一切，我需要改变ComboBox的颜色数据，虽然颜色没有真正改变:(

所以，总之，有没有办法改变一个剑道UI组合框的颜色时，初始值设置（与固定我的语法任何帮助将是一件好事！）。

感谢您的帮助。

这里的代码...

$(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中添加颜色）。