Copying sources and texts (also in parts) for publishing without our permission is NOT ALLOWED. We are fed up with finding our work on other sites (like stackoverflow).
Das Kopieren von Quellcode und Texten (auch in Auszügen) ist nicht erlaubt. Wir haben es gründlich satt, unsere Arbeit auf anderen Webseiten zu finden.

Copying for non-public usage is allowed.           Das private Kopieren und Benutzen ist natürlich erlaubt und erwünscht.
25. Sep 2012
Teaser

KendoUI: Daten per AJAX Request aus einer JSON-Datenquelle (aus einem PHP Script) einlesen

Um in KendoUI Daten (z.Bsp. für einen “Grid” = Tabelle/Datengitter) aus einer JSON Datenquelle einzulesen, hilft Ihnen diese Anleitung. Als Datenquelle dient in diesem Beispiel ein PHP Script.

Das Grid wird im HTML Code deklariert:

<div id="grid"></div>

Im script-Bereich später dann durch die KendoUI Funktionen aktiviert:

$(document).ready(function() {
  var grid = $("#grid").kendoGrid({
  dataSource: {
    transport: {
      read: {
        url: "test.php",
        dataType: "json"
      }
    },
    schema: {
      data: "data"
    }
  },
  columns: [
    { field: "ID", width: 60 },
    { field: "title", title: "Titel" },
    { field: "author", title: "Autor" },
    { field: "isbn", title: "ISBN", width: 60 }
    // [...]
  ],
  height: 600,
  sortable: true,
  // [...]
  });
});

Das folgende PHP Beispielscript liefert die Musterdaten:

<?php
 $dat["ID"] = 1; 
 $dat["title"] = "Mustertitel";
 $dat["author"] = "Max Muster";
 $dat["isbn"] = "12345...";
 $buch[] = $dat;

 $dat["ID"] = 2;
 $dat["title"] = "Beispielbuch";
 $dat["author"] = "Berta Buch";
 $dat["isbn"] = "56789...";
 $buch[] = $dat; 

 echo '{"total":'.count($dat).',"data":'.json_encode($dat).'}'; 
?>

Das Beispiel kann auf auf die DropDownList von KendoUI übertragen werden. Dann das Element wie folgt definiert werden:

        $("#dropdown").kendoDropDownList({
                index: 0,
                dataTextField: "title",
                dataValueField: "ID",
                dataSource: {
                        transport: {
                                read: {
                                        url: "test.php",
                                        dataType: "json"
                                }
                        },
                        schema: {
                                data: "data"
                        }
                }
      });

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

zwei × eins =