Kendo Grid Date Filter wird nicht mit meinen JSON-Daten arbeiten

Question

Ich benutze ein Kendo-Grid von Telerik und läuft auf ein Problem. Ich möchte die Datenserverseite mit einem Datumsfilter filtern. So fand ich ein laufendes Beispiel, das funktioniert, wie ich erwarten:

<div id="grid"></div> 
<script> 
$(document).ready(function() { 
    $("#grid").kendoGrid({ 
     dataSource: { 
      type: "odata", 
      transport: { 
       read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders" 
      }, 
      schema: { 
       model: { 
        fields: { 
         OrderDate: { type: "date" } 
        } 
       } 
      }, 
      pageSize: 20, 
      serverPaging: true, 
      serverFiltering: true, 
      serverSorting: true 
     }, 
     height: 550, 
     filterable: true, 
     sortable: true, 
     pageable: true, 
     columns: [ 
      { 
       field: "OrderDate", 
       title: "Order Date", 
       format: "{0:MMM dd, yyyy}", 
       parseFormats: "{0:MM/dd/yyyy}", 
       headerTemplate: '<label for="check-all"><b>Start Date</b></label>', 
       headerAttributes: { style: "text-align: center;" }, 
       attributes: { style: "text-align:center !important;padding-right: 25px;" }, 
       filterable: { 
        ui: function (element) { 
         element.kendoDatePicker({ 
          format: "MMM dd, yyyy" 
         }); 
        } 
       } 
      } 
     ] 
    }); 
}); 

Nun änderte ich dieses Beispiel für meine Bedürfnisse. Ich verwende einen REST-API-Aufruf, der JSON-Daten zurückgibt. Die Daten werden im Raster angezeigt, aber wenn ich versuche, einen Filter anzuwenden, gehen die Daten verloren. Es scheint, dass etwas mit dem Datumsformat nicht stimmt, aber ich weiß nicht, was der richtige Weg ist. Hier ist mein Code:

<div id="grid"></div> 
<script> 
$(document).ready(function() { 
    $("#grid").kendoGrid({ 
     dataSource: { 
      transport: { 
       read: { 
        url: "http://localhost/FPT2015.WebApp/api/BereitschaftszeitStammdaten", 
        dataType: "json" 
       } 
      }, 
      schema: { 
       data: "d.results", 
       model: { 
        fields: { 
         stundeVon: { type: "date" } 
        } 
       } 
       , parse: function (data) { 
        $.each(data.d.results, function (i, val) { 
         val.stundeVon = new Date(val.stundeVon); 
        }); 
        return data; 
       } 
      }, 
      pageSize: 20, 
      serverPaging: true, 
      serverFiltering: true, 
      serverSorting: true 
     }, 
     height: 550, 
     filterable: true, 
     sortable: true, 
     pageable: true, 
     columns: [ 
      { 
       field: "stundeVon", 
       title: "Order Date", 
       format: "{0:MMM dd, yyyy}", 
       parseFormats: "{0:MM/dd/yyyy}", 
       headerTemplate: '<label for="check-all"><b>Start Date</b></label>', 
       headerAttributes: { style: "text-align: center;" }, 
       attributes: { style: "text-align:center !important;padding-right: 25px;" }, 
       filterable: { 
        ui: function (element) { 
         element.kendoDatePicker({ 
          format: "MMM dd, yyyy" 
         }); 
        } 
       } 
      } 
     ] 
    }); 
}); 

Und das ist die JSON, dass meine API zurückkehrt:

{ 
    "d":{ 
     "__count":6, 
     "results":[ 
      { 
       "bereitschaftszeitId":2, 
       "bereitschaftlerId":1, 
       "stundeVon":"2015-11-25T06:00:00+01:00", 
       "stundeBis":"2015-12-07T07:00:00+01:00" 
      }, 
      { 
       "bereitschaftszeitId":5, 
       "bereitschaftlerId":2, 
       "stundeVon":"2015-12-07T06:00:00+01:00", 
       "stundeBis":"2015-12-14T06:00:00+01:00" 
      }, 
      { 
       "bereitschaftszeitId":7, 
       "bereitschaftlerId":1, 
       "stundeVon":"2016-01-10T10:00:00+01:00", 
       "stundeBis":"2016-01-17T10:00:00+01:00" 
      }, 
      { 
       "bereitschaftszeitId":12, 
       "bereitschaftlerId":13, 
       "stundeVon":"2016-01-03T10:00:00+01:00", 
       "stundeBis":"2016-01-10T10:00:00+01:00" 
      }, 
      { 
       "bereitschaftszeitId":15, 
       "bereitschaftlerId":2, 
       "stundeVon":"2016-01-18T06:00:00+01:00", 
       "stundeBis":"2016-02-19T06:00:00+01:00" 
      }, 
      { 
       "bereitschaftszeitId":44, 
       "bereitschaftlerId":2, 
       "stundeVon":"2016-03-11T12:06:21.207+01:00", 
       "stundeBis":"2017-03-11T00:06:00+01:00" 
      } 
     ] 
    } 
} 

Sieht jemand, was ich falsch hier? Ich würde mich freuen, wenn du mir helfen kannst.

Answer 1

Das Problem hier war meine Server-Seite Code (C#). Die Filterlogik wurde korrekt an den Server übergeben, aber es hatte ich eine Linq DynamicQuery, die einen Where-String wie zu handhaben nicht in der Lage war:

Where(@"StundeVon == ""Tue Mar 08 2016 00:00:00 GMT+0100 (Mitteleuropäische Zeit)""")

ich den Ausdruck aktualisiert, paramters zu verwenden und es funktioniert jetzt . Es sieht etwa so aus:

Where(@"StundeVon == @0", new DateTime(2016,3,8))

Vielen Dank für Ihre Hilfe David. Es hat mich auf die richtige Spur gebracht. Der Zeitabschnitt war auch eine Sache :-)

Answer 2

Ich habe eine einfache Dojo produziert für Sie hoffentlich das erwartete Ergebnis zu sehen: http://dojo.telerik.com/eXEFO

Alles, was ich habe ist das Datum Parsing Element dieses gezwickt getan:

val.stundeVon = new Date(val.stundeVon); 
val.stundeVon.setHours(0,0,0,0); 

Wenn Sie die Vergleichens Datum es wird eine exact Übereinstimmung, was bedeutet, dass, wenn Sie nicht die Zeit Element als Teil Ihrer Filterung dann wird das System ein Datum basierend darauf TT MMM JJJJ HH: mm: ss und in der Filterung wird sich bewerben das Datumselement, aber immer 00:00:00 als Zeitabschnitt.

Also alles, was ich getan habe, ist erzwingen, dass der Zeitabschnitt auf den Standardwert 00:00:00 gesetzt wird, und dann funktioniert die Filterung wie erwartet.

Wenn dies nicht das erwartete Verhalten ist und das Zeitelement wichtig ist, dann ändern Sie das Filtersteuerelement in eine Datumszeitauswahl und diese sollte dann auch den Zeitabschnitt passieren.

Hinweis: Ich habe die Filterung geändert, Paging usw. auf Client-Seite für dieses Beispiel

irgendwelche Probleme geben Sie mir einen Ruf zu arbeiten.