Kendo UI - 2 个日期之间的网格/过滤器菜单自定义答案

【问题标题】：Kendo UI - Grid / Filter menu customization between 2 datesKendo UI - 2 个日期之间的网格/过滤器菜单自定义
【发布时间】：2014-08-27 00:22:58
【问题描述】：

我正在使用一些 Kendo UI 网格，并且一直在使用可用的过滤选项，它们运行良好。有谁知道是否有办法对列进行日期范围过滤？我能得到的最接近的是 >= 和

有谁知道有没有办法做到这一点？

谢谢

【问题讨论】：

你可以看看我在How to define a Kendo grid Column filter between two dates?上的回答。

标签： c# asp.net-mvc kendo-ui kendo-grid

【解决方案1】：

我正在与您分享有关列的日期范围过滤器的链接..

http://dojo.telerik.com/@pesho/UMIw/3

希望你喜欢.. 那就别忘了投票哦。。

【讨论】：

【解决方案2】：

您基本上需要为您的 DataSource 定义一个过滤器，然后调用 filter 方法。

按如下方式完成：

// Get from date in this case we read it from an input DatePicker
var from = $("#from").data("kendoDatePicker").value()
// Get to date in this case we read it from an input DatePicker
var to = $("#to").data("kendoDatePicker").value()
// Create a filters condition. By default, the conditions are "and" but they might also
// be "or"
var filters = [
    {field: "BirthDate", operator: "gte", value: from},
    {field: "BirthDate", operator: "lte", value: to}
];
// Set the filtering condition to our grid dataSource
grid.dataSource.filter(filter);

你可以看到它在这里运行：http://jsfiddle.net/OnaBai/f19k0vrt/3/

如果您想永久显示日期，也可以在网格工具栏中定义日期的输入字段。

定义模板：

<script id="dates-template" type="text/kendo-tmpl">
    From: <input id="from" style="width: 120px"/> 
    To: <input id="to" style="width: 120px"/>
    <button id="filter" class="k-button">Filter</button>
</script>

并将上面定义的工具栏模板添加到您的网格初始化中：

var grid = $("#grid").kendoGrid({
    toolbar   : [
        { template: kendo.template($("#dates-template").html()) }
    ],
    dataSource: ds,

你可以看到它在这里运行：http://jsfiddle.net/OnaBai/f19k0vrt/4/

【讨论】：