We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

ajax post with parameter result not binding to grid [Solved]

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 }

]

});


2 Replies 1 reply marked as answer

EF Edward Fenech January 26, 2023 12:22 AM UTC

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.


Marked as answer

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team February 1, 2023 11:28 AM UTC

Hi Edward,


Greetings from Syncfusion Support.


Before proceeding with this we need some more additional details to guide you in right way.


  1. Do you want to render Grid inside Ajax Success event or only need to access the dataSource for Grid?
  2. Screenshot of DataSource result that you get from Ajax success event.
  3. Stacktrace details(if any) occurs on console window. If yes please share.


Regards,
Farveen sulthana T


Loader.
Up arrow icon