如何为ASP.NET Core Kendo Grid添加日期范围筛选功能？

一、前端Grid配置修改 #

扩展Grid工具栏，添加日期范围选择器和筛选按钮，同时配置数据源启用服务器端操作：

@(Html.Kendo().Grid(Model)
    .Name("grid")
    .ToolBar(t =>
    {
        t.Search();
        t.Custom().Name("Clear").IconClass("mdi mdi-refresh");
        // 添加日期范围筛选控件模板
        t.Template(@<text>
            <div class="k-toolbar-item" style="margin-left:10px;">
                <label>日期范围:</label>
                @(Html.Kendo().DatePicker()
                    .Name("startFilter")
                    .Format("MM/dd/yyyy")
                    .HtmlAttributes(new { style = "margin:0 5px;" })
                )
                <span>至</span>
                @(Html.Kendo().DatePicker()
                    .Name("endFilter")
                    .Format("MM/dd/yyyy")
                    .HtmlAttributes(new { style = "margin:0 5px;" })
                )
                <button class="k-button k-primary" onclick="filterByDateRange()">筛选</button>
            </div>
        </text>);
    })
    .DataSource(dataSource => dataSource
        .Custom()
        .PageSize(10)
        .Transport(t =>
        {
            // 指定后端数据接口
            t.Read(read => read.Action("GetGridData", "Home").Type(HttpVerbs.Get));
        })
        .ServerOperation(true) // 启用服务器端处理筛选、分页
    )
    .Pageable(pager => pager.Position(GridPagerPosition.Bottom))
    .Sortable()
    .Events(events => events.DataBound("onDataBound"))
    .Columns(columns =>
    {
        // 其他列配置...
        columns.Bound(x => x.StartDate)
            .Format("{0:MM/dd/yyyy}")
            .Title("From Date");
        columns.Bound(x => x.EndDate)
            .Format("{0:MM/dd/yyyy}")
            .Title("To Date");
    })
)

二、前端JS逻辑实现 #

添加JavaScript函数处理筛选和清除操作：

<script>
// 执行日期范围筛选
function filterByDateRange() {
    const startPicker = $("#startFilter").data("kendoDatePicker");
    const endPicker = $("#endFilter").data("kendoDatePicker");
    const startDate = startPicker.value();
    const endDate = endPicker.value();

    const grid = $("#grid").data("kendoGrid");
    const filters = [];

    // 筛选逻辑：数据的EndDate >= 筛选起始日，且StartDate <= 筛选结束日（匹配时间段交集）
    if (startDate) {
        filters.push({ field: "EndDate", operator: "gte", value: startDate });
    }
    if (endDate) {
        filters.push({ field: "StartDate", operator: "lte", value: endDate });
    }

    grid.dataSource.filter({ logic: "and", filters: filters });
}

// 绑定清除按钮事件
$(function() {
    $(".k-grid-Clear").on("click", function() {
        $("#startFilter").data("kendoDatePicker").value(null);
        $("#endFilter").data("kendoDatePicker").value(null);
        $("#grid").data("kendoGrid").dataSource.filter({});
    });
});
</script>

三、后端数据接口处理 #

在对应Controller中实现数据接口，接收筛选参数并处理查询：

using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using Microsoft.AspNetCore.Mvc;

public class HomeController : Controller
{
    private readonly IYourDataRepository _repository;

    public HomeController(IYourDataRepository repository)
    {
        _repository = repository;
    }

    public IActionResult GetGridData([DataSourceRequest] DataSourceRequest request, 
                                     DateTime? startFilter, DateTime? endFilter)
    {
        // 获取原始数据查询
        var dataQuery = _repository.GetAllItems();

        // 应用日期范围筛选
        if (startFilter.HasValue)
        {
            dataQuery = dataQuery.Where(item => item.EndDate >= startFilter.Value);
        }
        if (endFilter.HasValue)
        {
            dataQuery = dataQuery.Where(item => item.StartDate <= endFilter.Value);
        }

        // 处理分页、排序等Kendo请求参数
        var result = dataQuery.ToDataSourceResult(request);

        return Json(result);
    }
}

补充说明 #

• 若需要调整筛选逻辑（比如仅匹配StartDate在范围内），可修改JS和后端的筛选条件；
• 确保已安装Kendo.Mvc NuGet包，并在Startup.cs中配置Kendo服务：

  services.AddKendo();
  

内容的提问来源于stack exchange，提问作者Jesus