[英]how to add combobox with local data to kendo grid column template
我可以使用这种方式在Kendo网格列中定义组合框吗? 可以将其插入列的模板吗?
var localData = [
{"ProductName":"Chai"},
{"ProductName":"Chai1"},
{"ProductName":"Chai2"},
{"ProductName":"Chai3"},
{"ProductName":"Chai4"},
];
$("#products_dropDownList").kendoDropDownList({
dataTextField: "ProductName",
dataValueField: "ProductID",
dataSource: localData
});
是的你可以。 请参阅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>
是的,你可以,如果我是你,这就是我要做的。 首先,只需使用输入创建模板并添加类(以后用作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>
这是实际的样子
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.