Я работаю над проектом, который требует пользовательского интерфейса Kendo. В настоящее время мы работаем с бета-тестированием Q1'12. Мое приложение должно иметь нижний колонтитул, который всегда виден. Содержимое приложения будет находиться во всем остальном пространстве над нижним колонтитулом. Обратите внимание, что я НЕ хочу, чтобы нижний колонтитул находился в верхней части содержимого. Я хочу два отдельных раздела (Контент и Нижний колонтитул).Проблемы с компоновкой 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>
Благодарим за любую помощь.