Проблемы компоновки с JavaScript / Kendo UI - PullRequest
Новая
       9

Проблемы компоновки с JavaScript / Kendo UI

0 голосов
/ 07 марта 2012

Я работаю над проектом, который требует 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>

Спасибо за любую помощь.

1 Ответ

0 голосов
/ 07 марта 2012

Я адаптировал ваш пример и заменил источник данных на источник, предоставленный командой Telerik для построения этой реализации:

http://jsfiddle.net/latenightcoder/GZjN5

Код довольно понятен, но все, что я делаю, это манипулирую высотой сетки на основе высоты нижнего колонтитула.

...