如何在Kendo网格的客户端过滤网格时获得事件处理程序
How to get the event handler when grid is filtered in client side in Kendo grid?
我在这里创建了一个简单的网格,我想在本地过滤网格时重新计算列的总和。我不想有计算列或模板,因为我想更新标签,而且当网格在本地过滤时,我必须在页面中执行一些其他操作。
var data = [
{ item: "item1", weight: 15 },
{ item: "item2", weight: 22 },
{ item: "item3", weight: 43 },
{ item: "item4", weight: 37 },
{ item: "item5", weight: 33 }
];
$("#grid").kendoGrid({
columns: [
{ field: "item" },
{ field: "weight" }
],
filterable: true,
sortable: true,
pageable: true,
resizable:true,
selectable: "row",
columnMenu: true,
dataSource:data ,
change: function(e) {
var grid = e.sender;
var selected = grid.dataItem(this.select());
alert(selected.item);
getSum();
}
});
getSum();
function getSum() {
var grid = $("#grid").data("kendoGrid");
var data = grid.dataSource.data();
var sum = 0;
for ( var i = 0; i<= (data.length-1);i++)
{
sum = sum + data[i].weight;
}
$("#weight-label").text(sum);
}
http://jsfiddle.net/KendoDev/gb3qzgm2/
在客户端过滤网格时,如何获取事件处理程序?
在计算和的函数中,应该使用grid.dataSource.view()
而不是grid.dataSource.data()
。
您的JSFiddle在此处进行了修改:http://jsfiddle.net/OnaBai/gb3qzgm2/1/
根据Kendo UI文档:data()
返回获取数据源的数据项。
而CCD_ 4
返回与当前页面、过滤器、排序和组配置相对应的数据项
然后,如果您想自动更新标签,您可以从网格dataBound
事件处理程序中调用getSum
,就像在另一个版本的JSFiddle中一样:http://jsfiddle.net/OnaBai/gb3qzgm2/2/
我只对您的代码做了一些小的更改,这些更改适应了Kendo命令的方式,当我们可以在生成"Kendo修订/生成"javascript字符串之前注入我们自己的自定义javascript时:
http://jsfiddle.net/gb3qzgm2/4/
var data = [{
item: "item1",
weight: 15
}, {
item: "item2",
weight: 22
}, {
item: "item3",
weight: 43
}, {
item: "item4",
weight: 37
}, {
item: "item5",
weight: 33
}];
$("#grid").kendoGrid({
columns: [{
field: "item"
}, {
field: "weight"
}],
filterable: true,
sortable: true,
pageable: true,
resizable: true,
selectable: "row",
columnMenu: true,
dataSource: data,
change: function (e) {
var grid = e.sender;
var selected = grid.dataItem(this.select());
alert(selected.item);
var s = getSum();
$("#weight-label, .k-pager-info").text('The Sum is: ' + s);
}
});
//getSum();
function getSum() {
var grid = $("#grid").data("kendoGrid");
var data = grid.dataSource.data();
var sum = 0;
for (var i = 0; i <= (data.length - 1); i++) {
sum = sum + data[i].weight
}
return sum
}
相关文章:
- '填隙'当所述项目不在容器中时,将一些项目与引导程序网格对齐
- 基本的Twitter引导程序网格故障
- 我怎么能用Codeigniter在可滚动的部分创建一个无限向下滚动的网格加载程序呢
- nggrid - 错误: [$injector:unpr] 未知提供程序: 网格服务提供程序 <- 网格服务<- 家庭控
- 为光滑网格编写自定义格式化程序
- 使用控制器中对象的位置 x,y 创建一个动态网格或表格 - 引导程序,AngularJS
- 引导程序网格间距不正确
- preventDefault()在剑道网格中不起作用'的自定义单击处理程序
- Windows 8网格模板JS应用程序,CSS操作不会显示在groupedItems视图中的所有选定项目上
- 当我介绍ui网格时,Angular应用程序崩溃了
- 引导程序网格的默认样式
- 将事件侦听器添加到城域网样式的网格应用程序中
- jqgrid 自定义格式化程序:自定义格式化程序始终返回网格的最后一行.为什么
- 如果我在网格-地铁风格的应用程序中滑动项目,则无法移动屏幕
- 如何将引导程序网格与系统一起用于滑块
- D3(具有引导程序网格布局)-工具提示位置关闭
- 浏览器在Asp.net应用程序上使用网格时表现出奇怪的行为
- Angular ui网格通过程序设置过滤字段并刷新.值未显示
- 在Twitter引导程序中创建网格跨度之间的空间
- 如何在Kendo网格的客户端过滤网格时获得事件处理程序