performance increase for appendRow

[jorkzijlstra]

I was adding 100.000 rows and the time that it took went from 37 seconds to 100 ms with this change.

[zspitzer]

This is great in Chrome 50% faster, Firefox is about 15% faster, Edge is 10% faster, IE 11 just sucks

[jorkzijlstra]

Hello, good to see that somebody is working on it and my fix could be of help. I didn't have the time to make more improvements since javascript is also not the language I normally use. I did had some thoughts on doing rendering more in memory first then adding it to the dom as the final version only to find out that the code goes outside the assigned div to render the header. I also wanted to apply more funtional programming, this is why I though of the appendrows approach.

[zspitzer]

the main remaining problem is that IE11/Edge appendChild performance simply sucks compared to FF/Chrome/Safari

MS have confirmed there is an issue with appendChild being slow, vote for the bug here
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8579990/

[Rombusevil]

Downloaded the bootgrid from the dist folder of the @jorkzijlstra repo. But whe I use it it gives me this error:

Uncaught TypeError: Cannot read property 'rows' of undefined jquery.bootgrid.js:43

Any ideas?

[jorkzijlstra]

@Rombusevil, I redownloaded but I still can't reproduce it. Since this.rows is undefined, which is constructed on initialization, are you initializing the bootgrid correctly?

{div}.bootgrid calls the constructor of new Grid, within this constructor the this.rows is set to []. So it should always be available.

Here is a snippets I use, although it will contains some extra code that you maybe have to filter to get it working for you.

function gridRenderer(parent) {
	return function (id) {
		return function(gridData) {
			console.time("renderGrid")

			var headers = gridData.headers
			var gridId = 'grid-data-' + id
			var table = $('<table></table>').attr({
				'class' : 'table table-condensed table-hover table-striped', 
				'id' : gridId}
			)

			table.append('<thead><tr>' + getTableHeaders(headers) + '</tr></thead>')					
			
			var gridDiv = $('<div></div>').append(table).append('<hr />') //table needs a parent to render the header per table

			table.bootgrid({
				ajax: false,
				selection: false,
				caseSensitive: false
			})

			console.time("addrows")
			table.bootgrid("append", gridData.rows)
			console.timeEnd("addrows")

			parent.append(gridDiv);
			console.timeEnd("renderGrid")

			addDownloadOption(gridId, table)
			addHeaderHover(gridId, table)
		}
	}
}

Let me know if this helps or not.

[jorkzijlstra]

@Rombusevil, where you able to solve / fix it?

[Rombusevil]

Thanks @jorkzijlstra and sorry for not responding earlier. I ran out of time with that project so I decided to make the grid hook up with a webservice instead of keep debbuging the local performance.