Layout Problems with JavaScript / Kendo UI

StackOverflow https://stackoverflow.com//questions/9603140

  •  09-12-2019
  •  | 
  •  

質問

I'm working on a project that requires Kendo UI. We are currently working with the Q1'12 beta. My appliction must have a footer that is always visible. The content of the application would be in all remaining space above the footer. Please note that I do NOT want the footer on TOP of content. I want two distinct sections (Content and Footer).

For some reason, when I use a Kendo grid with a larger data set, grid grows larger than the space alotted for it. While my footer is where I need it to be, the grid appears to grow behind the footer. Because of this, my users cannot interact with the scroll bar. I have included my code below. How do I fix this? I keep spinning my wheels on this and it seems like an easy/common problem. But I can't find a 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 you for any and all help.

役に立ちましたか？

解決

I adapted your sample and swapped out the data source for one provided by the Telerik team to build this implementation:

http://jsfiddle.net/latenightcoder/GZjN5

The code is fairly self-explanatory but all I do is manipulate the grid height based on that of the footer.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top