Question

每次切换标签时，我都需要阻止kendo网格滚动到顶部，而我将kendo网格连接到标签条中的某些标签。

@(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

它绑定到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的文档来确保您拥有正确的元素。

在所选标签之间保持Kendo网格中的滚动位置

1 个答案: