refreshing jqxGrid with remote binding using custom search

[khurramMember]

Hi,

I am trying to refresh grid with data returned from server on filtering being made. The problem is as grid has following code

var source = {
datafields: [
{ name: ‘UserID’ },
{ name: ‘LoginID’ },
{ name: ‘RoleCodeName’ },
{ name: ‘EmpCodeName’ },
{ name: ‘IsLockedOut’ },
{ name: ‘Description’ },
{ name: ‘RowVersion’ }
],
data: {
data: searchFilter
},
datatype: ‘json’,
url: ‘GetGridData’,
root: ‘Data’,
beforeprocessing: function (data) {
source.totalrecords = data.Total;
},
sort: function () {
// update the grid and send a request to the server.
$(“#jqxgrid_User”).jqxGrid(‘updatebounddata’);
}
};

//Initializing DataAdapter for Grid
var dataadapter = new $.jqx.dataAdapter(source);

// initialize jqxGrid
$(“#jqxgrid_User”).jqxGrid(
{
width: 1260,
source: dataadapter,
editable: false,
altrows: true,
enableanimations: true,
autoheight: true,
pageable: true,
virtualmode: true,
rendergridrows: function () {
return dataadapter.records;
},
enabletooltips: true,
sortable: true,
pagesize: 5,
pagesizeoptions: [‘5′, ’10’, ’15’],
theme: theme,
selectionmode: ‘singlerow’,
selectedrowindex: 0,
rowsheight: 15,
columns: [
{ text: ‘Login ID’, columntype: ‘textbox’, datafield: ‘LoginID’, width: 190 },
{ text: ‘Role’, datafield: ‘RoleCodeName’, width: 220 },
{ text: ‘Employee’, datafield: ‘EmpCodeName’, width: 220 },
{ text: ‘Is LockedOut?’, datafield: ‘IsLockedOut’, width: 208 },
{ text: ‘Description’, datafield: ‘Description’, width: 320 },
{ text: ”, datafield: ‘UserID’, width: 100, cellsrenderer: linkrenderer, sortable: false },
{ text: ”, datafield: ‘RowVersion’, hidden: true }

]
});

And on search button click i am doing:

var source = $(“#jqxgrid_User”).jqxGrid(‘source’);
if (source._source != undefined) {
source._source.data = { data: searchModelHf.val() };
}
else {
source.data = { data: searchModelHf.val() };
}

$(“#jqxgrid_User”).jqxGrid({ source: (source._source != undefined ? source._source : source)
});

Now the issue is if search results are 2 then total count in pager is updated as it is being updated through code in beforeProcessing function i.e beforeprocessing: function (data) {
source.totalrecords = data.Total;
}

but rendergridrow funtion gets rows from dataadapter.records so they are the same.

If i try to update dataadapter.records in beforeprocessing function too like beforeprocessing: function (data) {
source.totalrecords = data.Total;

datadapter.records = data.Data;
}

then grid rows are updated but then paging goes wrong, i.e on paging 2nd page records are not displayed in the grid.

 

 

 

[Peter StoevKeymaster]

Hi khurram,

There’s a sample included in the download package about Filtering in combination with Paging and Sorting. The sample is in the phpdemos folder and I suggest you to take a look at it. The sample is in a folder named: server_side_grid_filtering_and_sorting_and_paging. The sample is part of jQWidgets 2.4.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[khurramMember]

Hi Peter,

Thanks for a quick reply. Basically i am working in asp.net mvc3 and i had tried to do something like
rendergridrows: function (obj) {
return obj.records;
}
but here obj only consists of recordstartindex and recordendindex, i hadn’t included filter function in my source um let me check if it works for me, i will let you know.

Best Regards,
Khurram

[khurramMember]

Hi Peter,

I looked into the example that u told me to but it’s no use, can’t make it work. The thing is i don’t want to use grid’s filtering mechanism i do get filtered data on search button click from the server and on search success i want to assign that data to the grid like

function onSearchFormSuccess(data) {

//rebinding the grid
var source = $(“#jqxgrid_User”).jqxGrid(‘source’);

source.totalrecords = data.total;
source.records = data.data;
var dataAdapter = new $.jqx.dataAdapter(source);

$(“#jqxgrid_User”).jqxGrid({source: dataAdapter});

///////////////////////////////

The code above updates the grid but without calling it’s server method, even if i call updatebounddata at the end. Now the problem is it starts working client side, on paging or sorting it never calls it’s server method, so remote thing is broken.

Any help would be appreciated, thanks.

Best Regards,
Khurram

[Peter StoevKeymaster]

The sample I told you to see does not use client-side filtering. It uses Server filtering instead. In your scenario, I think you will have to build a new source object and new dataAdapter instance based on the new source object and then set the dataGrid’s source property to point to the new dataAdapter instance. The way you did it in the provided code will not work, because you use an old instance of the Grid’s source property which is dataAdapter and you actually try to build a dataAdapter from a dataAdapter.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[khurramMember]

Hi Peter,

If i want to send extra parameter to grid’s server method then it is being set in source, is there any way to update the source without reassigning the source to grid. Currently i am doing like this:

function onSearchFormSuccess(data) {

var searchModelHf = $(‘#searchModel’);
searchModelHf.val(data.searchModel); // searchModel is serialized filter string of form fields

var source = $(“#jqxgrid_User”).jqxGrid(‘source’);
if (source._source != undefined) {
source._source.data = { data: searchModelHf.val() };
}
var dataAdapter = new $.jqx.dataAdapter(source._source);
$(“#jqxgrid_User”).jqxGrid({source: dataAdapter});

}

As source is dataadapter actually, i can get the source from it like source._source and can set its data property
but after doing that if i reassign this source to grid or even a new dataadapter pointing to this source._source even then it still renders the old dataadapter’s records.

Here is my grid’s method:

GetGridData(int pagenum, int pagesize, string sortDataField, string sortOrder, String data = null)

Instead of assigning a new dataAdapter to grid can i update grid’s source only having updated data to be sent to server and then i would be calling $(“#jqxgrid_User”).jqxGrid(‘updatebounddata’);

Best Regards,
khurram

[Peter StoevKeymaster]

Hi khurram,

Here’s how to send an extra parameter: jquery-grid-extra-http-variables.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts