Knockout-kendo.js網格單元格DropDown

有沒有適當的方法來將kendo-ui下拉菜單集成到kendo-ui網格的列中？Knockout-kendo.js網格單元格DropDown

這是我曾嘗試使用rniemeyer的Knockout-kendo.js。裏面的$（document）。就緒：

function statusDropDownEditor(container, options) { 
     $('<input data-text-field="name" data-value-field="id" data-bind="value:' + options.field + '"/>') 
      .appendTo(container) 
      .kendoDropDownList({ 
       autoBind: false, 
       dataSource: { 
        transport: { 
         read: "/api/Status" 
        } 
       } 
      });

HTML：

<div id="prod-grid" data-bind="kendoGrid: { data: Products, height: 480, 
    sortable: true, selectable: 'row', scrollable: true, resizable: true, pageable: false, 
    columns: [ 
    { field: 'ProdName', title : 'Product Name'}, 
    { field: 'UnitCost', title: 'Unit Cost'}, 
    { field: 'TotalAmt', title: 'Batch Total'}, 
    { field: 'Manufacturer', title: 'Manufacturer'}, 
    { title: 'Status', editor: statusDropDownEditor} 
}> 
</div>

但是，它會產生一個錯誤，指出： 未捕獲的錯誤：無法解析綁定。消息：ReferenceError：categoryDropDownEditor未定義;

此外，我希望有下拉顯示基於產品模型的狀態值。

來源

2012-09-24 user1606357

我建議你不要在綁定中用你的HTML內聯你的'kendoGrid'。海事組織這是不好的做法。它會導致各種問題。保持你的代碼和標記分開。 – Brett

您可以使用knockout kendo的使用模板選項。這裏是你如何能做到這

<script id='rowTemplate' type='text/html'> 
    <tr> <td> <span data-bind = "text:ProdName" > </span>  </td> 
     <td> <span data-bind = "text:UnitCost" > </span>  </td> 
     <td> <span data-bind = "text:TotalAmt" > </span>  </td> 
     <td> <select data-bind = "options:$parent.availabeStates,value:Status" > </select>  </td> 
     </tr> 
</script> 
<table id="prod-grid" data-bind="kendoGrid: { data: Products, height: 480, 
    sortable: true,useKOTemplates:true,rowTemplate: 'rowTemplate', 

    columns: [ 
    { field: 'ProdName', title : 'Product Name'}, 
    { field: 'UnitCost', title: 'Unit Cost'}, 
    { field: 'TotalAmt', title: 'Batch Total'}, 
    { field:'Status', title: 'Status'}] 
}"></table> 
<div data-bind="foreach:Products"> 
<span data-bind="text:ProdName"></span> 

</div> 

var vm = function() { 
    var self = this; 
    self.Products = ko.observableArray(); 
    self.availabeStates = ['Fulfilled', 'Pending'] 
    self.init = function() { 
     self.Products.push({ 
      ProdName: 'Prod1', 
      UnitCost: 200, 
      TotalAmt: 400, 
      Status: 'Fulfilled' 
     }); 
     self.Products.push({ 
      ProdName: 'Prod2', 
      UnitCost: 200, 
      TotalAmt: 400, 
      Status: 'Pending' 
     }); 

    }; 
    self.init(); 
} 
ko.applyBindings(new vm());

這裏是的jsfiddle你http://jsfiddle.net/dhanasekaran/QqTwU/3/ 我沒有使用劍道下拉目的地，因爲我有問題的下拉的zIndex的，但是這是你應確定，並以這種問答不相關的/我想。

來源

2013-09-30 17:19:39

Knockout-kendo.js網格單元格DropDown

回答

相關問題