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
Post a Comment