Как сделать так, чтобы сетка kendo заполняла 100% высоту между верхним и нижним колонтитулами в диалоге пользовательского интерфейса JQuery?

У меня есть диалоговое окно пользовательского интерфейса jquery, которое должно динамически устанавливать свою высоту и ширину после его открытия. Он содержит заголовок div, сетку kendo и нижний колонтитул div. Я бы хотел сделать так, чтобы сетка кендо прокручивалась, а не диалог; диалог на самом деле должен быть переполнен:скрыт по другим причинам. Другими словами, Мне нужна сетка кендо (контент), чтобы заполнить 100% пространства между Нижним колонтитулом и верхним колонтитулом. Я использую нокаут, нокаут-кендо как хорошо.

<div id="popup">
    <div id="header">
        <p>blah</p>
        <p>blah</p>
        <p>blah</p>
    </div>
    <div data-bind="kendoGrid: items"> </div>
    <div id="footer">
        <p><a href="#">CLOSE</a></p>
    </div>
</div>

JSFIDDLE: http://jsfiddle.net/pbkBd/2/

Я попытался с помощью этого примера установить высоту содержимого, но не смог заставить это работать с моим сценарием: http://jsfiddle.net/dimodi/MjKmJ/

2 3
css kendo-ui kendo-grid

2 ответа:

Вы можете задать высоту содержимого сетки следующим образом, 

 $(".k-grid-content").height('200');

Http://jsfiddle.net/jayanthakgjls/pbkBd/4/

Вы можете вычислить высоту и установить ее в событии resize в окне, 

 resize: function() {
    // user has finished resizing the window
      var height=<calculate Height>
     $(".k-grid-content").height(height);
 }
5

Я использую следующий стиль для принудительного заполнения сетки: 

.fillContainerGrid 
{
    height: 100%;
    width: 100%;
}
.fillContainerGrid > .k-grid-content {
    position: absolute;
    top: 69px;
    bottom: 0;
    left: 0;
    right: 0;
}
.fillContainerGrid> .k-pager-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
0