[英]How to filter kendo grid with a column that contains multiselect - multiple values?
I have a multiselect grid column same as onabai (awesome guy on so!) I need to put filter menu on that column. 我有一个与onabai相同的多选网格列(太棒了!)我需要在该列上放置过滤器菜单。
http://onabai.wordpress.com/2013/07/17/kendoui-multiselect-in-a-grid-yes-we-can/ http://onabai.wordpress.com/2013/07/17/kendoui-multiselect-in-a-grid-yes-we-can/
I have added custom filter on the multivalue column 我在多值列上添加了自定义过滤器
filterable: {
ui: function(element) {
element.kendoDropDownList({
dataSource: [ "London", "Surat", "New York"] //etc
});
}
The filter shows up on the grid column but the filter does not filter. 过滤器显示在网格列上,但过滤器不会过滤。 I guess, I need to somehow capture the filter change event and filter data source based on value selected. 我想,我需要以某种方式捕获过滤器更改事件并根据所选值过滤数据源。
Any pointers? 有什么指针吗?
Thanks. 谢谢。
This took me a while to grasp but you can use kendoGrid custom filters for this. 这花了我一些时间来掌握,但你可以使用kendoGrid自定义过滤器。
I've created a function to setup the multiselect as the UI and its filter function: 我创建了一个函数来设置多选作为UI及其过滤功能:
function userFilter(element) {
console.log(element);
element.removeAttr("data-bind");
//$scope.kGrid.dataSource.query({ filter: filter });
$scope.userFilterElement = element.kendoMultiSelect({
dataSource: $scope.users,
optionLabel: "--Select Value--",
change: function(e){
var filter = { name: "user", logic: "or", filters: [] };
var values = this.value();
$.each(values, function(i, v) {
filter.filters.push({field: "user", operator: "eq", value: v });
});
//$scope.kGrid.dataSource.filter(filter);
if ($scope.gridFilter.filters[0] && $scope.gridFilter.filters[0].name == 'user'){
if (filter.filters.length > 0)
$scope.gridFilter.filters.splice(0,1,filter);
else
$scope.gridFilter.filters.splice(0,1);
}
else
$scope.gridFilter.filters.push(filter);
$scope.kGrid.dataSource.filter($scope.gridFilter);
}
});
} }
That's a relatively crude and basic example which I simplified for the sake of easier code reading. 这是一个相对粗糙和基本的例子,我为简化代码阅读而简化。 Here's a working code: http://plnkr.co/edit/8N1oNpsd10CJwBrWKpK3?p=preview After the grid loads, click on "add data" a few times, and then filter the users and use multiple variables. 这是一个有效的代码: http : //plnkr.co/edit/8N1oNpsd10CJwBrWKpK3?p=preview网格加载后,单击“添加数据”几次,然后过滤用户并使用多个变量。 Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.