JavaScript/Kendo UI的布局问题

我正在开发一个需要Kendo UI的项目。我们目前正在与2012年第一季度测试版合作。我的申请必须有一个始终可见的页脚。应用程序的内容将位于页脚之上的所有剩余空间中。请注意，我不希望页脚在内容的顶部。我想要两个不同的部分（内容和页脚）。JavaScript/Kendo UI的布局问题

由于某些原因，当我使用具有更大数据集的Kendo网格时，网格会比分配给它的空间更大。虽然我的页脚是我需要它的地方，但网格似乎在页脚后面增长。因此，我的用户无法与滚动条交互。我在下面列出了我的代码。我该如何解决？我一直在旋转我的轮子，这似乎是一个简单/常见的问题。但我找不到解决方案。

<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>

谢谢你的任何和所有帮助。

来源

2012-03-07 user208662

我适应你的样品和换出数据源为一个由Telerik的团队提供构建这个实现：

http://jsfiddle.net/latenightcoder/GZjN5

的代码是相当不言自明，但我要做的就是操作网格基于页脚的高度。

来源

2012-03-07 16:46:41

JavaScript/Kendo UI的布局问题

回答

相关问题