SmartForms mit JQUERY-Grid und ODATA-Service aufpeppen

Trotz aller Funktionalitäten und Möglichkeiten, die K2 mit seinen SmartViews und SmartForms bietet, vermisste ich von Anfang mehr Flexibilität und Möglichkeiten bei der Darstellung von Daten in Listenform.

Zu nennen wären da z.B. Funktionalitäten wie:

Gruppieren
Hierarchien darstellen
ausgeprägtere Blätter und Filterfunktionen
Templatefunktionen bzw. allgemein mehr Funktionalitäten bei der Darstellung
…

Da ich schon in anderen Lösungen auf Controls der Firma Telerik zurückgegriffen habe, und auch deren JScript-UI Controls verwende (KENDO UI) habe ich relativ schnell versucht Smartobjekt-Daten mit Hilfe der KENDO UI in Smartviews bzw. SmartForms einzubinden. Ganz nebenbei finde ich es ungemein hilfreich diese Listen auch ohne eine echte „Listview“ einbinden zu können (wie auf der Hardcopy weiter unten zu sehen)

In der Version 4.7 hatte ich noch einen eigenen HTTP-Handler programmiert, der mit Hilfe von verschiedenen Parametern Daten aus einem Smartobjekt im JSON-Format zurückgegeben hat. Mit Hilfe diesen HTTP-Handlers war es mir möglich Daten innerhalb einer Smartview an ein KENDO UI Grid zu binden und darzustellen.

Seit K2 Five gibt es ja nun den ODATA-Service, der diese Arbeit verrichten kann. Daher möchte ich kurz beschreiben wie man den ODATA-Service nutzen kann um Smartobjekt-Daten auf andere Weise und etwas schicker darzustellen.

Das Beispiel in Bild 1 zeigt die Daten eines einfachen Smartobjektes in einem KENDO UI Grid. Über die Spaltennamen kann sortiert werden, eine Blätterfunktion ist ebenso vorhanden. Bild 2 zeigt die Gruppierungsfunktion.

Theoretisch sind alle Funktionen des Grids verwendbar (und da gibt es Einige …) – je nachdem wie man das Grid konfiguriert. Das Grid ist in diesem Beispiel in einer „ItenView“ integriert.

Im linken Bereich werden die Daten aufgelistet, rechts können einzelne Datensätze bearbeitet werden. Wählt man einen Datensatz im Grid aus, wird er in das Formular geladen. Der Einfachheit geschuldet, habe ich hier darauf verzichtet, die Daten des Grid zu aktualisieren wenn der Datensatz über den Speicherbutton aktualisiert wurde (was mit ein wenig JScript einfach zu lösen wäre).

Das Schöne ist natürlich, dass KENDO UI nicht nur das Grid zu bieten hat. Es gibt noch viele, weitere UI Controls, die sich an Remote-Daten binden lassen, und somit ebenfalls eingebunden und mit Daten aus Smartobjekten gefüllt werden können (z.B. das ListView etc.) – dadurch ergeben sich natürlich schöne und vielfältige Möglichkeiten.

(Bild 1)

(Bild 2)

Das Bild 3 zeigt die „ItemView“ im Designer.

(1) Im linken Bereich wurde nur das HTML-Literal eingebunden, welches das u.a. Scriptschnipsel aufnimmt.

Im rechten Bereich befinden sich die Controls, zur Bearbeitung eines Datensatzes. Das DataLabel [SelID] (2) nimmt die ID des ausgewählten Datensatzes aus dem KENDO UI Grid auf. Über das Change-Event des DataLabels wird die Load-Methode des SmartObjektes aufgerufen und der ausgewählte Datensatz wird in das Formular geladen.

(Bild 3)

<link href="/Runtime/Script/KENDO/styles/kendo.common.min.css" rel="stylesheet">
<link href="/Runtime/Script/KENDO/styles/kendo.default.min.css" rel="stylesheet">
<script src="/Runtime/Script/KENDO/js/kendo.all.min.js"></script>
<div id="example">
            <div id="grid"></div>
            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata-v4",
                            transport: {
                                read: "/api/odata/v3/CW_ODATA_Kendo"
                            },
                            schema: {
                                model: {
                                    fields: {
                                        ID: { type: "number" },
                                        Name: { type: "string" },
                                        Alter: { type: "number" }
                                    }
                                }
                            },
                            pageSize: 15
                            
                        },
                        height: 550,
                        selectable: "row",
            sortable:true,
            pageable:true,
            change: onChange,
                        columns: [
                            {
                                field: "ID",
                                title: "ID"
                            }, 
              {
                                field: "Name",
                                title: "Name"
                            }, 
              {
                                field: "Alter",
                                title: "Alter"
                            }
                        ]
                    });
                });
      
      function onChange(arg) 
      {
                    var selectedRows = this.select();
          var dataItem = this.dataItem(selectedRows[0]);
          sd(dataItem.ID);
            }

      function sd(id) 
      {
        var SetData = "Controllers/Controller/Controls/Control[@Name='SelID']"; 
        var SetDataController = window.$sn(window.viewControllerDefinition,SetData); 
        var SetDataID = "#" + SetDataController.getAttribute("ID"); 
        var SetDataController_ID = SetDataController.getAttribute("ID"); 
        var newVal = id; 
        $(SetDataID).text(newVal); 
        var currentControl1 = window.$sn(window.viewControllerDefinition,"Controllers/Controller/Controls/Control[@ID='" + SetDataController_ID + "'][Properties/Property/Name/text()='GetValue']"); 
        var controlInfoObj1 = new window.PopulateObject(null,newVal,SetDataController_ID); 
        window.executeControlFunction(currentControl1,"SetValue",controlInfoObj1); 
      }
            </script>
</div>

Damit die ganze Lösung läuft, müssen natürlich die KENDO UI Script-Library verfügbar sein. Sofern diese vorliegt (eine Demo kann über die u.a. Links heruntergeladen werden) müssen diese auf den K2-Server verfügbar gemacht werden.

Für dieses Beispiel habe ich es mir auch hier einfach gemacht und die gesamten Demodaten in einem eigenen Ordner unter „..K2/K2 Smartforms Runtime/Script“ abgelegt.

Ich habe das Beispiel mit KENDO UI gewählt, weil ich das sowieso auch an anderen Stellen einsetze. Ich denke aber, dass sich mit Hilfe der OData-API auch jedes andere JQuery-Grid mit Remote-Data-Funktionalitäten anbinden lässt – aber vielleicht kann ich ja mit diesem Artikel zur ein oder anderen Idee anregen – würde mich jedenfalls freuen.

Ich habe außerdem meine Demo-Anwendung gepackt und hier zum Download bereit gestellt – vielleicht hilft diese ja dem ein oder anderen Interessierten weiter (bitte beachten, das die Anwendung ein Control aus dem Marktplatz verwendet – siehe nächster Abschnitt)

Jetzt herunterladen!