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 = http://stackoverflow.com/questions/15794405/[{ 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'); }})
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 = http://stackoverflow.com/questions/15794405/[{ 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'); }})