3

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

这是我使用 rniemeyer 的Knockout-kendo.js尝试过的。在 $(document).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 模型的状态值。

4

1 回答 1

0

您可以使用淘汰赛剑道的使用模板选项。这是你如何做到的

<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/ 我没有故意使用 kendo 下拉菜单，因为我有下拉 zIndex 的问题，但那你应该修复并且与这个 Q/A 我无关猜测。

于 2013-09-30T17:19:39.163 回答