Kendo UI ComboBox Événements

Question

J'essaie de changer la couleur d'une ComboBox Kendo UI en fonction de l'élément sélectionné.

J'ai mis en place un violon montrant le problème [http://jsfiddle.net/PeWPE/]

Ce que je dois faire est de déterminer l'élément sélectionné lorsque la page se charge. Je peux piéger l'événement onDataBound, mais je ne trouve pas l'élément sélectionné à ce stade - je suppose qu'il n'est pas disponible.

Lorsque l'utilisateur sélectionne un nouvel élément dans la liste l'événement select me donne toutes les données que je dois changer la couleur de la zone de liste déroulante, bien que la couleur ne change pas :(

réellement Ainsi, résumé, est-il possible de changer la couleur d'un ComboBox kendo ui lorsque la valeur initiale est définie (et toute aide à fixer ma syntaxe serait bon aussi!).

Merci pour votre aide.

Voici le 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'); 
} 

}) 

Answer 1

Kendo UI décore les éléments HTML avec les leurs. C'est ainsi qu'ils doivent le rendre visuellement compatible entre les navigateurs et les plateformes.

Vous devez définir votre combobox comme:

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

REMARQUE: que vous pouvez définir la valeur dans la définition, vous n'avez pas besoin de le faire par la suite.

puis définissez les deux gestionnaires d'événements comme:

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 est utilisé lorsque vous modifiez la valeur en onDataBound est utilisé pour la valeur initiale.

A Fiddle travailler ici. http://jsfiddle.net/OnaBai/PeWPE/4/

Answer 2

Lorsque vous créez un Combobox KendoUI sur l'entrée #movies, il masque cette entrée et en crée une nouvelle. Le seul problème est que les sélecteurs que vous utilisez ne sont pas corrects. J'ai mis à jour votre référence jsFiddle, mais si vous modifiez votre méthode onSelect à la suivante, il va résoudre votre problème.

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 }); 
} 

Il devrait résoudre votre problème (il ajoute la couleur dans jsFiddle).