server paging with WebSocket

[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);

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

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);
}

});

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

thanks, ofer.

[DimitarParticipant]

Hello ofer,

The function rendergridrows should be defined before the grid initialization.

On a side note, please check your use of commas in objects – there should be no comma after the last object property.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts