タブを切り替えるたびに剣道グリッドが一番上にスクロールしないようにする必要がありますが、タブストリップの一部のタブに剣道グリッドを接続したままにします。
@(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);
}
私ができるようにしたいのは、グリッドのスクロール位置を新しいタブをクリックする前と同じ位置に保つことです。したがって、グリッドが毎回一番上にスクロールしないように強制します。これは実際に可能だと思いますか?
### 編集 ###
短くシンプルにするために。自動的に上部にスクロールするため、タブ選択の間のグリッドの位置を維持したいと考えています。一方、ソリューションには、タブを選択した後にリスト内の選択された項目にスクロールすることも含まれます (グリッドは既に上部にスクロールされています)。