Kendo 使用 DatePicker 的网格列过滤器

Question

我正在使用 Kendo 和 ASP.NET MVC。我有一个包含多个不同列的 Kendo 网格。其中一些列包含日期。所有这些列都可以根据几个不同的标准进行过滤（等于、不等于、早于等）。当用户选择过滤任何这些列时，在过滤条件 window 中，他们应该能够使用 Kendo DatePicker 小部件。

这是要点。我们所有的日期都表示为字符串，而不是日期时间。原因很简单：当显示 DateTime 对象时，.NET and/or Kendo 将 DateTimes 转换为显示它们的浏览器的本地时间。我们不能允许这样。我们需要准确呈现我们提供的日期。

当一列表示日期时间时，DatePicker 默认可用。所以问题是，如何让过滤器 window 在列显示字符串时显示 DatePicker？

我认为必须在剃须刀中做一些特别的事情。剃刀字段绑定到模型中的属性。相关的剃须刀看起来像这样：

@(Html.Kendo().Grid<JobsAcrossWorld>()
    .Name("JobsAcrossWorld")
    .Columns(c =>
    {
        c.Bound(m => m.ScheduleDate);   // this is a DateTime as a string
        c.Bound(m => m.GeoArea);
        c.Bound(m => m.Begin);          // this is a DateTime as a string
        c.Bound(m => m.End);            // this is a DateTime as a string
        c.Bound(m => m.Effort);
    })
    .Pageable(p => p.
        Enabled(true)
    ...many more options...

抱歉，如果这是 Kendo 新手问题；我在 Kendo 方面还很陌生。

Answer 1

如果要比较日期，无论如何都需要将字符串解析为 JavaScript 中的日期对象。否则比较操作将不起作用。

当地时间不是这里的参数，它是时区可能有问题的借口。

要以 UTC 时间显示日期，请在 C# 中将日期转换为 UTC 类型：

DateTime dt = DateTime.Now;            
DateTime ut = DateTime.SpecifyKind(dt, DateTimeKind.Utc);

然后在 dataSource requestEnd 事件中为所有日期字段设置正确的时区：

field = field.replace(/\d+/, function (n) {
    var offsetMiliseconds = new Date(parseInt(n)).getTimezoneOffset() * 60000;
    return parseInt(n) + offsetMiliseconds;
});

来源：http://docs.telerik.com/aspnet-mvc/helpers/grid/how-to/editing/utc-time-on-both-server-and-client

备选

如果您不想使用此解决方案，您还有两个选择，但难度更大：

过滤器正在处理分配给列的属性，但您可以分配一个属性并使用 .Template("#= FieldName#") 显示其他。因此，您可以显示您的字符串并将第二个属性与日期分配给列，但您需要再次在属性中输入正确的日期，否则过滤器将工作错误。
您可以编写自己的过滤器来处理字符串（可能会再次根据日期解析它们），就像这个例子：http://demos.telerik.com/kendo-ui/grid/filter-menu-customization

Kendo 使用 DatePicker 的网格列过滤器

Kendo Grid Column Filter with DatePicker

asp.net-mvc

kendo-ui

kendo-grid

kendo-asp.net-mvc