在选定选项卡之间保持 Kendo 网格中的滚动位置答案

【问题标题】：Keep scroll position in Kendo grid between selected tabs在选定选项卡之间保持 Kendo 网格中的滚动位置
【发布时间】：2013-07-19 13:42:54
【问题描述】：

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

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

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

### 编辑###

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

【问题讨论】：

每个选项卡的网格是相同的，还是您想记住每个选项卡上不同网格的位置？
它基本上是相同的网格，因为我只是将网格从另一个选项卡中分离出来并将其附加到另一个选项卡上。问题是每次我移动网格时，列表都会重置到列表顶部（滚动到顶部）。因此，如果我选择了列表中的底部元素，那么当我将网格附加到另一个选项卡时，它就会看不见。这不是一个大问题，每次切换标签时滚动到选定的元素只是令人沮丧;）
是否可以将网格移出选项卡？您可以使用监听选项卡的激活事件来修改选项卡上的任何其他内容并保持网格不变？

标签： jquery asp.net-mvc asp.net-mvc-4 kendo-ui kendo-grid

【解决方案1】：

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

它绑定到 onChange 事件，但您可以将其绑定到 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 的文档来确保您拥有正确的元素。

【讨论】：