AngularJS ng-Grid and ngGridFlexibleHeightPlugin not working as I expect

Question

I am trying to use Angular ng-grid to show some dynamic content. The grid will have 0 - 25 rows. I want to have a minimum size and then have the ng-grid auto adjust the height as items get added to the array. For some reason the auto size stops after adding 6-7 items (it even seems to depend on your resolution).

Can anyone help? What am I missing? I have a Plunker below that shows the issue.

http://plnkr.co/edit/frHbLTQ68GjMgzC59eSZ?p=preview

Paly

I had been running into such and other problems and started an attempt to fix (see fork on github branch improve_layout github.com/a5sk4s/ng-grid/tree/improve_layout) - this is work in progress and may introduce new issues - see a fork of your plunk here: plnkr.co/edit/06CYAGjVURxGxDfX8wnt (some layout issues, because I changed ng-grid.css and can't reference it) - hope it helps – Conation

Thanks Andreas. I was concerned that I was not using the plugin correctly or even ngGrid. It looks like it just has some issues right now. For this particular problem, do you know what items you modified in your branch? I can make the changes locally where I dont think that using that branch is an option for me. – Paly

Andreas, you link to your plunker is broken. – Electrosurgery

ng-grid is nice, but it has issues (e.g. sizing layout, jQueryUI theme integration specifically with borders). The project needs love. – Odo

I can confirm that the plugin doesn't work properly. Same for ngGrid itself, for that matter. I'll be looking for alternatives soon. – Expatiate

@MKSafi You might want to look at ngTable bazalt-cms.com/ng-table – Gervase

Answer 1

If you are still having issues I would suggestion not using the ng-grid and create your layout directly in html (Use DIVs, column width formatting, styles, etc...). Then populate your new layout using your $scope. Between variables, models and ng-repeat you should be able to do everything you need.

Triboluminescent

Answer 2

The code bellow is a modification to the plugin. It works by checking number of items in the grid data and calculating the height based on that. The options passed in to the plugin are height of row and header height.

ngGridCustomFlexibleHeightPlugin = function (opts) {
    var self = this;
    self.grid = null;
    self.scope = null;
    self.init = function (scope, grid, services) {
        self.domUtilityService = services.DomUtilityService;
        self.grid = grid;
        self.scope = scope;
        var recalcHeightForData = function () { setTimeout(innerRecalcForData, 1); };
        var innerRecalcForData = function () {
            var gridId = self.grid.gridId;
            var footerPanelSel = '.' + gridId + ' .ngFooterPanel';
            var extraHeight = self.grid.$topPanel.height() + $(footerPanelSel).height();
            var naturalHeight = (grid.data.length - 1) * opts.rowHeight + opts.headerRowHeight;
            self.grid.$viewport.css('height', (naturalHeight + 2) + 'px');
            self.grid.$root.css('height', (naturalHeight + extraHeight + 2) + 'px');
           // self.grid.refreshDomSizes();
            if (!self.scope.$$phase) {
                self.scope.$apply(function () {
                    self.domUtilityService.RebuildGrid(self.scope, self.grid);
                });
            }
            else {
                // $digest or $apply already in progress
                self.domUtilityService.RebuildGrid(self.scope, self.grid);
            }
        };
        scope.$watch(grid.config.data, recalcHeightForData);

    };
};

Loisloise

doesn't work at all for me: "caught TypeError: Cannot read property 'rowHeight' of undefined". original version works fine. – Hardecanute

Answer 3

I find using this piece of code on the stylesheet solved my problem. I disabled the plugin but it works either way.

 .ngViewport.ng-scope{
    height: auto !important;
    overflow-y: hidden;
}

.ngTopPanel.ng-scope, .ngHeaderContainer{
    width: auto !important;
}
.ngGrid{
    background-color: transparent!important;
}

I hope it helps someone

Noun