Horizontal Scrolling of ng-grid - 2.0.11

问题:

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

回答1:

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.

回答2:

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.