如何在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"}); 
} 

基本上，从服务器收到数据后触发的任何事件都没有问题。