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

Question

Can I use this way of defining combobox in kendo grid column? Can it be inserted in template of the column?

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

];


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

Answer 1

Yes, you can. See Kendo UI Combobox Demos (basic usage HTML5/JavaScript) and Customizing templates examples:

<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

Yes you can, if i were you this is what i would do this. First just create a template with input and add class (later use as jQuery selector)

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

Then create the dummydata for grid, grid datasource, and initialize the grid

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

Here's what it looks like in action

DEMO