ServerPaging/ServerFiltering mit KendoUI

Für eine Schweizer Bank durften wir in Zusammenarbeit mit einem Schweizer ERP-Hersteller eine Schnittstelle zwischen dem Backend der Bank und dem ERP-System realisieren. Über diese Schnittstelle werden alle Transaktionen ins Buchhaltungsmodul des ERP-Systems gebucht.

Die Transaktionen werden vor dem Abbuchen aufbereitet. Die Aufbereitungslogik basiert auf frei definierten Regeln, welche die einzelnen Transaktionen um zusätzliche Attribute (z.B. Transaktiontyp, Produkt, etc.) erweitern. Es existieren rund 20‘000 verschiedene Regeln.

Um alle Regeln zu verwalten, wurde ein Web Frontend mit ASP .NET MVC und mit Hilfe der Usercontrol Library Kendo-UI vom Hersteller Telerik realisiert. Das Backend basiert auf ASP .NET WebAPI.

Über das Web Frontend hat der User die Möglichkeit, nach Regeln zu filtern. Um mit der grossen Datenmenge auf Client-Seite umgehen zu können, wurden ServerPaging und ServerFiltering aktiviert. Standardmässig sind diese beiden Features deaktiviert. Ohne diese Features müsste der Client vorsorglich alle 20’000 Regeln laden, was einen riesigen Overhead verursachen würde.

Im nachfolgenden Beispiel wird gezeigt, was auf Client- und Serverseite angepasst werden muss, um ServerPaging und ServerFiltering zu aktivieren.

Client

Als erstes werden die beiden Optionen auf der Clientseite im View aktiviert:

<script type="text/javascript">
    $(document).ready(function () {
        var transport = new kendo.data.transports.webapi({});
        $("#systemLogs").kendoGrid({
            dataSource: {
                type: "xml",
                serverPaging: true,
                serverFiltering: true,
                transport: {
                    read: function(options) { ... },
                    parameterMap: function (options) {
                        return kendo.stringify(options);
                    },
                },
                pageSize: 20
            },
            height: 750,
            scrollable: {
                virtual: true
            },
            filterable: true,
            sortable: true,
            pageable: true
        });
    });
</script>

Sobald die beiden Optionen aktiviert sind, ruft der Client beim Abfragen der Daten die REST Methode mit zusätzlichen Parametern auf. Nachfolgend werden die Parameter kurz erklärt:

Alle Parameter werden als ein DataSourceRequest Objekt (Namespace: Kendo.UI.MVC) zusammengefasst.

Server

Auf Serverseite muss die Web API Methode erweitert werden, damit der DataSourceRequest verarbeitet werden kann.

Als erstes wird der Parameter „request“ vom Datentyp DataSourceRequest definiert mit dem zusätzlichen Attribut „ModelBinder“.

[ActionName("GetData")]
[HttpPost]
public ResponseMessageResult GetData
([System.Web.Http.ModelBinding.ModelBinder(typeof(Kendo.Mvc.UI.WebApiDataSourceRequestModelBinder)
)] Kendo.Mvc.UI.DataSourceRequest request)
{
   try
   {
    	var dataList = _dbHandler.GetData().ToDataSourceResult(request);
        var data = new DataSourceResponse<Entity> {
           Data = (List<Entity>)dataList.Data,
           Total = dataList.Total
        };

var response = ResponseMessage(new HttpResponseMessage(HttpStatusCode.OK) {
   Content = new ObjectContent<DataSourceResponse<Entity>>(data, new
   System.Net.Http.Formatting.XmlMediaTypeFormatter { UseXmlSerializer = true }) });
       return response;
   }
   catch (Exception ex)
   {
	// Error Handling Logic
   }
}

Um anschliessend die korrekten Daten aus dem Backend zu bekommen, muss lediglich die von KendoUI zur Verfügung gestellte Methode ToDataSourceResult aufrufen werden. Allerdings müssen dazu die beiden Dlls „Kendo.DynamicLinq.dll“ und „Kendo.Mvc.dll“ referenziert werden.

Im Beispiel wird die Methode GetData() aufgerufen, diese liefert eine generische Liste vom Typ List<Entity> zurück.

Weitere Ressourcen Links:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-serverFiltering http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-serverPaging http://docs.telerik.com/kendo-ui/web/grid/how-to/web-api-server-operations