Kendo Grid: How to keep scoll position after calling sync (with Batch property set to true)

10 posts, 1 answers
  1. Malcolm
    Malcolm avatar
    29 posts
    Member since:
    Oct 2011

    Posted 27 Aug 2014 Link to this post

    We have a Kendo Grid, shows many records with Batch property set to true.
    Sync() is called after user modifies data, but then the scroll always moves up to the first row.

    $('#grid').data('kendoGrid').dataSource.sync()

    How can I prevent the scroll from moving up to the first row?
    I have set focus to the current cell by calling, but it doesn't work (from this example: http://dojo.telerik.com/@Alexander/Ezoh/3):

    this.current(cell);
    grid.table.focus();

    Thank you very much in advanced.
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2199 posts

    Posted 29 Aug 2014 Link to this post

    Hi,

    I tried to reproduce the problem locally but to no avail – everything is working as expected on our side. Could you please check the example code below and let me know if I'm missing something (as well as this screencast)?

    @(Html.Kendo().Grid<ForeignKeyColumnDemo.Models.Order>()
        .Name("grid")
        .Events(e => {
            e.Save("onSave");
            e.DataBound("onDataBound");
        })
        .Navigatable()

    <script>   
        var lastEditIndex;
        function onSave(e) {
            lastEditIndex.row = this.tbody.children().index(e.container.parent());
            lastEditIndex.col = e.container.parent().children().index(e.container);
        }
     
        function onDataBound(e) {
            var grid = this;
            if (!$.isEmptyObject(lastEditIndex)) {
                var cell = grid.tbody.children().eq(lastEditIndex.row).children().eq(lastEditIndex.col);
     
                grid.current(cell);
                grid.table.focus();
            }
     
            lastEditIndex = {};
        }

    Regards,
    Vladimir Iliev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Malcolm
    Malcolm avatar
    29 posts
    Member since:
    Oct 2011

    Posted 01 Sep 2014 in reply to Vladimir Iliev Link to this post

    Sorry. I need to explain better what my problem is:
    The scroll position is NOT restored after sync(). If the row edited is not the last one in the visible area, then the scroll area 'jumps' after edit. The edited row jumps to last visible position.
    If you have e.g. line 15 as last visible row. Then you edit line 12. After saving you have line 12 as last visible row, not line 15.
    We need to have line 15 as last visible row in such a case. I think this should be possible. If I e.g. save changes in Grid using the "Save Changes" button in batch mode then the scroll position is not changed after saving.
    We want to have this behaviour combined with auto saving after leaving the cell.

    Do you understand our problem?
  4. Answer
    Dimo
    Admin
    Dimo avatar
    8471 posts

    Posted 03 Sep 2014 Link to this post

    Hello Malcolm,

    The observed behavior is expected, because at the time you call current() and focus(), the Grid data area has a scroll offset of 0. Setting a current cell scrolls the data area until the cell becomes visible, i.e. it will be at the bottom of the data area's visible part.

    In addition to cell indexes, you will need to save and restore the scroll offset of the data area (div.k-grid-content) as well.

    Regards,
    Dimo
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Karl
    Karl avatar
    2 posts
    Member since:
    Oct 2013

    Posted 24 Feb 2015 in reply to Dimo Link to this post

    Dimo, can you show a simple example of "In addition to cell indexes, you will need to save and restore the scroll offset of the data area (div.k-grid-content) as well"?
  6. Dimo
    Admin
    Dimo avatar
    8471 posts

    Posted 25 Feb 2015 Link to this post

    Hi Karl,

    In the Grid's dataBinding event you need to save the scrollTop and scrollLeft values of the div.k-grid-content element and restore them in the dataBound event. You can either use the DOM node properties or the jQuery methods to get and set the scroll offset values.

    https://www.google.com/search?q=scrolltop

    Regards,
    Dimo
    Telerik

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  7. Karl
    Karl avatar
    2 posts
    Member since:
    Oct 2013

    Posted 25 Feb 2015 in reply to Dimo Link to this post

    Thanks for the quick response Dimo.  A follow on question...If I wanted to hide the flicker of the save and repositioning of the scroll offset, is there a built in/out-of-the-box way to do that with the grid?

    Thanks in advance,

    Karl
  8. Dimo
    Admin
    Dimo avatar
    8471 posts

    Posted 25 Feb 2015 Link to this post

    Hi Karl,

    The only thing that I can offer you is to use the Kendo UI loading indicator to cover the Grid while you are making the desired adjustments.

    http://docs.telerik.com/kendo-ui/api/javascript/ui/ui#methods-progress

    Regards,
    Dimo
    Telerik

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  9. Chris
    Chris avatar
    3 posts
    Member since:
    Apr 2014

    Posted 15 Jul 2015 in reply to Vladimir Iliev Link to this post

    How can I save my kendo grid state so it looks the same after selecting a row and displaying another view then returning to the grid?
  10. Dimo
    Admin
    Dimo avatar
    8471 posts

    Posted 16 Jul 2015 Link to this post

    Hello Chris,

    Your question does not seem related to the original thread topic, so please open a new forum thread, thanks.

    Regards,
    Dimo
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top