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中添加顏色）。