Как увеличить высоту сетки Kendo-UI до 100% в режиме AngularJS 1.x?

Недавно я столкнулся с проблемой, что мне нужен виджет грида Kendo UI, который имеет высоту, равную 100% окружающего

. Я попытался применить некоторый базовый CSS на моей сетке - без успеха:
html, body {
 height:100%;
}
.expand-vertical {
 height: 100%;
 min-height: 100%
}
<div ng-app="app" ng-controller="demoController as vm">
 
</div>

Как вы можете видеть в этой скрипке, это прекрасно работает - пока вы не измените размер окна:

Я нашел решение, как добиться этого, используя jQuery в ответ на несколько схожий вопрос, однако этот вопрос не охватывает подход, который следует применять при использовании углового.

Я мог бы разместить этот код в своем контроллере, но я не уверен, правильно ли это место для управления DOM. Как я могу достичь желаемого поведения элегантным способом AngularJS?

1 ответ

Правильное место в AngularJS 1.x для "скрытия" кода, управляющего DOM, является директивой. Чтобы процитировать документы AngularJS:

На высоком уровне директивы - это маркеры на элементе DOM (такие как атрибут, имя элемента, комментарий или класс CSS), которые сообщают компилятору HTML (HTML) компилятору AngularJS, чтобы связать указанное поведение с этим элементом DOM или даже преобразовать элемент DOM и его детей.

Таким образом, вы можете создать свою собственную директиву, чтобы приложить желаемое изменение размера к вашей сетке:

// Define the directive and inject the angularJS reference
// to the $window object.
app.directive('expandKGrid', ['$window', function ($window) {

 // Define the directive, but restrict its usage to 
 var directive = {
 link: link, // The function attaching the behavior
 restrict: 'A', // Restrict directive to be used only as attribute
 require: 'kendoGrid', // Ensure the directive is set on a <kendo-grid> element
 };
 return directive;


 function link(scope, element, attrs) {
 var gridElement = $(element);

 // Attach an eventHandler to the resize event of the
 // window to resize the data area of the grid accordingly
 $($window).resize(function () {
 // Get the element wrapping the data
 var dataElement = gridElement.find('.k-grid-content');
 // Get all other elements (headers, footers, etc...)
 var nonDataElements = gridElement.children().not('.k-grid-content');
 // Get the height of the whole grid without any borders or margins
 var currentGridHeight = gridElement.innerHeight();
 // Calculate and set the height for the data area, which
 // is the height of the whole grid less the height taken
 // by all non-data content.
 var nonDataElementsHeight = 0;
 nonDataElements.each(function () {
 nonDataElementsHeight += $(this).outerHeight();
 });
 dataElement.height(currentGridHeight - nonDataElementsHeight);
 });
 }
}]);
</kendo-grid>

Наконец, примените эту директиву к своей сетке:

<div ng-app="app" ng-controller="demoController as vm">
 <kendo-grid k-options="vm.gridOptions" expand-k-grid="">
 </kendo-grid>
</div>

Все это - комбинация CSS, которую вы уже предоставили вместе с директивой AngularJS, гарантирует, что сетка всегда имеет высоту 100% от окружающего контейнера, даже когда размер окна изменяется:

Вы можете видеть это в действии в этой скрипке.

licensed under cc by-sa 3.0 with attribution.