jquery - 保持 Kendo 网格中所选选项卡之间的滚动位置

Question

我需要防止剑道网格在每次切换选项卡时滚动到顶部，而我将剑道网格附加到选项卡条中的某些选项卡。

@(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>);
      }))

每次切换选项卡时，我都会将网格附加到所选选项卡中的 div 标签。这是 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);
}

我希望能够将网格的滚动位置保持在与单击新选项卡之前相同的位置，因此强制网格不要每次都滚动到顶部。您认为这实际上可能吗？

### 编辑###

保持简短。我想保留选项卡选择之间网格的位置，因为它会自动滚动到顶部。另一方面，该解决方案还可能涉及在选择选项卡后滚动到列表中的所选项目(并且网格已经滚动到顶部)。

Answer 1

这是一篇堆栈溢出文章，展示了如何滚动到所选项目。
Kendo Grid scroll to selected row

它绑定(bind)到 onChange 事件，但您可以将其绑定(bind)到 onContentLoad 事件，然后每次加载 Grid 时它都会滚动。

//    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);
}

我不确定是否

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

适用于您正在使用的 Kendo 版本，但您可以使用 firebug 或 Telerik 的文档来确保您拥有正确的元素。