Question

是否有合适的方法在kendo-ui网格列中集成kendo-ui下拉列表？

以下是我尝试过使用rniemeyer的Knockout-kendo.js。里面$（文件）.ready：

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;

另外，我希望下拉列表根据Products模型显示状态值。

Answer 1

您可以使用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问题，但那就是你应该修复并且与我猜的这个Q / A无关。

网格单元格中的Knockout-kendo.js DropDown

1 个答案: