Dynamic change row data

5 posts, 0 answers
  1. Łukasz
    Łukasz avatar
    2 posts
    Member since:
    Mar 2015

    Posted 18 May 2016 Link to this post

    How to change dynamically row data?

    I'm updating my grid with some ajax intervals.

    For now I'm using this solution:

    tableData[rowId].location = newLocation;
    table.dataSource.data(tableData);

    But when there is many of rows, grid is staring to lagging.

    Is any other way to update rows data? Without re-rendering all grid?

  2. Stephen
    Stephen avatar
    90 posts
    Member since:
    Jan 2011

    Posted 18 May 2016 in reply to Łukasz Link to this post

    You could update the underlying dataSource *without* triggering a rebind to the grid and then just updating the cell text.

    This is paraphrased from my own code where I want to update cells in the grid without triggering a complete redraw.  I'm not sure how well this will scale but it works for reasonably sized grids. Please note, this is an untested snippet copied and modified from my code.

    var grid = $("#myGrid").getKendoGrid();
    var dataSource = grid.dataSource;
    var locationColumnIndex = grid.wrapper.find(".k-grid-header [data-field=location]).index();
    var dataItem = dataSource.get(Id of changed entity);
     
    dataItem.location = newLocation; // Does not trigger a grid redraw as we did not use .set()

    // Update text of cell manually to reflect the change to the dataItem without rebinding the whole grid.

    grid.element.find("tr[data-uid=' + dataItem + "'] td:eq(" + locationColumnIndex + ")").text(newLocation);

  3. Łukasz
    Łukasz avatar
    2 posts
    Member since:
    Mar 2015

    Posted 19 May 2016 in reply to Stephen Link to this post

    It's good idea, but what will happen when user sort/group/filter etc table? My ajax functions are working from 10s to even 2min depends on rows number. Every 1 second i update grid. So when user change rows order, my function will update wrong rows.
  4. Stephen
    Stephen avatar
    90 posts
    Member since:
    Jan 2011

    Posted 19 May 2016 in reply to Łukasz Link to this post

    I was assuming your rows would have a unique identifier from your dataset.

    If it did, then is does not matter what the sort order or grouping is.

    If you are updating all the rows of the grid, what is wrong with using the built-in refresh/read?

    Also, how many rows are being rendered in the grid at the same time, what is the page size?  There will be a limit to how many rows can be rendered, otherwise the size of the DOM gets too big and the whole page slows down.

     

  5. Dimo
    Admin
    Dimo avatar
    8482 posts

    Posted 20 May 2016 Link to this post

    Hello ?ukasz,

    The code that you have pasted looks OK, as long as dataSource.data() is called only once for all changes that you need to make for all data items at a certain time, and not once for each data item.

    If the dataSource.data() call takes long to execute, this indicates that the Grid page size is too large and the rendering process takes longer.

    In case you feel that we are missing something, please provide more information about your scenario, or an example.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top