Server side Pagination resetting the page number and showing blank grid

[arajputMember]

hi,
I have the following setup where I am using the Grid component to load data from the server

Here I am constructing the grid component and adding handlers for pagechanged and pagesizechanged events
In the handler function I trigger an event which is handled by a Controller to fetch data from the server
When the data is fetched the controller’s success handler triggers a ‘complete’ event which is then handled here by the function ‘onFetchDataResult’ (at the bottom)

All the flow works fine to get the data from the server and the corresponding function ‘onFetchDataResult’ gets invoked. But when I try to load the new data following things happen
1. Grid goes blank
2. The Go to page field reverts back to 1 (it shows ‘2’ temporarily while the server request is in progress, but as soon as by callback function ‘onFetchDataResult’ is called it reverts back and no data is displayed.

Any help would be greatly appreciated!

Thanks

require([ "libs/jqwidgets/jqx-all"
                ], function() {
                    
                    var source =
                    {
                        localdata: appModel.getData().toJSON(),
                        datatype: "json",
                        cache: false,
			beforeprocessing: function(data)
			{		
				source.totalrecords = appModel.getData().total;
			},
			
    			
                	
                        datafields:
                            [
                                { name: 'id', type: 'string' },
                                { name: 'name', type: 'string' },
                                { name: 'account', type: 'string' }
                                
                            ]
                    };
                    var dataAdapter = new $.jqx.dataAdapter(source);
                    var grid = $('#groupsTblContainer').jqxGrid({
                        width: 1400,
                        height: 600,
                        source: dataAdapter,
                        pageable: true,
                        showfilterrow: true,
                        filterable: true,
                        sortable: true,
                        altrows: true,
                        enabletooltips: true,
                        editable: true,
                        selectionmode: 'multiplerows ',
                        columnsresize: true,
                        columnsreorder: true,
                        scrollmode: 'logical',
                        virtualmode: true,
                        rendergridrows: function(){
				return appModel.getData().toJSON();
			},
                        columns: [
                            {
                                dataField: "id",
                                width: 80,
                                text: "ID",
                                editable: false
                            } , {
                                dataField: "name",
                                width: 50,
                                text: "Name"
                            } , {
                                dataField: "account",
                                width: 50,
                                text: "Account"
                            }
                        ]
                    });
		    
		    
		    
                    $('#groupsTblContainer').jqxGrid({ pagesizeoptions: ['1000']});
                 
                    
                    $("#groupsTblContainer").bind("pagechanged", function (event) {
                    	
		        var args = event.args;
		        var pagenumber = args.pagenum+1;
		        var pagesize = args.pagesize;
		        var datainfo = $("#groupsTblContainer").jqxGrid('getdatainformation');
                 	var paginginfo = datainfo.paginginformation;
		        var mem = appModel.getMemberCollection().selectedMember;
                        var cd = appModel.getDatesCollection().selectedDate;
		        eventBus.trigger('fetch-trades',{userName:appModel.getSessionModel().get('userName'),password:appModel.getSessionModel().get('password'),mem:mem,cd:cd,page:pagenumber,pageSize:pagesize,skip:null,take:null,filter:null});
		    });
		    $("#groupsTblContainer").bind("pagesizechanged", function (event) {
		        var args = event.args;
		        var pagenumber = args.pagenum;
		        var pagesize = args.pagesize;
		        var mem = appModel.getMemberCollection().selectedMember;
			var cd = appModel.getDatesCollection().selectedDate;
		        eventBus.trigger('fetch-trades',{userName:appModel.getSessionModel().get('userName'),password:appModel.getSessionModel().get('password'),mem:mem,cd:cd,page:pagenumber,pageSize:pagesize,skip:null,take:null,filter:null});
                    });
                });
	onFetchDataResult : function(){
                if(typeof $("#groupsTblContainer").jqxGrid === 'function')
                {
                	
			var source = $("#groupsTblContainer").jqxGrid('source');
			source._source.localdata = appModel.getData().toJSON();
			
			$("#groupsTblContainer").jqxGrid({ source: source });
			
                }
            }

[Peter StoevKeymaster]

Hi,

I suggest you to take a look at our Online sample about Server Paging: http://www.jqwidgets.com/jquery-widgets-demo/demos/php/serverpaging.htm?web. In addition, if you dynamically set the Grid’s source property, you should keep in mind that by doing that the Grid will be re-rendered.

Best Wishes,
Peter Stoev

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

[arajputMember]

Hi Peter,
After trying several different things I was able to make it work by using

$(‘#groupsTblContainer’).jqxGrid(‘updatebounddata’);

in my ‘onFetchDataResult ‘ callback function

I would have liked a better response than just pointing to the examples, which I have been scouring through quite a bit.

In general though I see this quite often in other forum topics too 🙁 Maybe you guys are overloaded, I do want to say that I like the components, as they are nicely done and have good performance.

I am just looking for a better support so I can use them better, and recommend them to my company for wider use 🙂

Thanks!
Ashish

[Peter StoevKeymaster]

Hi Ashish,

I am sorry that you think so. We are definitely not overloaded and by the way I pointed you out that setting the “source” property will re-render the Grid which is the reason of your issue :). However, the purpose of the examples and documentation is to help you and from your post it was not clear whether you took a look at the working sample or not. So, if I or other members think that a sample or help topic may help, then we will continue pointing you to it. In general, the Forum is for the community and you should expect responses only from your peers and not from the jQWidgets Team because that this it not a Support Forum.

Best Regards,
Peter Stoev

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

[Brett leeParticipant]

Hi,

I am trying to do a server side pagination for a dynamically rendered grid where i am not succesfull.

I have a form on the submit of the form i am constructing a grid and the columns of the grid are rendered from a different service, the data is rendered from a different service.
I am able to bind the columns and data successfully but not able to do the pagination for it.

my code goes like dis:
demoApp.controller(‘studentController’,[‘$rootScope’,’$scope’,’$http’,’treeService’,’$compile’,
‘getColumnsService’,’getGridDataService’,’$timeout’,
function($rootScope,$scope,$http,treeService,$compile,getColumnsService,getGridDataService,$timeout){

var dataGridOptions={
width: ‘100%’,
// height: ‘300px’,
rowsheight: 20,
source:dataAdapter,
sortable: true,
filterable: true,
editable: true,
selectionMode:’none’,
pageable: true,
pagermode: ‘simple’,
columnsresize: true,
columnsreorder: true,
theme: ‘energyblue’,
showstatusbar: true,
/*renderstatusbar:renderstatusbar,*/
statusbarheight:20,
showaggregates: true,
autoshowfiltericon:false,
autoheight:false,
groupable:true,
autoshowcolumnsmenubutton:true ,
enabletooltips:true,
pagesizeoptions : [‘5′,’10’,’15’],
pagesize : 5

};

$scope.submitHandler = function(){
var columnsDef=[];
var gridData =[];
$(“#gP-gridDisplayed”).jqxGrid(dataGridOptions);
getColumnsService.getGridColumnsQuery(reportId).then(function(result){ //angular service call
columnsDef= result.data;
$(“#gP-gridDisplayed”).jqxGrid({columns:columnsDef});
},function(result){
alert(‘no columns has been recieved’);
});
//columns binded
getGridDataService.getGridDataQuery().then(function(result){
gridData = result.data;
console.log(‘grid data is:’+JSON.stringify(gridData));
var source ={
datatype:”json”,
localdata: gridData,
root:’Rows’,
beforeprocessing:function(localdata){
console.log(‘in before processing’);
source.totalrecords = localdata[0].TotalRows;
}
};

var dataAdapter = new $.jqx.dataAdapter(source);
dataGridOptions.virtualmode= true,
console.log(‘printing vitual mode—-***’+dataGridOptions.virtualmode);
rendergridrows = function(){
console.log(‘in render grid rows’);
return dataAdapter.records;
}

$(“#gP-gridDisplayed”).jqxGrid({source:dataAdapter});
//$(“#gP-gridDisplayed”).jqxGrid({source:result.data});

},function(result){
alert(‘no data has been returned for grid’);
});

}

}]);

the only example available in the net is dey prepare data put in data adapter, initialize the grid give it to data adapter.
in my case the grid is initialized and on a event am binding columns and data to it.

Help me with a correct example or errors in my code.

anticipating a reply a early as possible

[Peter StoevKeymaster]

Hi Brett Lee,

Look at the examples available online. They show how to implement server pagination.

Best Regards,
Peter Stoev

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

[Brett leeParticipant]

Hi peter,
Pagination is working now but i can see only empty rows.
when i checked through debugger it is entering into rendergridrows() function but i find dataAdapter.records as array[0].

[Author]

Posts