Question

我可以使用这种方法在kendo网格列中定义组合框吗？可以插入列的模板中吗？

var localData = [
    {"ProductName":"Chai"},
        {"ProductName":"Chai1"},
        {"ProductName":"Chai2"},
        {"ProductName":"Chai3"},
        {"ProductName":"Chai4"},

];


$("#products_dropDownList").kendoDropDownList({
    dataTextField: "ProductName",
    dataValueField: "ProductID",
    dataSource: localData
});

Answer 1

是的，你可以。请参阅Kendo UI Combobox Demos（基本用法HTML5 / JavaScript）和Customizing templates示例：

<input id="fabric" placeholder="Select fabric..." style="width: 100%;" />
<script>
$("#fabric").kendoComboBox({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: [
        { text: "Cotton", value: "1" },
        { text: "Polyester", value: "2" },
        { text: "Cotton/Polyester", value: "3" },
        { text: "Rib Knit", value: "4" }
    ],
    template: "<h3>#: data.text #</h3>",
    filter: "contains",
    suggest: true,
    index: 3
});
</script>

Answer 2

是的你可以，如果我是你，这就是我要做的。首先只需创建一个带输入和添加类的模板（稍后用作jQuery选择器）

<script id="product-template" type="text/x-kendo-template">
      <input class="combobox"/>
</script>

然后为网格，网格数据源创建dummydata，并初始化网格

<script>
    var localData = [
            {ProductName:"Chai1",ProductID:1},
        {ProductName:"Chai2",ProductID:2},
        {ProductName:"Chai3",ProductID:3},
        {ProductName:"Chai4",ProductID:4},
        {ProductName:"Chai5",ProductID:5},

    ];

    var ds = new kendo.data.DataSource({
        data: localData

    });



    var gridData = [
            {ProductName:"Chai1",ProductID:1,Category:"Drink"},
        {ProductName:"Chai2",ProductID:2,Category:"Food"},
        {ProductName:"Chai3",ProductID:3,Category:"Food"},
        {ProductName:"Chai4",ProductID:4,Category:"Drink"},
        {ProductName:"Chai5",ProductID:5,Category:"Food"},

    ];

    var gridDS = new kendo.data.DataSource({
        data: gridData

    });

    $("#grid").kendoGrid({
      columns: [ {
        field: "ProductName",
        template: kendo.template($("#product-template").html())
      }],
      dataSource: gridDS,
      dataBound: function(e){
        var grid = $("#grid").data("kendoGrid");
        var data = grid.dataSource.data();
        $.each(data, function (i, row) {
            $('tr[data-uid="' + row.uid + '"]').find(".combobox").kendoComboBox({
                dataTextField: "ProductName",
                dataValueField: "ProductID",
                dataSource: ds,
                value: data[i].ProductID
              })

        });
      }
    });
</script>

这就是行动中的样子

DEMO

如何将组合框与本地数据添加到kendo网格列模板

2 个答案: