Improve rendering speed

[fadora]

Hi, I'm trying to apply bryntum grid to a webpage that display a 1000 row table with input fields inside cells. My first implementation, just for trying this table, is simply to pass all inputs like normal data in a grid with htmlencode false on that columns fields.
Obiviously rendering is really slow, there is a solution to improve speed in this case? I prefer to avoid, at this moment, to rewrite all data management with bryntum grid functionalities.
The table has the tree functionalities enabled and working fine.

[mats]

Can you please share your Grid configuration code so we can inspect and debug? Are you using autoHeight? If yes, try disabling it?

[fadora]

Can you please share your Grid configuration code so we can inspect and debug? Are you using autoHeight? If yes, try disabling it?

const targetElement = document.getElementById('tab');
			
		const { Grid } = bryntum.grid;
		const grid = new Grid({
			appendTo : targetElement,

			autoHeight : true,

			features : {
				// Turn the Cell menu off completely, will not be created
				cellMenu : false,
				// Turn the Header menu off completely, will not be created
				headerMenu : false,
				tree: true,
				print : true
			},

			store : {
				fields : [
					'group',
					'cat',
					'subcat',
					'art',
					'check',
					'udm',
					'acq',
					'cng',
					'plr',
					'plrtot',
					'tra',
					'type_tra',
					'dog',
					'tarz',
					'perc_per',
					'per',
					'perc_imm',
					'imm',
					'perc_carb',
					'carb',
					'perc_mez',
					'mez',
					'perc_ris',
					'ris',
					'prchf',
					'perc_oro',
					'oro',
					'perc_argento',
					'argento',
					'perc_bronzo',
					'bronzo',
					'perc_riv',
					'riv',
					'perc_gros',
					'gros',
					'perc_priv',
					'priv'
				],

				data : [
					<?php
			//TO SIMPLIFY I REMOVED ALL QUERY ELABORATION AND SOME DATA FROM NEXT ECHO
								echo "{
										id: ".$i.",
										art: 'Art-".$i."',
										expanded: true,
										children: [{
										group: '<input onclick=\"checkgr(\'".$grp."\')\" type=\"checkbox\" id=\"".$grp."\"> ".addslashes($row_all_articolo['gruppo'])."',
										cat: '<input class=\"".$grp."\" onclick=\"checkgruppo(\'".$ctg."\')\"  id=\"".$ctg."\" type=\"checkbox\"> ".addslashes($row_all_articolo['cat'])."',
										subcat: '<input class=\"".$grp." ".$ctg."\" onclick=\"checkgruppo(\'".$sctg."\')\" id=\"".$sctg."\" type=\"checkbox\"> ".addslashes($row_all_ar['subcat'])."',
										//ALL ROW DATA...
										}]
								},";
								$i++;
							}
						}	
					?>
				]
			},
			rowHeight: 25,
			columns : [
				{ type: 'tree', field : 'art', text : 'ART', width: 350, htmlEncode : false, editor: false },
				{ field : 'check', text : 'Sel. Riga', flex : 1, htmlEncode : false, editor: false, align: 'center' },
				{ field : 'udm', text : 'UDM', flex : 1, htmlEncode : false, editor: false },
				{ field : 'acq', text : 'ACQ', flex : 1, htmlEncode : false, editor: false },
				{ field : 'cng', text : 'CMG', width: 60, htmlEncode : false, editor: false, renderer({ cellElement, record }) {cellElement.style.backgroundColor = '#E9EEFF'; return record.cng;} },
				// ALL FIELDS...
			],

			features : {
				// Turn the Cell menu off completely, will not be created
				cellMenu : false,
							// Turn the Header menu off completely, will not be created
							headerMenu : false,
							tree: true,
				treeGroup : {
					levels : ['group','cat', 'subcat']
				}
			},
		});

[mats]

Ok, please remove autoHeight, you won't have good performance if you render 1000s of DOM elements I'm afraid.

[fadora]

I am aware... If I process the data directly with the Bryntum Grid features, i.e. inside cells, will the performance increase? Can you link me to the best parts of the manual to learn about these features? Unfortunately I don't have time to read all the documentation...

[mats]

If I process the data directly with the Bryntum Grid features, i.e. inside cells

Not sure what you mean, but simply disabling autoHeight will give you a massive performance boost. Are you facing any other issues at this time?

[fadora]

With this hasty implementation, made main for testing, the page is too slow... I need all these thousands of inputs to handle some calculations, if I handle the data without these inputs, as shown in the classic Bryntum grid examples, editing cells directly in the table, is the table faster than my current implementation?
Disabling autoHeight, performances grow up a little.

[mats]

if I handle the data without these inputs, as shown in the classic Bryntum grid examples, editing cells directly in the table, is the table faster than my current implementation?

Yes for sure, you should not create those 1000 inputs, you could for example style the cells to look like inputs and create the actual input on click / hover.

[fadora]

if I handle the data without these inputs, as shown in the classic Bryntum grid examples, editing cells directly in the table, is the table faster than my current implementation?

Yes for sure, you should not create those 1000 inputs, you could for example style the cells to look like inputs and create the actual input on click / hover.

Can you link me documentation to do this?

[marcio]

Hey fadora,

You can add a custom class to cell element using https://bryntum.com/products/grid/docs/api/Grid/column/Column#config-cellCls

For hovering, you should look at https://bryntum.com/products/grid/docs/api/Grid/view/mixin/GridElementEvents#event-cellMouseOver and https://bryntum.com/products/grid/docs/api/Grid/view/mixin/GridElementEvents#event-cellMouseOut

And for cell click, you're looking for https://bryntum.com/products/grid/docs/api/Grid/view/mixin/GridElementEvents#event-cellClick