Reputation: 613
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
});
Upvotes: 0
Views: 3914
Reputation: 931
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>
Upvotes: 1
Reputation: 1780
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
Upvotes: 1