I'm pretty new to the whole jquery Kendo UI scene and I was playing around with the kendo grid for a project I was working on.
I got pretty far with loading basic JSON data into the grid, with just grabbing a sample set of data from the database.
However, now I'm trying to do an AJAX call (via jquery library), pass in some dates to a database, and get some JSON back and put it in the grid.
For some reason, the transport option worked a lot better than the data option.
I was using the data option because I was having the success function on the ajax call pass in the data to the grid.
However, when I do this, I get:
Uncaught ReferenceError: uid is not defined.
Is my approach wrong?
Am I missing some simple option?
Or does the transport feature have an option like the jquery ajax function?
See code below, which is still kind of messy...
I'm using the March 2012 version of Kendo Web Open Source.
The script:
Then the body of the html:
The php script returns data like so:
The JSON is one big giant array, with a bunch of JSON objects inside. (I think I'm getting my terminology correct).
...Ugh, the code did a lot of word wrapping, Sorry... Not use to the code editor here I guess. I'll attach the file and see if that is better.
I got pretty far with loading basic JSON data into the grid, with just grabbing a sample set of data from the database.
However, now I'm trying to do an AJAX call (via jquery library), pass in some dates to a database, and get some JSON back and put it in the grid.
For some reason, the transport option worked a lot better than the data option.
I was using the data option because I was having the success function on the ajax call pass in the data to the grid.
However, when I do this, I get:
Uncaught ReferenceError: uid is not defined.
Is my approach wrong?
Am I missing some simple option?
Or does the transport feature have an option like the jquery ajax function?
See code below, which is still kind of messy...
I'm using the March 2012 version of Kendo Web Open Source.
The script:
$(document).ready(function() { $("#GetBOData").click(function(){ $.ajax({ type : 'POST', url : "/~basadmin/corp/reports/get_store_bkord_data.php", data : { BeginDate : $("#BeginDate").val(), EndDate : $("#EndDate").val() }, success : function(data, textStatus, jqXHR) { //alert(data); $("#grid").kendoGrid({ dataSource: { dataType: "json", data: data, //transport: { // read: { // url:"/~basadmin/corp/reports/get_store_bkord_data.php", // dataType: "json" // } //}, //schema: { // model: { // fields: { // Buyer: { type: "string" }, // Line: { type: "string" }, // Category: { type: "number" }, // PartNum: { type: "string" }, // Description: { type: "string" }, // StoreLoc: { type: "number" }, // WhseLoc: { type: "WhseLoc" } // } // }, //total: "total" //}, serverPaging: false, serverSorting: false, pageSize: 1000 }, columns: [ {title: "Buyer", field: "Buyer", width: 75}, {title: "Line", field: "Line", width: 75}, {title: "Category", field: "Category", width: 100}, {title: "Part Number", field: "PartNum", width: 110}, {title: "Description", field: "Description", width: 100}, {title: "Store Loc", field: "StoreLoc", width: 100}, {title: "Whse Loc", field: "WhseLoc", width: 100} ], scrollable: true, height: 800, filterable: true, sortable: { mode: "multiple", allowUnsort: true }, groupable: true, pageable: true, navigatable: true, }); } }); }); });Then the body of the html:
<body> Begin Date: <input type="text" name="BeginDate" id="BeginDate"/>End Date: <input type="text" name="EndDate" id="EndDate" /><input type="submit" id="GetBOData" value="Submit" /><div id="grid" style="width:1280px"> </div> </body>The php script returns data like so:
[{"Buyer":"Joe Smo","Line":"GBR","Category":"1","PartNum":"833-22101","Description":"Fuel Injector","StoreLoc":"34","WhseLoc":"90"}]The JSON is one big giant array, with a bunch of JSON objects inside. (I think I'm getting my terminology correct).
...Ugh, the code did a lot of word wrapping, Sorry... Not use to the code editor here I guess. I'll attach the file and see if that is better.