telerik - Layout Problems with JavaScript / Kendo UI -


i'm working on project requires kendo ui. working q1'12 beta. appliction must have footer visible. content of application in remaining space above footer. please note not want footer on top of content. want 2 distinct sections (content , footer).

for reason, when use kendo grid larger data set, grid grows larger space alotted it. while footer need be, grid appears grow behind footer. because of this, users cannot interact scroll bar. have included code below. how fix this? keep spinning wheels on , seems easy/common problem. can't find solution.

<body>   <div id="mylayout" class="k-content" style="background-color:gray; height:100%;">     <div id="contentarea" style="background-color:silver;">       <div id="mylist"></div>        <script type="text/javascript">         var mydatasource = new kendo.data.datasource({           type: "json",           pagesize: 50,           transport: { read: "/mydatasource/" }         });          $(window).load(function () {           $("#mylist").kendogrid({             scrollable: { virtual: true },             datasource: mydatasource,             sortable: true,             columns: [                 { title: "field 1" },                 { title: "field 2" },                 { title: "field 3" },                 { title: "field 4" },                 { title: "field 5" },                 { title: "field 6" },                 { title: "field 7" }               ]             });           });           </script>          </div>          <div id="footer" style="background-color:silver;">             footer information         </div>      </div>      <script type="text/javascript">         $(document).ready(function () {             $("#rootlayout").kendosplitter({                 orientation: "vertical",                 panes: [                     { scrollable: false, collapsible: false, size: "90%" },                     { collapsible: true, size: "10%" }                 ]             });         });     </script> </body> 

thank , help.

i adapted sample , swapped out data source 1 provided telerik team build implementation:

http://jsfiddle.net/latenightcoder/gzjn5

the code self-explanatory manipulate grid height based on of footer.


Comments

Popular posts from this blog

delphi - How to convert bitmaps to video? -

jasper reports - Fixed header in Excel using JasperReports -

python - ('The SQL contains 0 parameter markers, but 50 parameters were supplied', 'HY000') or TypeError: 'tuple' object is not callable -