带有自定义过滤器的 Kendo MVVM Grid
Posted
技术标签:
【中文标题】带有自定义过滤器的 Kendo MVVM Grid【英文标题】：Kendo MVVM Grid with custom filters 【发布时间】：2016-01-23 05:12:26 【问题描述】：我正在使用 MVVM 模式构建 Kendo Grid，我想要 2 个自定义过滤器：
-
带有
extra = false 和自定义运算符的通用网格过滤器
带有组合框的自定义列过滤器
与this Kendo Grid demo 非常相似。我似乎无法使用列上的data-filterable 属性或filterable ui 使其与MVVM 模式一起工作：
<div data-role="grid"
data-filterable="customGridFilter"
data-columns="[
field: 'Id', hidden: 'true' ,
field: 'Name', filterable: ' ui: customNameFilter ' ,
field: 'Value'
]"
data-bind="source: gridDs">
</div>
我有 created a JS Fiddle 来说明我的目标。
【问题讨论】：
首先，去掉那些 ' 在可过滤的：' ui: ... '，应该只是可过滤的： ui: customerNameFilter 。 看来你是对的。还是没有运气。 它正在工作here 你是对的。那确实奏效了。谢谢！ 嘿@machun，显然这个问题有一些观点和投票。您想“回答”这个问题，以便我将其标记为答案吗？如果没有，我会添加它。 【参考方案1】：实际上它只是错过了一些点，例如
data-filterable="customGridFilter" 应该变成
data-filterable="true",
在剑道道场中，他们使用的是 jQuery 1.9.1，而你的是
导致问题的紧凑（边缘）。
更改为 jQuery 1.9.1 后，它可以正常工作，如下所示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="test">
<script>
var customNameFilter = customNameFilter || null;
</script>
<div data-role="grid" data-filterable="true" data-columns="[
field: 'Id', hidden: 'true' ,
field: 'Name', filterable: ui: customNameFilter ,
field: 'Value'
]" data-bind="source: gridDs"></div>
</div>
<script>
$(document).ready(function()
customNameFilter = function(e)
console.log("test")
e.kendoComboBox(
dataSource:
data: [
Id: 1,
Name: "Test1"
,
Id: 2,
Name: "Test2"
,
Id: 3,
Name: "Test3"
]
,
dataValueField: "Id",
dataTextField: "Name",
filter: "contains"
);
;
var viewModel = kendo.observable(
gridDs: new kendo.data.DataSource(
data: [
Id: 1,
Name: "Test1",
Value: 3
,
Id: 2,
Name: "Test2",
Value: 5
,
Id: 3,
Name: "Test3",
Value: 2
,
Id: 4,
Name: "Test4",
Value: 7
]
),
customGridFilter:
extra: false,
operators:
string:
contains: "Contains",
doesnotcontain: "Does not contain",
eq: "Is equal to",
neq: "Is not equal to",
startswith: "Starts with",
endswith: "Ends with"
,
);
kendo.bind($('#test'), viewModel);
);
// this doesn't work
//var grid = $('#test').data('kendoGrid');
//grid.options.filterable = customFilter;
</script>
</body>
</html>【讨论】：
以上是关于带有自定义过滤器的 Kendo MVVM Grid的主要内容，如果未能解决你的问题，请参考以下文章
Kendo UI Grid 自定义过滤器菜单在第一次过滤或清除后中断
带有自定义JSON Web服务器的Kendo UI Grid - “未捕获的TypeError：this.replace不是函数”
带有模态问题的Jquery Dialog中的Kendo Grid