如何在Kendo UI中手動添加一個項目到數據源Combobox

Question

我有一個組合框正在被從servlet接收到的JSON字符串填充。直到我嘗試將項目手動添加到數據源comboBoxDataSource.add({key: "062", value: "Total"});

$(document).ready(function() { 
    //Combobox Init (From Servlet) 
    var comboBoxDataSource = new kendo.data.DataSource({ 
     transport : { 
      read : { 
       url : "net/samso/action/common/ComboAction?flag=SRCHGT_IO_GB", // url to remote data source 
       dataType : "json", 
       type : 'GET' 
      } 
     }, 
     schema : { 
      model : { 
       fields : { 
        key : { 
         type : "string" 
        }, 
        value : { 
         type : "string" 
        } 
       } 
      } 
     } 
    }); 

    //Manually add an item 
    comboBoxDataSource.add({key: "062", value: "Total"}); 

    //Initialize Combobox 
    $("#cb_srchgt_io_gb").kendoComboBox({ 
     dataSource : comboBoxDataSource, 
     dataTextField : "value", 
     dataValueField : "key" 
    }) 
}); 

的代碼工作正常。當項目被添加時，它將擺脫從數據源中的JSON數據填充的其他項目。

這是怎麼發生的？

Answer 1

問題是DataSource是異步初始化的，我的意思是，當combobox被初始化時，開始加載數據源，但是直到數據從服務器接收回來，操作才完成。然後，只有在那時，您才應該調用該元素。甚至不能接受將add語句移到示例代碼的末尾，因爲從服務器加載可能需要幾毫秒或幾秒鐘的時間。

如果你想添加到從服務器接收什麼元素，你可以使用：

$(document).ready(function() { 
    //Combobox Init (From Servlet) 
    var comboBoxDataSource = new kendo.data.DataSource({ 
     transport: { 
      read: { 
       url  : "net/samso/action/common/ComboAction?flag=SRCHGT_IO_GB", // url to remote data source 
       dataType: "json", 
       type : 'GET' 
      } 
     }, 
     schema : { 
      model: { 
       fields: { 
        key : { type: "string" }, 
        value: { type: "string" } 
       } 
      }, 
      data: function(result) { 
       //Manually add an item 
       result.push({key: "062", value: "Total"}); 
       return result 
      } 
     } 
    }); 

    //Initialize Combobox 
    $("#cb_srchgt_io_gb").kendoComboBox({ 
     dataSource : comboBoxDataSource, 
     dataTextField : "value", 
     dataValueField: "key" 
    }) 
}); 

你可能會做使用requestEnd事件和推多餘的元素同樣的事情e.response：

requestEnd: function (e) { 
    console.log("e", e); 
    e.response.push({key: "062", value: "Total"}); 
} 

基本上，從服務器收到數據後觸發的任何事件都沒有問題。