JavaScript / Kendo UI 的布局问题答案

【问题标题】：Layout Problems with JavaScript / Kendo UIJavaScript / Kendo UI 的布局问题
【发布时间】：2012-03-07 14:20:00
【问题描述】：

我正在开发一个需要 Kendo UI 的项目。我们目前正在使用 Q1'12 测试版。我的应用程序必须有一个始终可见的页脚。应用程序的内容将在页脚上方的所有剩余空间中。请注意，我不希望内容顶部的页脚。我想要两个不同的部分（内容和页脚）。

由于某种原因，当我使用具有更大数据集的 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>

感谢您的所有帮助。

【问题讨论】：

标签： javascript telerik kendo-ui

【解决方案1】：

我调整了您的示例并将数据源换成了 Telerik 团队提供的数据源以构建此实现：

http://jsfiddle.net/latenightcoder/GZjN5

代码是不言自明的，但我所做的只是根据页脚的高度来操作网格高度。

【讨论】：