javascript - 如何将带有本地数据的组合框添加到kendo网格列模板

Question

我可以使用这种方式在剑道网格列中定义组合框吗？可以插入到栏目模板中吗？

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

];


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

Answer 1

是的，你可以，如果我是你，我就会这么做。首先创建一个带有输入的模板并添加类(稍后用作 jQuery 选择器)

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

然后创建网格的虚拟数据、网格数据源，并初始化网格

<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