This is a migrated thread and some comments may be shown as answers.

Performance issue of sortable + bindings in a grid

5 Answers 13 Views
Sortable
This is a migrated thread and some comments may be shown as answers.
Artur
Top achievements
Rank 1
Artur asked on 17 Jul 2015, 10:46 PM

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

5 Answers, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 22 Jul 2015, 08:20 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Artur
Top achievements
Rank 1
answered on 22 Jul 2015, 10:51 AM

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

 

0
Nikolay Rusev
Telerik team
answered on 24 Jul 2015, 06:06 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Artur
Top achievements
Rank 1
answered on 24 Jul 2015, 07:13 AM

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

Artur

0
Nikolay Rusev
Telerik team
answered on 28 Jul 2015, 06:14 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Sortable
Asked by
Artur
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Artur
Top achievements
Rank 1
Share this question
or