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" } } });