Hi All
I just finished struggling with a resize directive and thought it can be useful to others.
Enjoy
I just finished struggling with a resize directive and thought it can be useful to others.
(
function
() {
'use strict'
;
//resize Grid directive
angular.module(
'app.core'
).directive(
'resize'
,
function
($window) {
return
function
(scope, element, attr) {
var
offsetH = attr.resize;
//what offset will be removed from the grid height
var
pct = 100;
//what % of the page the grid will occupy
if
(attr.resizeRatio) {
//sets the pct incase it was set in markup
pct = attr.resizeRatio;
}
var
w = angular.element($window);
scope.$watch(
function
() {
return
{
//Used when the window size has changed
'height'
: window.top.innerHeight,
'width'
: window.top.innerWidth,
//Used for initialization when the grid has not been rendered and height is 0 triggers the function once the grid is rendered
'elementHeight'
: element.height(),
'elementWidth'
: element.width()
};
},
function
(newValue, oldValue) {
for
(
var
i = 0; i < element[0].attributes.length; i++) {
switch
(element[0].attributes[i].name) {
case
"kendo-grid"
:
{
//Get Grid data area
var
dataArea = element.find(
".k-grid-content"
);
//Calculate the new grid height
var
newHeight = (newValue.height * pct / 100) - offsetH;
//Calculate the difrence between the grid to the data area
var
diff = element.innerHeight() - dataArea.innerHeight();
//Set new grid height if height is diffrent then the crrent
if
(element.height() != newHeight) {
element.height(newHeight);
dataArea.height(newHeight - diff);
}
break
;
}
case
"kendo-splitter"
:
{
//Calculate the new grid height
var
newHeight = (newValue.height * pct / 100) - offsetH;
element.height(newHeight);
break
;
}
}
}
},
true
);
w.bind(
'resize'
,
function
() {
scope.$apply();
});
}
});
})();
Enjoy