Kendo UI ComboBox Events

Question

I'm trying to change the color of a Kendo UI ComboBox depending on the item selected.

I've put together a fiddle showing the problem [http://jsfiddle.net/PeWPE/]

What I need to do is determine the selected item when the page loads. I can trap the onDataBound event, but can't find the selected item at that point - I suspect that it is not available.

When the user selects a new item from the list the select event gives me all of the data I need to change the color of the ComboBox, although the color isn't actually changing :(

So, in summary, is there a way to change the color of a kendo ui ComboBox when the initial value is set (and any help with fixing my syntax would be good too!).

Thanks for your help.

Here's the code...

$(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');
 }

 })

OnaBai OnaBai · Accepted Answer · 2013-04-03T21:38:37

Kendo UI decorates the HTML elements with their own. This is the way that they have to make it visually compatible among browser and platforms.

You should define your combobox as:

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

NOTE: that you might set the value in the definition, you don't need to do it afterwards.

And then define the two event handlers as:

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 is used when you change the value while onDataBound is used for the initial value.

A working Fiddle here : http://jsfiddle.net/OnaBai/PeWPE/4/

Kendo UI ComboBox Events

2 Answers