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 
}