Filling the grid while scrolling from a webservice

[waldemarMember]

Hi Guys,

I’ve got the following problem: I need to fill the grid with data from a webservice while scrolling through the grid.I’ve created the following code:


var url = virtualDirectoryRoot + 'GetPartialData';
var parentResponseRaw;
var reportGrid = $('#jqxgrid');
var columns = [
{ text: 'Id', datafield: 'id', width: 100 },
{ text: 'Name', datafield: 'name', width: 100 },
{ text: 'Created At', datafield: 'CreatedAt', width: 100 },
{ text: 'Official Scenario', datafield: 'OfficialScenario', width: 180 },
];
if(reportJson === null || reportJson === undefined) {
reportJson = this.toJSON(); }

var source =
{
datatype: 'json',
type: 'POST',
totalrecords: 1000000,
localdata: {}
};
var dataAdapter = new $.jqx.dataAdapter(source);
reportGrid.jqxGrid({
source: dataAdapter,
columns: columns,
width: 780,
virtualmode: true,
rendergridrows: function(params){
reportGrid.jqxGrid.virtualmode = false;
getData(params.startindex, params.endindex);
}
});
function generateColumns(dataRow){
if(dataRow){
for(var key in dataRow){
columns.push({text: key, datafield: key});
}
}
}
function getData(startIndex, endIndex){
var reportJson = {};
reportJson.startIndex = startIndex;
reportJson.endIndex = endIndex;
$.ajax({
type: 'POST',
dataType: 'json',
url: url,
async: false,
data: JSON.stringify(reportJson),
cache: false,
contentType: 'application/json; charset=utf-8',
error: function(jqXHR, textStatus, errorThrown) {
alert('errorThrown: '+errorThrown);
},
success: function(data, status, xhr) {
source.localdata = data;
//reportGrid.jqxGrid('updatebounddata');
reportGrid.jqxGrid.virtualmode = true;
}
});
};

Do you have an idea what’s wrong with my code?

Thanks
Waldemar

[Peter StoevKeymaster]

Hi Waldemar,

The “rendergridrows” callback function expects an Array to be returned as demonstrated in this sample: virtualscrolling.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[waldemarMember]

Hi Peter,

the main problem is that the ajax call is asynchron, so even if I put the ajax call into the rendergridrows, the values aren’t displayed.

rendergridrows: function(params){

//getData(params.startindex, params.endindex);
var reportJson = {};
reportJson.startIndex = startIndex;
reportJson.endIndex = endIndex;
$.ajax({
type: ‘POST’,
dataType: ‘json’,
url: url,
async: false,
data: JSON.stringify(reportJson),
cache: false,
contentType: ‘application/json; charset=utf-8’,
error: function(jqXHR, textStatus, errorThrown) {
alert(‘errorThrown: ‘+errorThrown);
},
success: function(data, status, xhr) {
return data; //data is an array
}
}

Isn’t working too. 🙁

[Peter StoevKeymaster]

Hi waldemar,

“return data” in the “success” function will return a value to the “success” function. That will not return value of the “rendergridrows function”.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts