[imbaroMember]

?

[imbaroMember]

thanks, that helped me understand the problem.

in the server paging example the work is with
data adapter who has source.
and you the grid source holds the data adapter.

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

so far i did the same.

because i work with web socket i can’t sent the adapter, so i need to update the data
when i receive the message from the web socket, and then render the rows.

what i did is when changing the page, i call the web socket and return nothing,
and when the message is received, i update the data adapter source and call the ‘updatebounddata’
to render the rows. this solution doesn’t work.

how can i make it work when using web socket

this is what i do then the message is received:

MySource.localdata = data;

dataadapter.setSource(MySource);

$(“#grid3”).jqxGrid(‘updatebounddata’);

ofer.

[imbaroMember]

I saw the ‘virtualdata’ example many many, many times.

the problem that i have, is because I use WebSocket,
i want to update the grid when the web socket message is arrived.

in my example, i do exactly(!!!) the same thing in the sarver paging example.
but it doesn’t work, how can it be?

thanks, ofer.

[imbaroMember]

i saw this and the php paging server and they didn’t work.

here is my example that showes it…

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 () {

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”
];

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");
var startLoad;
var blnIsDelta;

ws.onopen = function () {
startLoad = $.now();
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: 'code', dataField: 'TH_OBJECT_ID', width: 200, align: 'right', cellsalign: 'right', type: 'number' },
{ text: 'dpid', dataField: 'TH_DP_ID', width: 200, align: 'right', cellsalign: 'right', type: 'number' },
{ text: 'subdp', dataField: 'TH_SUB_DP_ID', width: 200, align: 'right', cellsalign: 'right', type: 'number' },
{ text: 'updater', dataField: 'TH_LAST_UPDATE_ROLE', width: 200, align: 'right', cellsalign: 'right' },
{ text: 'subkind', dataField: 'OA_SUB_TYPE', align: 'right', cellsalign: 'right', minwidth: 200 },
];

var MySource =
{
datatype :'array',
async: false,
cache: false,
Root: "rows",
totalrecords: 0,
localdata: {}
};

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

var blnIsFirstTime = true;
var blnIsSentRequest = false;
var intStart = 0;
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\":" + (intStart + 1) + ",\"page\":" + ((intStart) / pageSize) + ",\"pageSize\":" + pageSize + "}");
blnIsSentRequest = true;
blnIsFirstTime = true;
}
else {
blnIsSentRequest = false
}
}
return dataadapter.records;
}

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

ws.onmessage = function (e) {

var data = generatedata(intStart, intEnd);

MySource.totalrecords = evalData.TotalAmount;
MySource.localdata = data;

dataadapter.setSource(MySource);

$("#grid3").jqxGrid('updatebounddata');
}

});

[imbaroMember]

I think you didnt understand me.
the page size is 100.

in every page i want to return only 100 rows.

the situation now is that for the second page i need to return 200 rows, so it shows the 101-200 rows.

in the third page i need to return 300 rows, so it shows the 201-300 rows.

i don’t want to work like this, i want to return only 100 rows for each page.

what do i need to do?

thanks, ofer.

[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.

[imbaroMember]

thanks!
do you maybe have an example with Web socket?

[imbaroMember]

I didn’t mean pressing on the filter icon, i meant pressing on the text of the header.
(also pressing on text on other columns makes this problem…)

thanks, ofer.

[imbaroMember]

There will be a fix?

ofer.

[Author]

Posts