Grid very very slow

[HugoParticipant]

Hi guys,

My grid is very slow, as it optimizes

var grid = $('#jqxGrid');
var sourceGrid = function( data ){
return {
     datatype: 'json',
     datafields: [
	{ name: 'oscr', type: 'string' },
	{ name: 'ospa', type: 'string' },
	{ name: 'sr', type: 'string' },
	{ name: 'objeto_entrada', type: 'string' },
	{ name: 'objeto_saida', type: 'string' },
	{ name: 'status', type: 'string' },
	{ name: 'data_oscr', type: 'date' },
	{ name: 'data_ospa', type: 'date' }
     ],
     id: 'id',
     url: settings.systemPath + settings.url,
     data: data,
     cache: false,
     addrow: function (rowid, rowdata, position, commit){
	commit( true );
     },
     updaterow: function (rowid, rowdata, commit){
	commit( true );
     },
     deleterow: function(rowid, commit){
	commit( true );
     }
};
};

var listaTudoAdapter = new $.jqx.dataAdapter(sourceGrid({grid_lista_os:'true'}));

var statusLista = new $.jqx.dataAdapter({
     datatype: 'json',
     datafields:[{ name: 'status' }, { name: 'class' }],
     url: settings.systemPath + 'ajax/ajax.getstatus.php',
     data: { grid_lista_status: 'true' },
     cache: false,
     async: false
});
	     
grid.jqxGrid({
     width: '100%',
     height: '100%',
     theme: settings.tema,
     pageable: true,
     altrows: true,
     editmode: 'click',
     editable: true,
     showfilterrow: true,
     filterable: true,
     pagesize: 50,
     rowsheight: 30,
     statusbarheight: 40,
     pagesizeoptions: ['10', '25', '50', '100'],
     source: listaTudoAdapter,
     showstatusbar: true,
     autoshowloadelement: false,
     renderstatusbar: function( statusbar ){
	var container = $('<div style="overflow: hidden; position: relative; margin: 6px;"></div>');
	var button_atualiza = $('<div style="float: left; margin-left: 5px;">'+
	'<img style="position: relative; margin-top: 2px;" src="images/icon/refresh.png"/>'+
	'<span style="margin-left: 4px; position: relative; top: -3px;">Atualizar</span>'+
	'</div>');
	var button_removefiltro = $('<div style="float: left; margin-left: 5px;">'+
	'<img style="position: relative; margin-top: 2px;" src="images/icon/funnel--minus.png"/>'+
	'<span style="margin-left: 4px; position: relative; top: -3px;">Remover filtro</span>'+
	'</div>');
	var button_imprimir = $('<div style="float: left; margin-left: 5px;">'+
	'<img style="position: relative; margin-top: 2px;" src="images/icon/printer.png"/>'+
	'<span style="margin-left: 4px; position: relative; top: -3px;">Imprimir</span>'+
	'</div>');
	var autoUpdate = $('<div style="float: right; margin-top: 6px; " title="Atualizar o grid a cada 10 seg.">Auto update</div>');
	var button_novaos = $('<div style="float: left; margin-left: 5px;">'+
	'<img style="position: relative; margin-top: 2px;" src="images/icon/novo.png"/>'+
	'<span style="margin-left: 4px; position: relative; top: -3px;">Nova OS</span>'+
	'</div>');
	
	statusbar.append( 
           container.append( button_novaos )
            .append( button_atualiza )
            .append( button_removefiltro )
            .append( button_imprimir )
            .append( autoUpdate )
        );
	button_novaos.jqxButton({ width: 90, height: 20, theme: settings.tema, template: settings.btnTemplate }).click(function(){
	//
	});     
	button_atualiza.jqxButton({ width: 90, height: 20, theme: settings.tema, template: settings.btnTemplate }).click(function(){
	//
	});
	button_removefiltro.jqxButton({ width: 120, height: 20, theme: settings.tema, template: settings.btnTemplate }).click(function(){
	//
	});     
	button_imprimir.jqxButton({ width: 90, height: 20, theme: settings.tema, template: settings.btnTemplate }).click(function(){
	//
	});
	autoUpdate.jqxCheckBox({ width: 110, theme: settings.tema }).on('change', function(e){
	//
	});
     },
     columns: [
	{ text: 'Número', datafield: 'oscr', width: 100, columngroup: 'rma', editable: false, filterable: false },
	{ text: 'Nº OS-PA', datafield: 'ospa', width: 140, columngroup: 'rma', editable: false, filterable: false },
	{ text: 'Nº SR', datafield: 'sr', width: 140, columngroup: 'rma', editable: false, filterable: false },
	{ text: 'Status', datafield: 'status', width: 200, columngroup: 'rma', filtertype: 'list', filteritems: statusLista,
	     cellclassname: function( row, columnfield, value ){
		statusLista.dataBind();
		var data = statusLista.records;
		for( var i = 0; i < data.length; i++ ){
		     if( data[i].status === value ) return data[i].class;
		}
	     },
	     columntype: 'dropdownlist',
	     initeditor: function( row, cellvalue, editor, celltext ){
		var source = new $.jqx.dataAdapter({
		     datatype: 'json',
		     datafields: [{ name: 'label' }, { name: 'value' }],
		     url: settings.systemPath + 'ajax/ajax.getstatus.php',
		     id: 'id',
		     data: { grupo_permissao: cellvalue },
		     cache: false,
		     async: false
		});
		editor.jqxDropDownList({ source: source, displayMember: 'status', valueMember: 'status', dropDownHeight: 200, autoDropDownHeight: false });
		editor.jqxDropDownList('selectItem', cellvalue);
	     },
	     cellbeginedit: function( row, datafield, columntype, oldvalue ){
		var json = $.ajax({ url: settings.systemPath+'ajax/ajax.getstatus.php', data: { grupo_permissao: oldvalue }, async: false }).responseText;
		if( !GIPrma.isJSON( json ) ) return false;
	     },
	     cellvaluechanging: function( row, column, columntype, oldvalue, newvalue ){
		if( newvalue && oldvalue != newvalue && confirm('CONFIRMA A MUDANÇA DE STATUS?') ) return newvalue;
		return oldvalue;
	     },
	     cellendedit: function( row, datafield, columntype, oldvalue, newvalue ){
		if( newvalue == oldvalue ) return;
		var numero = grid.jqxGrid('getrowdata', row).oscr;
		var update = $.ajax({ url: settings.systemPath + settings.url, data: { update_status: newvalue, numero: numero }, async: false }).responseText;
			     
		if( update != 1 ){
		     grid.jqxGrid('updatebounddata', 'cells');
		     return;
		}
	     }
	},
	{ text: 'Objeto entrada', datafield: 'objeto_entrada', width: 125, align: 'right', cellsalign: 'right', columngroup: 'rma', editable: false, filterable: false },
	{ text: 'Objeto saída', datafield: 'objeto_saida', width: 125, align: 'right', cellsalign: 'right', columngroup: 'rma', editable: false, filterable: false },
	{ text: 'Data OS-PA', datafield: 'data_ospa', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'dd/MM/yyyy', columntype: 'inputdate', columngroup: 'rma',
	     editable: false, filtertype: 'date' },
	{ text: 'Data', datafield: 'data_oscr', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'dd/MM/yyyy', columntype: 'inputdate', columngroup: 'rma',
	     editable: false, filtertype: 'date' }
     ],
     columngroups: [
	{ text: 'OS-CR', align: 'center', name: 'rma' }
     ]
}).on('rowdoubleclick', function( event ){
     $('#jqxWindow_visualizar').jqxWindow('open');
});

[Peter StoevKeymaster]

Hello Hugo,

There are certain things in the provided code which should never be done. For example, calling “updatebounddata” on cell end edit. this will perform rebind and will render again your Grid and I don’t think this is necessary at all. If you want to make server synchronization, I would suggest you to look at the help articles about jqxGrid and as far as I see you use PHP so especially look at the help articles about PHP.Additional thing which I think is wrong is to dynamically change the data source of you editor inside the initeditor function which is called each time the editor is opened. May be createeditor which is called just once when the editor is created is much more appropriate for setting the source. Additional thing which will slow down your Grid is the fact that you perform dataBind inside cellclassname function i.e when a cell is rendered. I don’t understand why you do that, but the result will be Ajax call with calculations on each cell render i.e something which will slow down your app.

I hope you will take into account my notes in your implementation.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[HugoParticipant]

Hi @PeterStoev,

As part of the method used in “initeditor” is why depedendo the User that is logged and the value of the cell that it is changing, the dropdownlist will have a different content. If I use “createeditor” I can not leave the options of dropdownlist
dynamics.

As part of the method used in “cellclassname” in the database are registered all types, I get through the kind of “status” of the JSON request and compare with the value of the column “status of the grid” not found otherwise.

sorry for wrong writing does not speak English, use google translate 🙂

[Author]

Posts