Kendo UI ComboBox События

Question

Я пытаюсь изменить цвет интерфейса Kendo UI ComboBox в зависимости от выбранного элемента.

Я соединил скрипку, показывая проблему [http://jsfiddle.net/PeWPE/]

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

Когда пользователь выбирает новый элемент из списка избранного событие дает мне все данные мне нужно изменить цвет ComboBox, хотя цвет не меняется фактически :(

Таким образом, в резюме, есть ли способ изменить цвет кендо 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 украшает элементы 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 используется для начального значения.

Работающий Fiddle здесь:. http://jsfiddle.net/OnaBai/PeWPE/4/

Answer 2

Когда вы создаете Комбобокс KendoUI на входе #movies, он фактически скрывает этот вход и создает новый. Поэтому единственная проблема заключается в том, что используемые вами селектора неверны. Я обновил вашу ссылку 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).