Keep scroll position in Kendo grid between selected tabs

Question

I need to prevent kendo grid to scroll to the top every time I switch tabs, whereas I keep the kendo grid attached to some of the tabs in the tabstrip.

@(Html.Kendo().TabStrip()
  .Name("TabStrip")
  .Events(ev => ev.Select("onTabSelect"))
  .Items(tab =>
  {
      tab.Add().Text("Derp1")
         .Selected(true)
         .Content(@<text>
                   <div id="Derp1Append"></div>
                   <div id="multiform">
                       <div class="mainItemGridContainer" >
                           <div>
                               @(Html.Kendo().Grid(Model)
                                     .Name("DerpGrid")
                                     .Columns(columns =>
                                         {
                                             columns.Bound(p => p.Stuff);
                                         })
                                         .DataSource(dataSource => dataSource
                                         .Ajax()
                                         .Read(read => read.Action("PopulateDerp", "Item")
                                         .Events(ev => ev.Error("onErrorDerpGrid"))
                                          )
                                     .Events(ev => ev.Change("onDerpChange"))
                               )
                           </div>
                       </div>
                   </div>
                   <div>
                       //abbreviated
                   </div>
               </text>);
          tab.Add().Text("Derp2")
             .Enabled(true)
             .Content(@<text>
                <div id="Derp2Append"></div>
                     //abbreviated
                </text>);
          tab.Add().Text("Derp3")
             .Enabled(false)
             .Content(@<text>
                <div id="SystemUsageAppend"></div>
                     //abbreviated
                </text>);
      }))

Everytime I switch tabs I attach the grid to the div tag in the selected tab. Here´s the script for onTabSelect.

var selectedTab = $(e.item).find("> .k-link").text();
    if (selectedTab == "Derp1") {
    var myGr1 = $("#multiform").detach();
    $("#Derp1Append").append(myGr1);
}
else if (selectedTab == "Derp2") {
    var myGr3 = $("#multiform").detach();
    $("#Derp2Append").append(myGr3);
}
else if (selectedTab == "Derp3") {
    var myGr4 = $("#multiform").detach();
    $("#Derp3Append").append(myGr4);
}

What I would like to be able to to is keep the scroll position of the grid in the same postition as it was before I clicked the new tab, therefore force the grid to not scroll to the top every time. Do you think this is in fact possible?

### EDIT ###

To keep it short and simple. I would like to keep the position of the grid between tab selection because it scrolls to the top automatically. On the other hand the solution could also involve scrolling to the selected item within the list after selecting the tab (and the grid has already scrolled to the top).

Is it the same grid for each tab or are you trying to remember the position of a different grid on each tab? — DanCaveman
It is basically the same grid since I´m only detaching the grid from another tab and attaching it to another tab. The thing is that every time I move the grid the list resets to top of list (scrolls to top). So if I had selected the bottom element in the list it would be out of sight when I´ve attached the grid to another tab. It´s not a huge problem, it´s just frustrating to scroll to the selected element each time I switch tab ;) — gardarvalur
Is it possible to move the grid out of the tabs? You could use the listen to the activate events of the tabs to modify any of the other content on the tab and leave the grid unchanged? — DanCaveman

DanCaveman DanCaveman · Accepted Answer · 2013-10-10T19:15:55

Here is a stack overflow article that shows how to scroll to the selected item.
Kendo Grid scroll to selected row

It is bound to the onChange event, but you could bind it to the onContentLoad event instead and then it would scroll everytime the Grid was loaded.

//    bind to 'change' event
function onContentLoad(e) {

    //    animate our scroll
    $("#DerpGrid").find(".k-grid-content").animate({  // use $('html, body') if you want to scroll the body and not the k-grid-content div
        scrollTop: this.select().offset().top  //  scroll to the selected row given by 'this.select()'
     }, 400);
}

I am not sure if

$("#DerpGrid").find(".k-grid-content")

works for the version of Kendo you are using, but you could use firebug or Telerik's documentation to make sure you have the right element.

Keep scroll position in Kendo grid between selected tabs

1 Answers