ASP.NET MVC：使用kendoDatePicker发布过滤kendoGrid

Question

我在这里与一个问题斗争，仍然无法解决它。事实是，我有一个kendoGrid 4列，其中两个是文本和日期。 该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> 

对于我提到这两个colums，我对文本一个文本框和两个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); 

      }); 

当按钮被点击时，网格保持无限循环，如下图所示。如果我评论datepickers一切正常，所以我怀疑问题在那里，在格式或什么...我真的不知道。

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

Answer 1

我解决了它！似乎编译器不会进行任何从“字符串”到“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 
}