Horizontal Scrolling of ng-grid - 2.0.11

2
votes

I have a ng-grid in my application. The height and width of the grid is given as auto. I have option to add the column dynamically to the grid. When the number of columns is less there is no problem. But if there is more number of columns then instead of getting Horizontal scrollbar my columns are shrinked in size and all the columns appear in a dirty manner in my grid. The width of the grid is not altered and all the columns are shrinked to fit the grid. What i am missing to get horizontal scrollbar.

Edit: The above is my original question. Now i am able to get horizontal scrollbar. But only certain columns are visible. When i scroll right i am getting empty grid. The last few coulmns are not binded to ng-grid. Only the columns that are fit to ng-grid without scrolling are binded. Any solution please !

Note: I am using ng-grid 2.0.11. Is the version is having this bug?

https://github.com/angular-ui/ng-grid/issues/2071

2
c#css.netangularjsng-grid
Can you post your code? I think the problem is with the width auto, this causes the cols to be shrinked. You can try with fixed width of the grid (100% ?) with overflow-x: auto and fixed width for the cols – peppeocchi

2 Answers

3
votes

If you want to add horizontal scroll bar in case adding extra column add columnDefs like following:

  $scope.gridOptions = {
    data: 'myData',

    columnDefs: [{ field: "<fieldname>", width: 120},
                { field: "<fieldname>", width: 120 },
                { field: "<fieldname>", width: 120 },
                { field: "<fieldname>", width: 120 }]
  };

If the (Total columns*column width) is greater than the width of the ng-grid table which declared in the css part This will give you horizontal scroll bar.

angularJS using the .gridStyle class for the ng-grid by default.

Reference : ng-grid

You can also check here in the Column pinning example : columnDefs example with pinning

In case if there is no columnDefs then columns are trying to auto-fit in to the existing table width so in result the columns are shrinked.

0
votes

I have similar issue and followed these two steps:

The width of each column should be given in px format only. There will be some issue if it is given in %format.

The ng-grid.css have to be updated to have .ngviewport class with overflow:auto. In my project .ngviewport did not have overflow and this too was a reason for the issue.