problem in rendering with server paging

[imbaroMember]

hi, i started building a grid DEMO working with data coming back from a web socket.
i build it like your example of server paging with PHP.

the doesn’t working.. like the PHP example…

IT DOESN’T MATTER WHAT THE WS RETURNES (because it calls the generate function)

lala

#grid3
{
font-size: 10pt;
height: 300px;
width:100%;
}

html, body
{
width: 98%;
height: 98%;
margin: 0 1%;
padding: 10px 0 0 0;
}

$(document).ready(function () {

// Generate //
var TH_OBJECT_ID =
[
“Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”
];

var TH_DP_ID =
[
123,765,234,86,798,3456,3456,345,6,3,45,8,867,09,8,27,643,25,2,54,67,58,47
];

var TH_SUB_DP_ID =
[
63,2,5,6,8,4,1,53,5,34,75,86,,367,346,686,278723,5,74,56235,85,54567,2,358568,243
];

var TH_LAST_UPDATE_ROLE =
[
“Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”
];

var OA_SUB_TYPE =
[
“Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”, “Caffe Latte”, “White Chocolate Mocha”, “Cramel Latte”, “Caffe Americano”, “Cappuccino”, “Espresso Truffle”, “Espresso con Panna”, “Peppermint Mocha Twist”
];

// generate sample data.
var generatedata = function (startindex, endindex) {
var data = {};
for (var i = startindex; i < = endindex; i++) {
var row = {};

row["TH_OBJECT_ID"] = i;
row["TH_DP_ID"] = TH_DP_ID[Math.floor(Math.random() * TH_DP_ID.length)];
row["TH_SUB_DP_ID"] = TH_SUB_DP_ID[Math.floor(Math.random() * TH_SUB_DP_ID.length)];
row["TH_LAST_UPDATE_ROLE"] = TH_LAST_UPDATE_ROLE[Math.floor(Math.random() * TH_LAST_UPDATE_ROLE.length)];
row["OA_SUB_TYPE"] = OA_SUB_TYPE[Math.floor(Math.random() * OA_SUB_TYPE.length)];;

data[i] = row;
}
return data;
}

var ws = new WebSocket("ws://tirawin2012/remotedeltapoc/RemoteService.svc");

ws.onopen = function () {
ws.send("{\"take\":100,\"skip\":0,\"page\":1,\"pageSize\":100}");
}

ws.onclose = function () {
wsStarted = false;
}

ws.onerror = function (e) {
alert(e.data);
}

var theme = getDemoTheme();

var columns = [
{ text: 'TH_OBJECT_ID', dataField: 'TH_OBJECT_ID', width: 200, align: 'right', cellsalign: 'right', type: 'number' },
{ text: 'TH_DP_ID', dataField: 'TH_DP_ID', width: 200, align: 'right', cellsalign: 'right', type: 'number' },
{ text: 'TH_SUB_DP_ID', dataField: 'TH_SUB_DP_ID', width: 200, align: 'right', cellsalign: 'right', type: 'number' },
{ text: 'TH_LAST_UPDATE_ROLE', dataField: 'TH_LAST_UPDATE_ROLE', width: 200, align: 'right', cellsalign: 'right' },
{ text: 'OA_SUB_TYPE', dataField: 'OA_SUB_TYPE', align: 'right', cellsalign: 'right', minwidth: 200 },
];

var MySource =
{
datatype :'array',
datafields: [
{ dataField: 'TH_OBJECT_ID'},
{ dataField: 'TH_DP_ID'},
{ dataField: 'TH_SUB_DP_ID'},
{ dataField: 'TH_LAST_UPDATE_ROLE'},
{ dataField: 'OA_SUB_TYPE'},
],

Root : "rows",
};

var dataadapter = new $.jqx.dataAdapter(MySource);

var blnIsFirstTime = true;
var blnIsSentRequest = false;
var intStart = 1;
var intEnd = 100;
var rendergridrows = function (params) {

intStart = params.startindex;
intEnd = params.endindex;

var pageSize = params.endindex – params.startindex;

if (blnIsFirstTime) {
blnIsFirstTime = false;
}
else {
if (!blnIsSentRequest) {

ws.send("{\"take\":" + pageSize + ",\"skip\":" + (params.startindex) + ",\"page\":" + ((params.startindex) / pageSize) + ",\"pageSize\":" + pageSize + "}");
blnIsSentRequest = true;
blnIsFirstTime = true;
}
else {
blnIsSentRequest = false
}
}

return dataadapter.records;
}

ws.onmessage = function (e) {
var recMessage = e.data;
var evalData = JSON.parse(recMessage);

var sourceADp =
{
totalrecords: 913,
localdata: generatedata(intStart, intEnd),
datatype: "array",
};

dataadapter.setSource(sourceADp);

$("#grid3").jqxGrid(
{
source: dataadapter,
theme: theme,
virtualmode: true,
pageable: true,
rendergridrows: rendergridrows,
pagesizeoptions: [100],
pagesize: 100,
columns: columns,
rtl: true,
});
}

});

The problem is that the rendergrid rows isnt been called.
what an i doint wrong?

thanks, ofer.

[Peter StoevKeymaster]

Hi,

The following example implements virtual paging: virtualdata.htm. It shows how the rendergridrows function is supposed to be implemented. rendergridrows will be called whenever a grid page needs to be rendered.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[imbaroMember]

thanks, this helped me.
now i have another problem.
i an working with no cache

my rows are in index 0-99
and the page size is 100.
in the first page the first 100 rows in the returned array are showen
in the second page the row in position 100-199 are shown and so on.
without considering the index.

how can i set that the page will wwork ok?

thanks, ofer.

[Author]

Posts