如何用MVC Razor自定义Kendo Grid日期列筛选器仅显示From和To

我刚好之前处理过类似的需求，用MVC Razor配置Kendo Grid日期列的筛选器只显示From/To其实不难，核心是通过Filterable()配置项来限制筛选操作符并调整显示逻辑，下面给你两种可行的方案：

方案一：快速配置（仅保留Between筛选） #

这种方法直接通过Razor的Kendo Grid配置就能实现，不需要额外写JS，适合追求简洁的场景：

@(Html.Kendo().Grid<YourModel>()
    .Name("yourGrid")
    .Columns(columns => {
        columns.Bound(m => m.YourDateColumn)
            .Filterable(filterable => filterable
                // 隐藏默认的多条件筛选行，只保留一组筛选器
                .Extra(false)
                // 清除所有默认日期筛选操作，只保留"Between"（对应From/To输入框）
                .Operators(op => op
                    .Date(dateOps => dateOps
                        .Clear()
                        .Add("Between", "is between {0} and {1}")
                    )
                )
            );
        // 其他列配置...
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("YourReadAction", "YourController"))
    )
)

配置后，点击日期列的筛选按钮，就只会显示From和To两个日期输入框，Kendo会自动处理筛选逻辑和日期格式，非常省心。

方案二：自定义筛选模板（灵活定制UI） #

如果需要更个性化的筛选界面（比如调整布局、添加自定义按钮），可以用自定义模板的方式：

首先在Grid列的Filterable配置中指定模板名称：

columns.Bound(m => m.YourDateColumn)
    .Filterable(filterable => filterable
        .Template("dateRangeFilterTemplate")
        .Extra(false)
    );

然后在页面中添加模板的HTML和逻辑JS：

<script id="dateRangeFilterTemplate" type="text/x-kendo-template">
    <div class="k-filter-help-text">筛选日期范围:</div>
    <div style="margin: 8px 0;">
        <label>开始日期: @(Html.Kendo().DatePicker().Name("fromDate").ToClientTemplate())</label>
    </div>
    <div style="margin: 8px 0;">
        <label>结束日期: @(Html.Kendo().DatePicker().Name("toDate").ToClientTemplate())</label>
    </div>
    <div style="margin-top: 12px;">
        <button class="k-button k-primary" onclick="applyDateFilter(this)">应用筛选</button>
        <button class="k-button" onclick="resetDateFilter(this)">重置</button>
    </div>
</script>

<script>
function applyDateFilter(btn) {
    var popup = $(btn).closest(".k-filter-menu").data("kendoPopup");
    var grid = $("#yourGrid").data("kendoGrid");
    var fromDate = $("#fromDate").data("kendoDatePicker").value();
    var toDate = $("#toDate").data("kendoDatePicker").value();
    
    var filters = [];
    if (fromDate) filters.push({ field: "YourDateColumn", operator: "gte", value: fromDate });
    if (toDate) filters.push({ field: "YourDateColumn", operator: "lte", value: toDate });
    
    grid.dataSource.filter(filters.length ? { logic: "and", filters: filters } : {});
    popup.close();
}

function resetDateFilter(btn) {
    var popup = $(btn).closest(".k-filter-menu").data("kendoPopup");
    $("#fromDate").data("kendoDatePicker").value(null);
    $("#toDate").data("kendoDatePicker").value(null);
    $("#yourGrid").data("kendoGrid").dataSource.filter({});
    popup.close();
}
</script>

这种方式可以完全掌控筛选器的UI和交互逻辑，比如用Kendo的DatePicker替代原生输入框，体验更统一。

注意事项 #

• 记得把代码中的YourModel、YourDateColumn、yourGrid、YourReadAction、YourController替换成你项目中的实际名称。
• 方案一足够满足大部分基础需求，推荐优先尝试；方案二则适合有定制化需求的场景。

内容的提问来源于stack exchange，提问作者Casey ScriptFu Pharr