One datasource feeding several jqxGrids

[mortenkjeldbergMember]

Hi

I have a page containing several jqxGrids. All of them have the same datasource. I then use filters to show the correct records in the correct grid. It works but my problem is that the url from the source is called for every grid causing poor performance.
I have a feeling that I am on a wrong path and there might be a better solution.
I would be grateful for any input provided.

Thanks in advance
Morten

Here my source and adapter and the first grid:

var id = getValueForUrlParam('fixtureid');
var incidentSource = {  datatype: "json", 
			 	    datafields: [{ name: 'shirtNumber'},
				                       { name: 'playerName'},
						       { name: 'playerId'},
						       { name: 'type'},
						       { name: 'minute'},
						       { name: 'internalId'},
						       { name: 'isPenalty'},
						       { name: 'isOwngoal'},
						       { name: 'isExtratimeGoal'},
						       { name: 'replacementName'},
						       { name: 'replacementId'},
						      ], 
						url: '../php/moderators/fixture/get_incidents_for_fixture.php?fixture=' + id,									   
					         id: 'internalId',
				 }
	
var incidentDataAdapter = new $.jqx.dataAdapter(incidentSource, {autoBind: false, async: false });				
incidentDataAdapter.dataBind();
												
$("#lineupGrid").jqxGrid({
			theme : 'classic',
			source: incidentDataAdapter,
			editable: true,		
			filterable : true,
			rowsheight: 20,
			height: 248, // 12*20
			selectionmode: 'singlecell',
			editmode: 'click',
			columns: [
			    { text: 'Type', datafield: 'type', width: 15, hidden: true },
			    { text: 'Nr.', datafield: 'shirtNumber', width: 50},					
			    { text: 'Spiller', datafield: 'playerId', displayfield: 'playerName', columntype: 'combobox', width: 225, 
				createeditor: function (row, cellvalue, editor) {
											   editor.jqxComboBox({valueMember: 'playerId' , displayMember: 'aname' ,                source: activeDataAdapter });	
												
                                },
				cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {						
													if (newvalue == "") return oldvalue;
													else return newvalue;
				},
						
				}	
			 ]
     		
});
var lineupFiltergroup = new $.jqx.filter();
var lineupFiltervalue = 'in_lineup';
var lineupFiltercondition = 'EQUAL';
var lineupFilterLineup = lineupFiltergroup.createfilter('stringfilter', lineupFiltervalue, lineupFiltercondition);
lineupFiltergroup.addfilter(0, lineupFilterLineup);
$("#lineupGrid").jqxGrid('addfilter', 'type', lineupFiltergroup, true);
			

[DimitarParticipant]

Hello mortenkjeldberg,

At initialization, each of the grids calls dataBind(), which causes the slow performance. This behaviour cannot be disabled.

However, you can create a new data adapter from the existing one using the incidentDataAdapter.records array (after incidentDataAdapter.dataBind()), which you can use as local data. This approach will improve the performance.

Best Regards,
Dimitar

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

[mortenkjeldbergMember]

Hi Dimitar

It worked. I renamed the existing adapter and source using load as prefix. I put the datafields in an external array (incidentFields). At last changed the code to:

var loadIncidentDataAdapter = new $.jqx.dataAdapter(loadIncidentSource, {autoBind: false, async: false });				
			loadIncidentDataAdapter.dataBind();
			
			var incidentSource = {  datatype: "json" ,
			                      datafields: incidentFields,
					       localdata: loadIncidentDataAdapter.records,
			                      id: 'internalId',
										}
			
incidentDataAdapter = new $.jqx.dataAdapter(incidentSource, {autoBind: true, async: false });

Thank you very much
Morten

[Author]

Posts