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，它们定义了＆＃34;大于＆＃34;的范围。和＆＃34;小于＆＃34;在要过滤的网格上。以下是过滤器的定义：

<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>

如你所见，我创建了一个名为＆＃34; btnFilter＆＃34;的按钮。它为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);

            });

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

我需要一些帮助！有人能够以这种方式制作一些过滤器吗？...任何建议都值得感谢！

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
}

ASP.NET MVC：使用kendoDatePicker过滤kendoGrid

1 个答案: