i need prevent kendo grid scroll top every time switch tabs, whereas keep kendo grid attached of tabs in 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 switch tabs attach grid div tag in selected tab. here´s script 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 able to keep scroll position of grid in same postition before clicked new tab, therefore force grid not scroll top every time. think in fact possible?
### edit ###
to keep short , simple. keep position of grid between tab selection because scrolls top automatically. on other hand solution involve scrolling selected item within list after selecting tab (and grid has scrolled top).
here stack overflow article shows how scroll selected item.
kendo grid scroll selected row
it bound onchange event, bind oncontentload event instead , scroll everytime grid loaded.
// bind 'change' event function oncontentload(e) { // animate our scroll $("#derpgrid").find(".k-grid-content").animate({ // use $('html, body') if want scroll body , not k-grid-content div scrolltop: this.select().offset().top // scroll selected row given 'this.select()' }, 400); } i not sure if
$("#derpgrid").find(".k-grid-content") works version of kendo using, use firebug or telerik's documentation make sure have right element.
Comments
Post a Comment