Performance issue of sortable + bindings in a grid

[Artur]

Please have a look at this rudimentary version of a query builder that I aim to create.

http://dojo.telerik.com/uKeCe

Try out the sortable feature. I think you notice the time lag at row drop. Is there anything that could be optimized in the code to eliminate it? Am I doing anything wrong? ...I did not have the nerve to try it, say, on IE10 ;-)

Also, what should I do to have the binding cast null sortDir value as empty string, ie. '(none)'?

Best,

moniuch

[Nikolay Rusev]

Hello Artur,

 

Please excuse us for the late replay. 

 

There are couple of things which causes the observed lag when you reorder items:

 - remove call - removing an item from its old position will cause repaint/rebind of the widget, i.e dataBound will be executed

 - insert call - this will also repaint/rebind of the widget

 - widget initialization in every row - some time will take on each remote and insert call to create and populate the widgets

 

You will need the remove+insert calls in order to reorder items in the DataSource. Otherwise the items will only appear reorderd, but in the DataSource they will stay in their original positions. You can perform some optimizations by creating the widgets in each row only once by implementing some conditional logic.

 

I've updated the example with sample implementation - http://dojo.telerik.com/@rusev/EWaro

 

You can comment the enable(), suspend() function calls and see the difference.

 

Regards,
Nikolay Rusev
Telerik

 

 

[Artur]

Thanks Nikolay,

I appreciated your showing me the suspending technique. Still a lag can be observed, albeit much shorter.

While awaiting your response however I made another dojo with the dropdownlists activated only ​in the edit mode, but made the mode simpler to enter - with a single click. Thus the table reorders much quicker even on IE10 and is perfectly user acceptable.

Best regards,
Artur

 

[Nikolay Rusev]

Hello Artur,

 

Indeed creating the dropdowns in edit mode will make rendering faster as they are created on demand.

 

However the lag might be observed due to the following lines:

 grid.dataSource.remove(dataItem);
grid.dataSource.insert(newIndex, dataItem);

 

which reorders data item in the data source. Each of these lines will cause repaint of the widget.

 

Regards,
Nikolay Rusev
Telerik

 

 

[Artur]

Sure it would be the cause, but these lines are required to keep reordered tr elements in sync with dataSource records, correct?

Artur

[Nikolay Rusev]

Hello Artur,

 

Yes, if you need to actually reorder items in the data, not just in the UI you will need that lines.

 

Regards,
Nikolay Rusev
Telerik