如何將帶有本地數據的組合框添加到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演示 （基本用法HTML5 / JavaScript）和自定義模板示例：

<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>

然后為網格創建虛擬數據，網格數據源並初始化網格

<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>

這是實際的樣子

演示