Hi,
I'm evaluating the Grid application and I use an ajax post with a parameter and although I'm getting the correct response I'm having difficulty understanding how to bind it to the Grid. Basically the grid says "No records to display". The index .php list in the url is where I process the query request to the database and echo back as as json_encode($data); where $data is an array. When I do a console.log of the window.jsonData I'm getting a properly rendered json array. Here's my code posting to the php query processing page. If any one is able to point me in the right direction. I've scoured the syncfusion forums for some answers but to no avail.
$.ajax({
type: "POST",
url: "../57572dd08f29038a44d12aba235bb2b4/index.php",
data: {"crud": 'get'},
success: function (response) {
window.jsonData = ej.parseJSON(response);
}
});
var dataManager = ej.DataManager(window.jsonData);
$("#Grid").ejGrid({
dataSource: dataManager ,
allowPaging: true,
pageSettings: { pageSize: 9 },
columns: [
{ field: "id", headerText: "Id", isPrimaryKey: true, width: 20 },
{ field: "sol_title", headerText: "Title", width: 200 },
{ field: "sol_type", headerText: "Type", width: 40 },
{ field: "sol_short_desc", headerText: "Description", width: 125},
{ field: "created_date", headerText: "Created Date", width: 100 },
{ field: "create_user", headerText: 'Created By', width: 100 },
{ field: "updated_date", headerText: "Updated Date", width: 100 },
{ field: "update_user", headerText: 'Updated By', width: 100 }
]
});
Okay, I appear to have found a way to make this work for an ajax post method with parameters. I decided to pass the variable from the ajax post method by wrapping in in a function and then having the dataManager wrapped inside another function with a param that is called from the first one. Here's my solution:
//Call the jsonGetData function.
jsonGetData();
//Function that invokes the ajax post method.
function jsonGetData(){
$.ajax({
type: "POST",
url: "../57572dd08f29038a44d12aba235bb2b4/index.php",
data: {"crud": 'get'}, // Param for server side query processing
success: function (response) {
var jsonData = JSON.parse(response); //Parse the JSON data
dataManagerJsonGetData(jsonData); //Call to pass the jsonData var to
dataManagerJsonGetData() function
}
});
}
// function to process the dataManager and Grid
function dataManagerJsonGetData(jsonData){
var dataManagerJsonData = jsonData;
//Bind the dataManager
var dataManager = ej.DataManager(dataManagerJsonData);
$("#Grid").ejGrid({
dataSource: dataManager ,
allowPaging: true,
allowResizeToFit: true,
allowScrolling: true,
allowTextWrap: true,
allowFiltering: true,
enableHeaderHover: true,
filterSettings: { filterType: "menu" },
pageSettings: { pageSize: 9 },
columns: [
{ field: "id", headerText: "Id", isPrimaryKey: true, width: 25 },
{ field: "sol_title", headerText: "Title", width: 200 },
{ field: "sol_type", headerText: "Type", width: 70 },
{ field: "sol_short_desc", headerText: "Description", width: 125},
{ field: "created_date", headerText: "Created Date", width: 50 },
{ field: "create_user", headerText: 'Created By', width: 50 },
{ field: "updated_date", headerText: "Updated Date", width: 50 },
{ field: "update_user", headerText: 'Updated By', width: 50 }
]
});
}
//End of routine.
There may be other solutions to my requirement, but this one works for my particular need. Happy for anyone to suggest another way that's more elegant.
Hi Edward,
Greetings from Syncfusion Support.
Before proceeding with this we need some more additional details to guide you in right way.
Regards,
Farveen sulthana T