javascript - Kendo Grid inside Kendo TabStrip has unlimited height -


i have kendo grid placed on page , spans on whole visible page (width , height). if there's many rows, grid shows scroll bar.

but when place grid inside kendo tabstrip (with height 100%), grid's height becomes unlimited, scroll not shown , rows outside page not visible (cannot scrolled to).

how limit grid tabstrip's height?

the problem tricky find. problem tabstrip or rather tabstrip vs grid problem.

grid adjusts size container's size. tabstrip's tab adjusts content.

there 3 steps solve it:

  • tabstrip's tabs must have height set 100%;
  • set fixed height of tabstrip, grid knows how compute height. in case must done in domcontentloaded event, after whole html generated before grid loaded;
  • request grid resize when parent's size set or changed;

sample page code:

<div id="header">     sample page header show how compute content's height </div> <div id="content">    <div id="mytabstrip" data-role="tabstrip">         <ul>             <li id="tab1" class="k-state-active">aaaa</li>             <li id="tab2">bbbbb</li>         </ul>         <div style="height: 100%">             ...grid1 definition...         </div>         <div style="height: 100%">             ...other stuff...         </div>     </div> </div> 

javascript code:

 (function () {     function resize() {         var h = $("#content").height() - $("#header").height();         $("#mytabstrip").height(h);         $("#grid1").data('kendogrid').resize();     }      $(document).one("domcontentloaded", resize);     $(window).on("resize", resize); })(); 

(the code above not production ready).


Comments

Post a Comment

Popular posts from this blog

c# - Where does the .ToList() go in LINQ query result -

Listeners to visualise results of load test in JMeter -

android - CollapsingToolbarLayout: position the ExpandedText programmatically -