Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Josselin Pujo
35
API grid update without rebinding, and correct UI ?
posted

Hi, I am trying to use an igGrid that is updated in real time by API (not from user actions), with a local (initially empty) datasource in a Single Page Application.

Modifying the datasource does not trigger a grid redraw.

Modifying the grid with igGridUpdating.addRow works, but the new row does not respect filtering/sorting/grouping, it's added at the end of the grid without any rules applied...

Rebinding the whole datasource works but

  • It is very very slow, slow enough to have noticable pauses on grids that have a few hundred items, and slow enough to be unusable with more than 1000 items.
  • All grid stats (filters, groups, sorting...) must be manually saved and restored with a feature specific API for each feature...
  • Not all state can be saved (open or closed groups for example)
  • If the user is using a grid dialog when the grid is rebinded, the grid dialog becomes corrupted and non-usable.

All those problems with rebinding are logical, but that is because rebinding is not designed for partial redraw but for loading a whole new datasource.

  • 2745
    Offline posted

    I ran into the same issue.  The way we resolved it was to navigate to the current page.  I see you didn't mention paging at all so I don't know if you have option enabled or not.  If so, you can just do this:

    // 1-liner
    $("#.selector").igGridPaging("pageIndex", $("#.selector").igGridPaging("option", "currentPageIndex"));

    // Clearer
    var pageIndex = $("#.selector").igGridPaging("option", "currentPageIndex");
    $("#.selector").igGridPaging("pageIndex", pageIndex);

    This will force a redraw of the current grid but for a single page.  Not the entire data source.  By default, the number of records on the page is capped at 100 and will preserve your filtering, sorting and grouping.

  • 9190
    Suggested Answer
    Offline posted

    Hello josselin Pujo,

    Thank you for posting on our forums.

    You should be able to maintain sorting by first committing the added row to the underlying DataSource (JSON), and calling the sortMultiple method as demonstrated in the attached sample.

    To learn more, please review the API for igSorting: https://www.igniteui.com/help/api/2014.1/ui.iggridsorting

    sortMultiple
    .igGridSorting( "sortMultiple" );
    Sorts grid columns and updates the UI.
    Code Sample
    $(".selector").igGridSorting("sortMultiple");

    Please review the sample and let me know if you have any questions.

    igGridAutoSortAddedRow.zip