javascript - ASP.NET MVC : issue filtering kendoGrid with kendoDatePicker

Question

我在这里遇到一个问题，但仍然无法解决。事实是我有一个包含 4 列的 kendoGrid，其中两列是文本和日期。kendoGrid 是这样定义的:

<div class="content-grid">

            @(Html.Kendo().Grid<System.Data.DataRow>()
                  .Name("grdTraceLog")
                  .Columns(columns =>
                      {
                          columns.Bound("TraceId").Visible(false);
                          columns.Bound("DateTime").Title("Fecha/Hora Novedad").Format("{0:dd-MM-yyyy}");
                          columns.Bound("Type").Title("Tipo");
                          columns.Bound("Message").Title("Mensaje");
                          columns.Bound("Terminal").Title("Terminal");

                      })

                        .Pageable()
                        .Sortable()
                        .DataSource(dataSource => dataSource
                                                    .Ajax()
                                                    .PageSize(10)
                                                    .ServerOperation(false)
                                                    .Model(model =>
                                                        {
                                                            model.Id("TraceId");
                                                            model.Field("TraceId", typeof(int));
                                                            model.Field("DateTime", typeof(DateTime));
                                                            model.Field("Type", typeof(string));
                                                            model.Field("Message", typeof(string));
                                                            model.Field("Terminal", typeof(string));
                                                        })
                                                    .Read(read => read.Action("Read", "TraceLog"))
                )
            )
        </div>

对于我提到的那两个列，我有一个用于文本的文本框和两个用于日期字段的 kendoDatePickers，它们在要过滤的网格上定义了“大于”和“小于”的范围。以下是过滤器的定义:

<div id="filterPanel">
            <div id="filterInlineBlock" class="content-filters">

                <div class="same-line">
                    <span>Terminal:</span>
                </div>
                <div class="same-line" >
                    @Html.EditorFor(m => m.txbTerminal)
                </div>

                <div class="same-line">
                    <span>Fecha Desde:</span>
                </div>
                <div class="same-line" >
                    @(Html.Kendo().DatePicker()
                          .Name("dpDateFrom")
                          .Value(DateTime.Today.AddDays(-1))
                          .Format("dd-MM-yyyy")
                          .HtmlAttributes(new {@class = "filter-date"})
                          .HtmlAttributes(new { @class = "wide-datepicker" })
                          .Enable(true)
                          )
                </div>

                <div class="same-line">
                    <span>Fecha Hasta:</span>
                </div>
                <div class="same-line" >
                    @(Html.Kendo().DatePicker()
                          .Name("dpDateTo")
                          .Value(DateTime.Today)
                          .Format("dd-MM-yyyy")
                          .HtmlAttributes(new { @class = "filter-date" })
                          .HtmlAttributes(new { @class = "wide-datepicker" })
                          .Enable(true)
                          )
                </div>
                <div class="same-line" >
                    <button class="k-button" id="btnFilter">BUSCAR</button>
                </div>
            </div>
        </div>

如您所见，我创建了一个名为“btnFilter”的按钮，它为 kendoGrid 上的过滤器执行脚本。 JavaScript 是这个:

$("#btnFilter").click(function() {
                $filter = new Array();
                $terminal = $("#txbTerminal").val();
                $dpFrom = $("#dpDateFrom").val();
                $dpTo = $("#dpDateTo").val();
                if ($terminal) {
                    $filter.push({ field: "Terminal", operator: "contains", value: $terminal });
                }

                if ($dpFrom) {
                    $filter.push({ field: "DateTime", operator: "gt", value: $dpFrom }); //gt = greater than
                }

                if ($dpTo) {
                    $filter.push({ field: "DateTime", operator: "lt", value: $dpTo }); // lt = less than
                }

                var grid = $("#grdTraceLog").data("kendoGrid");
                grid.dataSource.filter($filter);

            });

单击按钮时，网格将保持无限循环，如下图所示。如果我评论日期选择器，一切正常，所以我怀疑问题出在格式或其他方面......我真的不知道。

我需要一些帮助!有人能够通过这种方式制作一些过滤器吗？...任何建议都非常感谢!

Answer 1

我解决了!!似乎编译器没有进行任何从“string”到“DateTime”的转换来进行比较。因此，您需要将 javascript 变量显式转换为日期。那是因为我在网格中将该字段指定为“DateTime”。这是您需要更改的行:

if ($dpFrom)     {
    $filter.push({ field: "DateTime", operator: "gt", value: new Date($dpFrom) }); //gt = greater than
}

if ($dpTo) {
    $filter.push({ field: "DateTime", operator: "lt", value: new Date($dpTo) }); // lt = less than
}