[Solved] Just finished a useful directive thought I can share it with All

[Gal]

Hi All

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 

[Kiril Nikolov]

Hello Gal,

Thanks for sharing this. 

I am sure that it will be helpful for other members as well!

Regards,
Kiril Nikolov
Telerik

 

 

[Gal]

Update added Scheduler support 

(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 element 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) {
                              var newHeight = 0;
                              for (var i = 0; i < element[0].attributes.length; i++) {
                                  switch (element[0].attributes[i].name) {
                                      case "kendo-scheduler":
                                          {
                                              //Calculate the new scheduler height
                                              newHeight = (newValue.height * pct / 100) - offsetH;
                                              //Set new scheduler height if height is diffrent then the crrent
                                              if (element.height() != newHeight) {
                                                  element.height(newHeight);
                                              }
                                              break;
                                          }
                                      case "kendo-grid":
                                          {
                                              //Get Grid data area
                                              var dataArea = element.find(".k-grid-content");
                                              //Calculate the new grid height
                                              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 splitter height
                                              newHeight = (newValue.height * pct / 100) - offsetH;
                                              element.height(newHeight);
                                              break;
                                          }
                                  }
                              }

                          },
                          true);

            w.bind('resize', function () {
                scope.$apply();
            });
        }
    });
})();

[Kiril Nikolov]

Hello Gal,

 

Thanks again for sharing this!

 

Regards,
Kiril Nikolov
Telerik