1

選択したアイテムに応じて Kendo UI ComboBox の色を変更しようとしています。

問題を示すフィドルをまとめました[http://jsfiddle.net/PeWPE/]

私がする必要があるのは、ページが読み込まれたときに選択されたアイテムを決定することです。onDataBound イベントをトラップできますが、その時点で選択した項目が見つかりません。利用できないのではないかと思います。

ユーザーがリストから新しい項目を選択すると、select イベントによって、ComboBox の色を変更するために必要なすべてのデータが得られますが、色は実際には変化していません :(

つまり、要約すると、初期値が設定されているときに kendo 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');
 }

 })
4

2 に答える 2

2

Kendo UI は、HTML 要素を独自の要素で装飾します。これは、ブラウザーとプラットフォーム間で視覚的に互換性を持たせるために必要な方法です。

コンボボックスを次のように定義する必要があります。

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

注: 定義で値を設定する可能性があるため、後で設定する必要はありません。

次に、2 つのイベント ハンドラーを次のように定義します。

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/

于 2013-04-03T21:38:37.017 に答える