If you're wondering where to hide code that manipulates the DOM in AngularJS 1.x, the answer lies in using a directive. As per the AngularJS documentation:
Directives are essentially markers on a DOM element (could be an attribute, element name, comment, or CSS class) that instruct AngularJS's HTML compiler ($compile) to add a specific behavior to that element or even modify the element along with its children.
This means you can create your own directive to implement the desired resizing functionality to your grid:
// Directive definition with angularJS dependency injection
// for the $window object.
app.directive('expandKGrid', ['$window', function ($window) {
// Define the directive, allowing use only as
var directive = {
link: link, // Function that applies the behavior
restrict: 'A', // Attribute-only directive restriction
require: 'kendoGrid', // Directive must be set on a <kendo-grid> element
};
return directive;
function link(scope, element, attrs) {
var gridElement = $(element);
// Add an event handler to resize the data area of the grid
// when the window is resized
$($window).resize(function () {
// Select the element containing the data
var dataElement = gridElement.find('.k-grid-content');
// Exclude non-data elements like headers and footers
var nonDataElements = gridElement.children().not('.k-grid-content');
// Calculate the height of the grid excluding any borders or margins
var currentGridHeight = gridElement.innerHeight();
// Determine and set the height for the data area
var nonDataElementsHeight = 0;
nonDataElements.each(function () {
nonDataElementsHeight += $(this).outerHeight();
});
dataElement.height(currentGridHeight - nonDataElementsHeight);
});
}
}]);
Apply this directive to your grid like so:
<div ng-app="app" ng-controller="demoController as vm" class="expand-vertical">
<kendo-grid k-options="vm.gridOptions" expand-k-grid class="expand-vertical">
</kendo-grid>
</div>
By combining the existing CSS with the AngularJS directive, the grid will always maintain a height of 100% within its container, even during window resizes:
You can check out how this works in action by visiting this fiddle.