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

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 (basic usage HTML5/JavaScript) and 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

是的，你可以，如果我是你，我会这样做。首先创建一个带有输入的模板并添加 class（稍后用作 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

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

how to add combobox with local data to kendo grid column template

javascript

jquery

combobox

kendo-ui

kendo-grid