This is a migrated thread and some comments may be shown as answers.

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

9 Answers 1981 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Malcolm
Top achievements
Rank 1
Malcolm asked on 27 Aug 2014, 10:00 AM
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.

9 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 29 Aug 2014, 06:31 AM
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.

 
0
Malcolm
Top achievements
Rank 1
answered on 01 Sep 2014, 10:08 AM
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?
0
Accepted
Dimo
Telerik team
answered on 03 Sep 2014, 07:47 AM
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.

 
0
Karl
Top achievements
Rank 1
answered on 24 Feb 2015, 04:26 PM
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"?
0
Dimo
Telerik team
answered on 25 Feb 2015, 06:29 AM
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.

0
Karl
Top achievements
Rank 1
answered on 25 Feb 2015, 02:09 PM
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
0
Dimo
Telerik team
answered on 25 Feb 2015, 03:31 PM
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.

0
Chris
Top achievements
Rank 1
answered on 15 Jul 2015, 11:23 PM
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?
0
Dimo
Telerik team
answered on 16 Jul 2015, 10:43 AM
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
Tags
Grid
Asked by
Malcolm
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Malcolm
Top achievements
Rank 1
Dimo
Telerik team
Karl
Top achievements
Rank 1
Chris
Top achievements
Rank 1
Share this question
or