Grid Height #1381

6 Answer(s)

• 

  0

  ismcagdas created 8 years ago

  Support Team

  Hi,

  I agree that this feature will be very useful. But it's hard to calculate row count.

  It is related to angular ui grid rather than aspnet zero, there is a similar issue for angular ui grid, they might develop this. <a class="postlink" href="https://github.com/angular-ui/ui-grid/issues/2746">https://github.com/angular-ui/ui-grid/issues/2746</a>

  Save Cancel
• 

  0

  gconey created 8 years ago

  Thanks a lot. I already read that. I really just want the grid to take up the available space because I'll often have many rows. For now I just did this which is working:

  <div class="portlet-body" style="height:80vh;"> <div busy-if="vm.loading" style="height:100%;"> <div ui-grid="vm.textTypeGridOptions" ui-grid-pagination ui-grid-resize-columns style="height:100%;" dir=@(CultureHelper.IsRtl ? "rtl" : "")></div> </div> </div>

  Save Cancel
• 

  0

  ismcagdas created 8 years ago

  Support Team

  Thanks for sharing your solution. This is really helpful.

  Save Cancel
• 

  0

  gconey created 7 years ago

  If anyone needs uiGrids that take up available window height I've developed a much better way of doing it:

  Add the following directive called fullHeightGrid.js:

  (function () {
      appModule.directive('fullHeightGrid', ['$timeout', '$window',
          function ($timeout, $window) {
              return {
                  restrict: 'A',
                  scope: false,
                  require: 'uiGrid',
                  link: function (scope, element, attrs, uiGridCtrl) {
                      var setGridHeight = function () {                        
                          var windowHeight = window.innerHeight;
                          var gridTop = getGridTop();
                          var gridHeight = windowHeight - gridTop - 40;
                          if (gridHeight < 380) gridHeight = 380;
                          $(element).height(gridHeight);
                          uiGridCtrl.grid.api.core.handleWindowResize();
                      };
  
                      var getGridTop = function () {
                          return $(element)[0].getBoundingClientRect().top + document.documentElement.scrollTop;
                      };
  
                      $timeout(setGridHeight);
                      angular.element($window).bind('resize', setGridHeight);
  
                      scope.$watch(function () {
                          return getGridTop();
                      }, function (gridTop) {
                          setGridHeight();
                      });
                  }
              };
          }
      ]);
  })();
  

  Then add the directive to your grids, e.g.:

  <div ui-grid="vm.gridOptions" ui-grid-pagination ui-grid-resize-columns full-height-grid dir=@(CultureHelper.IsRtl ? "rtl" : "")></div>
  

  This works with all grids including the ones that come with the Framework.

  Save Cancel
• 

  0

  ismcagdas created 7 years ago

  Support Team

  Hi @gconey,

  Thanks for your awesome work :).

  Save Cancel
• 

  0

  rvanwoezik created 7 years ago

  @gconey, Great! Thanks a lot!

  Save Cancel