Kendo ui使用mvvm的网格过滤器数据源
问题描述:
我想仅使用声明性语句而不是js来构建kendo网格。Kendo ui使用mvvm的网格过滤器数据源
我也想在声明性语句本身中通过数据源应用“过滤器”。可能的是,如果在剑道网格的data-bind属性中有可用的选项。
请用的jsfiddle
答
下面是使用MVVM剑道网格的jsFiddle DEMO示出使用具有过滤帮助。
下面是演示代码片段:
HTML:
<div data-role="grid"
data-filterable="true"
data-editable="true"
data-toolbar="['create', 'save']"
data-columns="[
{ 'field': 'ProductName', 'width': 270 },
{ 'field': 'UnitPrice' },
]"
data-bind="source: products,
visible: isVisible,
events: {
save: onSave
}"
style="height: 200px"></div>
JS:
var viewModel = kendo.observable({
isVisible: true,
onSave: function(e) {
kendoConsole.log("event :: save(" + kendo.stringify(e.values, null, 4) + ")");
},
products: new kendo.data.DataSource({
schema: {
model: {
id: "ProductID",
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" }
}
}
},
batch: true,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
},
update: {
url: "https://demos.telerik.com/kendo-ui/service/products/update",
dataType: "jsonp"
},
create: {
url: "https://demos.telerik.com/kendo-ui/service/products/create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
}
})
});
kendo.bind($("#example"), viewModel);
您是否尝试过我的解决办法了吗?让我知道你是否有任何问题,否则你可能会接受和投票我的回答:) –