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

4 posts, 0 answers
  1. Gal
    Gal avatar
    48 posts
    Member since:
    Apr 2009

    Posted 26 Feb 2015 Link to this post

    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 
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 27 Feb 2015 Link to this post

    Hello Gal,

    Thanks for sharing this. 

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

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Gal
    Gal avatar
    48 posts
    Member since:
    Apr 2009

    Posted 17 Mar 2015 Link to this post

    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();
                });
            }
        });
    })();
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 18 Mar 2015 Link to this post

    Hello Gal,

     

    Thanks again for sharing this!

     

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready