Question

我无法配置“Kendo UI”网格以使用DropDownList作为编辑器。我有一个JS Bin示例来重现我的行为。一旦从下拉列表中进行选择，目标是填充BinNumber，PartNumber和StockNumber字段。目前我甚至无法让DropDown正确绑定到记录集。如果我进行选择并移动到另一个字段，我会在BinNumber字段中获得[object Object]。如果我重新进入并做出另一个选择，BinNumber会坚持下去。我已经彻底阅读了文档，但我仍然对此感到困惑。

Answer 1

对于[object object]，看看这个post，有一个属性在2013年末引入，处理这个问题data-value-primitive="true"。在过去，我只是用手动将选择重新映射到ds，但属性为你完成了所有，我在你的jsBin测试并且工作正常。

  binDropdownEditor: function (container, options) {
            $('<input data-text-field="BinNumber"   data-value-field="BinNumber"  data-value-primitive="true" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList({
                    autoBind: false,
                    dataSource: viewModel.binDropDownDataSource
                });
  }

关于更改绑定（请粘贴到您的JSBin javascript标签中）：

var bins =["BinNumber:12121"];
var gridDS =  new kendo.data.DataSource({
            transport: {
                read: function (e) {
                    e.success(bins);
                }
            },
            schema: {
                model: {
                  id:"Row",
                       fields: {
                         Row:{type:"string"},
                         BinNumber: {type:"string"},
                         PartNumber: {type:"string"},
                         StockNumber:{type:"string"}

                    }
                }
            },
            pageSize: 50
        });

 var  binDropDownDataSource = [
    { BinNumber: "12345",PartNumber:"P-2929",StockNumber:"S-06565" },
    { BinNumber: "23456",PartNumber:"P-2323",StockNumber:"S-956565" },
    { BinNumber: "34567",PartNumber:"P-4344",StockNumber:"S-67676" } ];

 function appendEditor (container, options) {
            $('<input data-text-field="BinNumber" data-value-primitive="true" data-value-field="BinNumber" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList({
                    autoBind: false,
                    dataSource: binDropDownDataSource,
                    change:function(e){
                                var ddldataitem = this.dataItem();
                                var griditem = gridDS.at(0); // you might need to tweak this line          
                                griditem.set("PartNumber",ddldataitem.PartNumber);
                                griditem.set("StockNumber",ddldataitem.StockNumber);
                       }   

                });
 }
var grid= $("#bins").kendoGrid({
      dataSource: gridDS,  
      scrollable: false,
      autoBind:false,
       batch:true,
      editable : true,
      navigatable: true,
      toolbar: [ {name: 'custom-create', text: "Add New Line Item"}],
      columns: [ {"field":"Row", title: "Row", width: "20px"},
                {"field": "BinNumber","title":"Bin", editor: appendEditor}, 
                {"field":  "PartNumber", title: "Part ", width: "200px",editable: false },
                {"field":  "StockNumber", title: "Stock ", width: "200px",editable: false }
               ]

}).data("kendoGrid");                

 $(".k-grid-custom-create").on("click", function (e) {
     gridDS.add({ Row:"1"});
    });

你插入的observable并不是必需的，已经可以观察到underling数据源，我已经删除了它。请考虑改进以下行，索引不会始终为0 var griditem = gridDS.at(0);

Answer 2

以下是我的DropDown设置方式。这是一个布尔字段，因此您必须根据字段

进行相应调整

    columns.Bound(m => m.IsInForecast).Title("Is Forecasted").ClientTemplate(

       "# if (IsInForecast == true) { #" +

                              "<select id='#= OrderId #' onchange=save('#= OrderId #'); style='Width: 80px; color: 'navy' > " +
                                "<option id='yes' selected value='1'>Yes</option>" +
                                "<option id='no' value='0'>No</option>" +

                                "</select>" +
                         "# } else { #" +
                              "<select id='#= OrderId #' onchange=save('#= OrderId #'); style='Width: 80px; color: 'navy' > " +
                                "<option id='yes'  value='1'>Yes</option>" +
                                "<option id='no' selected value='0'>No</option>" +
                             "# } #" 
                );

如何配置Kendo UI网格以使用DropDownList编辑单元格？

2 个答案: