How to Live Update Grid

[Pylori]

I want to realize the following

(1) Receive data every three seconds from the server and update the contents of Grid
(Fewer cells are updated at a time)

(2) Display the grid so that it fits in the window, and display a scroll bar if there are many data

(3) Fix the position of the header of the grid and do not scroll

(4) When the contents of Grid are updated by the processing in (1), the scroll position does not change

Of the above contents, only (4) does not work.
When the contents of Grid are updated by the processing of (1), the scroll position returns to the same position each time.
Is there any solution?

-- (The following is part of the source) --

Index.cshtml
-----------------------------

    @Html.EJ().DataManager("DataManager").URL("/AAA/DataSource").Adaptor(AdaptorType.UrlAdaptor)
    ...

    @(Html.EJ().Grid<IEnumerable<XXX>>("Grid")
        .DataManagerID("DataManager")
        .ScrollSettings(scroll => scroll.Height("100%"))
    ...

    @section Scripts
    {
        <script>
            $(function () {
                setInterval(
                    function () {
                        var grid = $("#Grid").ejGrid("instance");
                        grid.refreshContent();
                    }
                    , 3000
                )
            });
        </script>
    }
    ...

AAAController.cs
-----------------------------

    public ActionResult DataSource(DataManager dataManager)
    {
        var data = (IEnumerable<XXX>)this.GetData();
        return Json(new { result = data });
    }

[Thavasianand Sankaranarayanan]

Hi Pylori, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that you want to reset the vertical scrollbar when we refresh the Grid content. By default, we have maintain the scrollbar when we refresh the Grid content. if you want to reset the vertical scrollbar then we suggest to reset the y scroll position after refreshed the Grid content. 

Refer the below code example. 

@Html.EJ().DataManager("DataManager").URL("/Grid/UrlDataSource").Adaptor(AdaptorType.UrlAdaptor) 

 

@(Html.EJ().Grid<OrdersView>("FlatGrid") 

       

          .DataManagerID("DataManager")   

       

          ---- 

       

        .Columns(col => 

        { 

             

            --- 

            

        })) 

<script> 

    $(function () { 

        setInterval( 

            function () { 

 

                var grid = $("#FlatGrid").ejGrid("instance"); 

                grid.refreshContent(); 

                grid.getScrollObject().scrollY(0); 

            } 

            , 3000 

        ) 

    }); 

</script> 

Note: If we are not maintain the scroll position while refreshing then if we need to scroll the Grid content for any data checking and it automatically scrolls to the top while refreshing the data. So, we need to scroll the content before it get refresh. 

We have modified the sample with the above solution and it can be downloadable from the below location. 

Sample: https://www.syncfusion.com/downloads/support/forum/137696/ze/SyncfusionMvcApplication1211601321.zip 

Regards, 

Thavasianand S. 

[Pylori]

Hi,

thank you for the fast answer.

How can I keep the scroll position so that the scroll position does not change even if the grid refreshes?
I am investigating but I can not find a method yet.

Regards,
pylori

[Pylori]

Hi,

 

I found a solution.
The following is the source.

    setInterval(
        function () {
            var grid = $("#Grid").ejGrid("instance");
            var y = grid.getScrollObject().scrollTop();
            grid.refreshContent();
            grid.getScrollObject().scrollY(y);
        }
        , 3000
    )

Thank you very much.

Regards,
pylori

[Thavasianand Sankaranarayanan]

Hi Pylori, 

 

We are happy that the problem has been solved. 

 

Please get back to us if you need any further assistance.  

                          

Regards, 

Thavasianand S.