Endless scrolling in different views

6 posts, 0 answers
  1. Boris
    Boris avatar
    24 posts
    Member since:
    Aug 2015

    Posted 24 Jun 2020 Link to this post

    Hi,

    I am working on grid that runs with two views: all accounts and only favourites accounts. Grid has defined endless scrolling. When I switch this views after application start everything is OK. But when I load "next" accounts (by scrolling) view with favourites contains all accounts. I see data from read and there is correct number of accounts. It seems grid has some data from past. Is there any way how to refresh all grid data?

     

    I tried clear data by

    "$('#AccountGrid').data('kendoGrid').dataSource.data([]);"

    but in favourite accounts view is nothing and in all account view only first page is reloaded by scrolling.

     

    Thanks for any reply.

  2. Nikolay
    Admin
    Nikolay  avatar
    295 posts

    Posted 29 Jun 2020 Link to this post

    Hi Jiri,

    In general, to refresh the Grid data source the read method can be used:

    grid.dataSource.read();

    If this does not help can you share more details about the use-case? How is the switching of the views performed? Are those 2 separate Grids or filter applies for the favorites in the same Grid? Feel free to share the view code.

    Regards,
    Nikolay
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Boris
    Boris avatar
    24 posts
    Member since:
    Aug 2015

    Posted 30 Jun 2020 in reply to Nikolay Link to this post

    Hi Nikolay,

    I use only one grid and views are solved in data reading. I call "grid.dataSource.read()" when different view is selected. Everything works perfectly until next records are loaded through scrolling. Grid implements endless scrolling:

    ...

    .Pageable(p => p.Numeric(false).PreviousNext(false))

    ...

    .Scrollable(s => s.Endless(true))

    ...

        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(50)
            .Read(read => read.Action("Accounts_Read", "Grid").Data("GetAccountReadInfo"))
        )
        .Events(events => events
            .Change("AccountGridChange")
            .DataBound("AccountGridDataBound")
        )
    ...

    (and in data bound function is setted scroll position to first new record

    ...

    if (currentIndex == indexForScroll)
       $('#AccountGrid').find(".k-grid-content").scrollTop(row.position().top);
    ...).

     

    When I select favourite view after scroll I see non favourite accounts although read function returns correct records (and page counting is correct too). In attached file is screen of bad view.

     

    I hope it is more clear now.

  4. Nikolay
    Admin
    Nikolay  avatar
    295 posts

    Posted 03 Jul 2020 Link to this post

    Hi Jiri,

    Thank you for sharing more details about the case. 

    I could suggest instead of grid.dataSource.data() to try grid.setDataSource() method.

    Additionally, the Kendo UI Grid data source has no way of knowing about the changes in the data on the server but something that you can also do is attach a requestEnd data source event handler. In it, you can check the response total and data and if the data is not there you can use one of the internal function to reset the grid

     

    .DataSource(dataSource => dataSource
         .Ajax()
         .Events(e => e.RequestEnd("onRequestEnd"))
    ...
    function onRequestEnd(e) {
        var response = e.response;
         if(!response.Data.length && response.Total){
             var grid= $("#grid").data("kendoGrid");
               grid.dataSource.options.endless = null;
               grid._endlessPageSize = listView.dataSource.options.pageSize;
               grid.dataSource.pageSize(listView.dataSource.options.pageSize);
         }
      }

     

    Please let me know if the above helps. If not it will help me a lot to investigate further if you can prepare and share a sample runnable page that clearly replicates and isolates the problem. A support thread can be opened so the code does not go public.

    Regards,
    Nikolay
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  5. Boris
    Boris avatar
    24 posts
    Member since:
    Aug 2015

    Posted 09 Jul 2020 in reply to Nikolay Link to this post

    Hi Nikolay,

     

    Sended construction by RequestEnd event doesn't work.

    When I solved another problem I found topic (https://www.telerik.com/forums/reset-grid-to-initial-state) that inspires me:

     

    - variable where grid options will be saved:

    ...

    <script type="text/javascript">
        var initialAccountGridOptions = undefined;
    ...

     

    - save first known options:

    ...

        function AccountGridDataBound(e) {
            if (initialAccountGridOptions == undefined)
                initialAccountGridOptions = $('#AccountGrid').data('kendoGrid').getOptions();
    ...

     

    - apply saved options when view is changed:

    ...

        function ViewChanged() {
            $('#AccountGrid').data('kendoGrid').setOptions(initialAccountGridOptions);
            $('#AccountGrid').data('kendoGrid').dataSource.read();

    ...

     

    And it works :).

  6. Nikolay
    Admin
    Nikolay  avatar
    295 posts

    Posted 14 Jul 2020 Link to this post

    Hi Jiri,

    I am happy to hear this has been resolved. 

    Indeed, using the setOptions and getOptions methods is a good way of saving and setting Grid options settings.

    Please contact us back if anything new arises.

    Regards,
    Nikolay
    Progress Telerik

Back to Top