This is a migrated thread and some comments may be shown as answers.

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

3 Answers 11 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Gal
Top achievements
Rank 2
Gal asked on 26 Feb 2015, 09:21 AM
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 

3 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 27 Feb 2015, 04:57 PM

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!
 
0
Gal
Top achievements
Rank 2
answered on 17 Mar 2015, 06:43 PM
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();
            });
        }
    });
})();
0
Kiril Nikolov
Telerik team
answered on 18 Mar 2015, 02:17 PM

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!
 
Tags
General Discussions
Asked by
Gal
Top achievements
Rank 2
Answers by
Kiril Nikolov
Telerik team
Gal
Top achievements
Rank 2
Share this question
or