3

I have been using ui-grid for some time now. Recently I encountered a issue with the grid wherein if I pass a slightly large set of data (say 50 rows), the grid do not display them all.

When I debug and look for my $scope.gridOption.data object it seems to contain all the element but still only a few (about 10) are displayed.

When I try sorting by clicking headers, a few more rows appear. (1 or 2 sometimes)

This is not regular and has no pattern. It occurs randomly for different data sets.

I am using ui-grid - v3.2.6 and I have a div for grid-table with a max-height and scroll otherwise. I am having multiple such grids on a page with similar implementation but this issue seems to appear currently on a certain grid.

I could draft a plunker but it would not really help as this issue is random and also I have a basic ui-grid implementation.

I followed this link https://github.com/angular-ui/ui-grid/issues/424, however I could not understand much out of it and I am still stuck.

Seems like this is a known and unfixed bug. But is there any working solution for this ???

Any help is appreciated..

Saurabh Tiwari
  • 4,632
  • 9
  • 42
  • 82

3 Answers3

6

You can set this $scope.gridOptions.excessRows to how much ever rows you want to show, by default this value is set to 4 in ui-grid.

Anon
  • 106
  • 4
  • I am not sure if it is set to 4. Currently I do not have any such setting and the grid still shows 10-12 rows pretty well. Also Is this a way for pagination in ui-grid. Any references? – Saurabh Tiwari Oct 13 '16 at 05:36
  • What you can do is, if you have total rows 20. Set this $scope.gridOptions.excessRows as 20 explicitly while populating the data. Then it will show 20 rows by default. Ui-grid pagination is in alpha state, you can verify in below url. http://ui-grid.info/docs/#/tutorial/214_pagination – Anon Oct 13 '16 at 23:17
  • I do not have a fix number of rows, the data is dynamic and I expect whatever is the number of rows, all of them should be displayed. – Saurabh Tiwari Oct 14 '16 at 06:28
  • Yes, whenever you get the data from backend, you can assign that number to it dynamically. No need to hardcode. Take the total count and assign it to $scope.gridOptions.excessRows. That should resolve the issue. – Anon Oct 14 '16 at 21:20
5

I have faced the same problem and it happened if the number of rows are greater than 45 in my case .Found that setting the self.gridOptions.virtualizationThreshold = data.length + 1; on gridOptions fixed my issue. VirtualizationThreshold must be greater than or equal to the number of rows.

Credit goes to https://github.com/angular-ui/ui-grid/issues/860

emanuel.virca
  • 598
  • 1
  • 6
  • 13
0

Setting the virtualizationThreshold to number of rows in data + 1 will work, but that will have performance issue if there are lot of rows.

I did not change the virtualizationThreshold, instead I set the rowHeight and the minRowsToShow. FYI: the default value for virtualizationThreshold in my case was 20.

Following setting worked for me:

        $scope.gridOptions = {
            rowHeight: 20, // set this as number and NOT string
                           // even though the documentation says so.
                           // If its set as string, the issue of 
                           // all the rows not getting displayed will appear.
            minRowsToShow: 18, // this sets the height of the grid 
            ...

minRowsToShow adjusts the height of the grid. rowHeight was also required. Without setting the rowHeight, I had the issue again. Maybe the virtualization algorithm needs rowHeight and minRowsToShow.

Link to the documentation of ui grid options: http://ui-grid.info/docs/#!/api/ui.grid.class:GridOptions

Sharath
  • 516
  • 1
  • 8
  • 19