Performance issue of sortable + bindings in a grid

6 posts, 0 answers
  1. Artur
    Artur avatar
    11 posts
    Member since:
    Dec 2014

    Posted 17 Jul 2015 Link to this post

    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

  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 22 Jul 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Artur
    Artur avatar
    11 posts
    Member since:
    Dec 2014

    Posted 22 Jul 2015 in reply to Nikolay Rusev Link to this post

    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

     

  5. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 24 Jul 2015 Link to this post

    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!
     
  6. Artur
    Artur avatar
    11 posts
    Member since:
    Dec 2014

    Posted 24 Jul 2015 in reply to Nikolay Rusev Link to this post

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

    Artur

  7. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 28 Jul 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready