Please help me retrieve and add new data to jqxgrid.

[ZafarMember]

Hi Peter,

I trying to work on following logic..

if( UserInputChanges = true ) {

xmlhttp.open(“GET”, CallAjax.action?input1=val1&input2=val2&input3=val3, true);

if( Readystate=4 and Response-status = 200 ) {

$.fn.setAjaxOutput();
}

}
$.fn.setAjaxOutput = function() {

I have large Resultset returned from server. Its taking too much time and to return. So I am trying to make following changes. Could you please let me know, at the earliest. Thank you!!

// Here I want to fetch 500 records at once.
1st ajax request will remove all data in the grid, and fetch and add 500 records, if records are returned from server. If no records returned, just displays ‘no data to display’ – I see this message, when there is no data’. The user will keep browsing 500 records added just now.
Then make another request (meaning, by the grid, or by the code), with same user inputs, to fetch next 500 records, until all records are fetched from data base.

If user input changes, then execution starts again from, ‘if( UserInputChanges = true ) {‘ to fetch 1st 500 records with new input, remove existing records from grid, and show 1st 500 records, just fetched. If no records fetched, just display ‘no data to display’.
Then make another request, with same user input, to fetch next 500 records, until all records are fetched from data base.
How can I modify this code please? Could you please, post the complete code, so it helps me very much!!
var data = new Array();
var jsonArray = JSON.parse(xmlhttp.responseText);

var dataLength = jsonArray.contactList.length;

for (var i = 0; i < dataLength; i++) {
var row = {};

row[“name”] = jsonArray.contactList[i].name;
row[“StudentId”] = jsonArray.contactList[i].StudentId;
row[“relationsName”] = jsonArray.contactList[i].relationsName;
row[“homeAddress”] = jsonArray.contactList[i].homeAddress;
row[“houseNumber”] = jsonArray.contactList[i].houseNumber;
data[i] = row;
}
var source =
{
localdata: data,
datatype: “array”,
datafields:
[
{ name: ‘StudentId’, type: ‘string’, width: 120 },
{ name: ‘name’, type: ‘string’, width: 200 },
{ name: ‘relationsName’, type: ‘string’, width: 200 },
{ name: ‘homeAddress’, type: ‘string’, width: 180 },
{ name: ‘houseNumber’, type: ‘string’, width: 50 },
]
};
var dataAdapter = new $.jqx.dataAdapter(source);

$(“#jqxgrid”).jqxGrid(
{
width: 1200,
height: 360,
source: dataAdapter,
columnsresize: true,
pageable: true,

showfilterrow: true,
filterable: true,

columns: [
{ text: ‘Name’, dataField: ‘name’, width: 200 },
{ text: ‘Student Id’, dataField: ‘StudentId’, width: 120 },
{ text: ‘Relations Name’, dataField: ‘relationsName’, width: 200 },
{ text: ‘Home Address’, dataField: ‘homeAddress’, width: 480 },
{ text: ‘House Number’, dataField: ‘houseNumber’, width: 150 },
]
});

}

Thank you so much!!

Zafar

[Peter StoevKeymaster]

Hi Zafar,

I suggest you to consider Server Paging. That will enable to request only the data that is necessary to be displayed. Example: serverpaging.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts