[BennyParticipant]

To illustrate that adding and modifying elements to the DOM is considered bad practive I made the following example http://jsfiddle.net/cuhsq7dz/2/ where I used detach() to make sure the grid is only rendered once. The classic grid completes in 441 ms for the detached grid and 95 ms for the detached grid. After the scripts are done the browser needs time to render the last changes, which in case of the detached grid are significant. Not only do I save time by rendering everything once, my page becomes more responsive much quicker since the page rendering happens asynchronously in a different thread.

Again, the times in these examples are much smaller than my actual grid. We will either go with one of these hacks or choose another library to provide a better service.

Here are some more sources that show that your approach is not considered good practice:
http://ejohn.org/blog/dom-documentfragments/
http://learn.jquery.com/performance/detach-elements-before-work-with-them/
http://learn.jquery.com/performance/append-outside-loop/

[BennyParticipant]

I use the filter row as an example, it is not the underlying problem. I only use it as an example because it contains a lot of HTML elements and therefore has a larger impact.

The grid I am developing takes 1,5 seconds to start up without data. It is not acceptable to spend 95% of that time adding a few 100 elements tot he DOM. I can strip away the filter row and limit the number of columns, but this only limits the problem instead of solve it. And besides, we want all those features because they are great.

In my first example, taking away the filter row, still leaves a loading time of 200 ms for a very simple grid with no data. It is not reasonable to take 200 ms for that amount of work. With the hack I used in the second example, the gird becomes a lot more responsive, which shows that there is room for improvement. We are talking here about just a few hundred miliseconds, but in my actual grid we are talking about whole seconds at which point this is a significant issue.

[BennyParticipant]

Could you please add this to your bug tracker/issue management system?

Regards,
Benny

[BennyParticipant]

Hi Dimitar,

Thanks for the link. The solution is more elegant. However, it still throws an error.

1. Go to http://jsfiddle.net/jnf943jh/1/
2. Deselect all filters in the Product column

Expectation: No error
Actual: Uncaught ReferenceError: fitlerdatavalue is not defined

fitlerdatavalue looks like a typo to me.

Also, I would like the “(Empty)” filter option to be at the top of the list in the dropdown. Similar to the “(Select all)” filter option.

[Author]

Posts