Base solution for your next web application
Open Closed

Grid Height #1381


User avatar
0
gconey created

Hi, I've recently started developing my application with the framework and so far I'm very impressed. The framework has given me a fantastic head start. I have one question: Why do all the grids (uiGrids) have a fixed height and only show 10 rows? e.g. user grid, roles, etc. This is not making good use of the available screen space. Is there a recommended way of making them use all the visible space? Will this change in the next release? Thanks.


6 Answer(s)
  • User Avatar
    0
    ismcagdas created
    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>

  • User Avatar
    0
    gconey created

    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>

  • User Avatar
    0
    ismcagdas created
    Support Team

    Thanks for sharing your solution. This is really helpful.

  • User Avatar
    0
    gconey created

    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.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @gconey,

    Thanks for your awesome work :).

  • User Avatar
    0
    rvanwoezik created

    @gconey, Great! Thanks a lot!