ng-grid is not displaying all columns on initial load

Question

In my application, I am using ng-grid and I need to display 12 columns and huge data. But the ng-grid is not displaying all columns on initial load. If i do any slight changes to the columns by resizing it's displaying the data. Is there any way to display the data on the initial load itself..

Grid definition

 <div ui-grid="gridOptions"
                             ui-grid-selection
                             ui-grid-resize-columns
                             ui-grid-move-columns></div>

Grid Data bind

                        $http.post('/api/search')
                        .success(function (data) {
                            $scope.gridOptions.data = data.Items;

                            if (data.Items.length == 0) {
                                $timeout(function () { notificationService.error("not found"}, 50);
                            }
                            else if (data.Items.length != 1) {
                                $alert.InlineWide('#' + $scope.modalId);
                            } else {
                                broadcast(data.Items[0]);
                            }
                            $(window).resize();                                
                        }).error(function (msg) {
                            notificationService.formattedError(msg);
                        });

sample Grid column definition:

                   $scope.gridOptions = {
                    columnDefs: [
                        {
                            field: 'Number',
                            displayName: 'number',
                            minWidth: 50,
                            sort: { direction: 'asc', priority: 0 }
                        },..],
                    onRegisterApi: function (gridApi) {
                        gridApi.selection.on.rowSelectionChanged($scope, afterSelectionChange);
                    },
                    enableRowSelection: true,
                    enableRowHeaderSelection: false,
                    multiSelect: false,
                    enableColumnResize: true,
                    enableColumnMenus: false,
                    plugins: [new ngGridFlexibleHeightPlugin()]
                };

can you provide code related to issue? – Gaurav Kumar Singh Apr 20 '17 at 08:29 — Gaurav Kumar Singh, Apr 20 '17 at 08:29
I added the sample code used.. @Gaurav – Northstar Apr 20 '17 at 08:54 — Northstar, Apr 20 '17 at 08:54
which version of ng-grid are you using? – Gaurav Kumar Singh Apr 20 '17 at 09:32 — Gaurav Kumar Singh, Apr 20 '17 at 09:32
* ui-grid - v3.2.9 - 2016-09-21 – Northstar Apr 20 '17 at 14:05 — Northstar, Apr 20 '17 at 14:05

score 0 · Accepted Answer · answered Apr 26 '17 at 14:33

I have fixed the issue by setting the width, height, and fill-remainder-min-height of the grid

<div ui-grid="gridOptions"
                             style="width:855px; height:300px"
                             ui-grid-selection
                             ui-grid-resize-columns
                             ui-grid-move-columns
                             fill-remainder-min-height="300"></div>

ng-grid is not displaying all columns on initial load

1 Answers1