Variable row heights and the vertical slider

[jsun01]

I found this 2 unsolved but closed issues #21, #157.
I find your ng-grid super component - all my respect,
but I'd like to reopen the topic of variable row heights, because I think it is a KO feature, which unnecessarily forces many developers to search for another component.
It's a pity, that this nice component is missing the basic feature, which has also e.g. basic html table.
Why there is a cellTemplate feature, when I can't see cellTemplate content of multiple rows ?
Restriction to use cellTemplate only for 1 row narrows the possibilities quite a lot.

I made some hacks to bring it to work and have some suggestions at the end of this text to bring it to ng-grid.

1. custom css to turn on word-wrapping (it's not quit this topic, but it's correlated - whe you have long row, it breaks to multiple)
   .ui-grid-cell-contents {
   white-space: normal;
   }

2. custom css to turn on automatic row height
   .ui-grid-cell {
   height: auto !important;
   }

4. and 2. worked well - rows were wrapped and row heights automatically adapted.
   I didn't found any other problem except of that the vertical slider wasn't shown ok (too low), because it still counted the rowHeight=30.
   So in ui-grid.js (unstable) in var Grid = function Grid(options) { ...
   I added this row
   self.options.rowHeight = options.rowHeightCustom || self.options.rowHeight;�
   Then it was possible to set the rowHeightCustom from Controller to the right value.
   This hack brought to work correctly the vertical slider but only for equal row heights.

At the first look the vertical scrollbar height in ui-grid.js is counted in
function updateNativeVerticalScrollbar() { ... ... rowContainer.getCanvasHeight() ... }
and the getCanvasHeight() itself counts height as:
self.visibleRowCache.forEach(function(row){ ret += row.height; });
And there is the unlucky constantly fixed row.height set to 30.
For variable row heights:
On of the ways to get the row height for each row is e.g. in angular.module('ui.grid').directive('uiGridCell', ...
there is info $elm[0].offsetHeight / $elm[0].clientHeight
So for each row you can get the highest uiGridCell height value and set it as a variable row height (+ margins/padding eventually).
Taking it in account in getCanvasHeight()
self.visibleRowCache.forEach(function(row){ ret += row.variableHeight; });
the scrollbar might work fine.
If this would be settable in column definition with something like:
variableHeight : true;
It could still be kept the old functionality but also introduced the new one - at least for testing by community ;).

I didn't test all cases and situations and had only very short time to investigate it, but at the first glance it doesn't seem to be that much re-work to bring the variable row height to run.
I realize the ng-grid authors know best the background and all the struggle with the code to fix this.
I don't know if the above will navigate to the solution that fits the concept or not - but - maybe it helps as one of the ways ;).

[PaulL1]

The current intended design direction of ui-grid does not include supporting variable row height.

The row virtualisation relies on being able to calculate how many rows are visible, and only render those rows. If the row height were variable, particularly if it were set via the cell template, then we wouldn't know the row height until it had been rendered. We deliberately don't want to render all the rows in order to decide how many rows we want to render.

We could do a partial solution where each row had a specified height, but in general we don't believe that we have a high volume of users who need this feature, v's other important features that are not yet offered such as grouping, drag and drop, and general work on the stability, scroll performance and rendering framework for the grid.

In short, I think that if you're looking for variable row height, then you probably should look at a different component. We're not aiming to be everything to everyone, we're aiming to do our niche very well.

[jsun01]

I see you have other higher prio features on ng grid.
But If we could talk a little about it - a few questions to the implementation if it would sometimes in future come to the order.

It is necesary to render all rows ? It wouldn't be enough to render only visible rows - to check after rendering each row if the total visible rows height exceeded the visible table height (except header, footer) and if yes, then stop rendering ? And after that there is the number and total height of visible rows for virtualization without rendering all rows.

The problem related to it - vertical scrollbar's position and height:
(I mean the position and height of the scrollbars "inner moveable part", not the whole scrollbar) - could ignore the variable heights and consider only simplified - ratio of number of rows "before" - "drawn" - "after" to set scrollbar's position and height.
The scrollbar wouldn't be counted exactly but almost exactly, but the user can't notice it.
E.g. if I have 150 not shown rows before, then 151-159 rows are drawn and then 150 not shown rows after, then the scrollbar's position and height counted this way (ratios or row numbers) could be almost exact - the height might be incorrect for several plus minus pixels, what can be unnoticeable.
And if the scrollbar has some min height, then it's height will be always with more of rows ok, only the position will be "almost exact".
During scrolling would be the position / height always recounted. So the small inaccuracy won't grow.
At the beggining and end it would be recounted to be ok, so the user during scrolling from beggining to end could only (by beeing very careful) notice the small corrections of rows height.
And this might be acceptable.
Or ?

[PaulL1]

It might be acceptable, but as a general concept it's not something that the team are looking at. Remember that we don't only start rendering at the top of the grid, we can start in the middle (you can add data above and below), and there's no reason to assume that the rows you have rendered are the same height as those you haven't.

In short, it's a lot of work for a use case that doesn't really fit in pattern with what the grid is for - it is geared up more for displaying lots of rows the same, not for displaying different sorts of data. There are other techniques and tools for doing that.

[jsun01]

Ok, I see the project priorities and that there is still a lot of other work to do. Thank you for your time.

[azhar2205]

I had a requirement where common/similar values in some grid cells are to be merged. Something like:

Name	Courses
Monica	Maths
	English
Rachel	Physics
	Chemistry
	Biology

(The above table does not show the cells Monica and Rachel merged with the empty cells below them; but lets assume they are).

I implemented it as follows:

1. Changed following templates in ui-grid.js:
   a) ui-grid/ui-grid: Disabled height styling for .ui-grid-row and .ui-grid-cell. Modified height value for .ui-grid-vertical-bar.

  $templateCache.put('ui-grid/ui-grid',
    . . .
    // Disabled following:
    //"    .grid{{ grid.id }} .ui-grid-row, .grid{{ grid.id }} .ui-grid-cell, .grid{{ grid.id }} .ui-grid-cell .ui-grid-vertical-bar {\n" +
    //"      height: {{ grid.options.rowHeight }}px;\n" +
    //"    }\n" +

    // Added following:
    "    .grid{{ grid.id }} .ui-grid-cell .ui-grid-vertical-bar {\n" +
    "      height: {{row.height ? row.height: grid.options.rowHeight}}px;\n" +
    "    }\n" +
    "\n" + 
    . . . 

b) ui-grid/uiGridViewport: Added style for row height (compensation for disabling styling for .ui-grid-row above).

  $templateCache.put('ui-grid/uiGridViewport',
    "<div role=\"rowgroup\" class=\"ui-grid-viewport\" ng-style=\"colContainer.getViewportStyle()\"><!-- tbody --><div class=\"ui-grid-canvas\"> <div ng-repeat=\"(rowRenderIndex, row) in rowContainer.renderedRows track by $index\" class=\"ui-grid-row\" style=\"height: {{row.height ? row.height: grid.options.rowHeight}}px;\"  ng-style=\"Viewport.rowStyle(rowRenderIndex)\"><div role=\"row\" ui-grid-row=\"row\" row-render-index=\"rowRenderIndex\"></div></div></div></div>"
  );

c) ui-grid/ui-grid-row: Added style for cell height (compensation for disabling styling for .ui-grid-cell above).

  $templateCache.put('ui-grid/ui-grid-row',
    "<div ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.uid\" ui-grid-one-bind-id-grid=\"rowRenderIndex + '-' + col.uid + '-cell'\" class=\"ui-grid-cell\" style=\"height: {{row.height ? row.height: grid.options.rowHeight}}px;\" ng-class=\"{ 'ui-grid-row-header-cell': col.isRowHeader }\" role=\"{{col.isRowHeader ? 'rowheader' : 'gridcell'}}\" ui-grid-cell></div>"
  );

2. Used cell template for the split cell:

  $scope.gridOptions = {
    columnDefs: [
      { field: 'name' },
      { field: 'courses' ,
        cellTemplate: '' 
          + '<div>'
          + '  <div ng-repeat="course in row.entity[col.field] track by $index" style=\"height: {{grid.options.rowHeight}}px;\" class="ui-grid-cell-contents" title="TOOLTIP">'
          + '    {{course CUSTOM_FILTERS}}'
          + '  </div>'
          + '</div>'
      }
    ]
  };

3. Set row height for each row:

  $scope.gridOptions.onRegisterApi = function( gridApi ) {
      $scope.gridApi = gridApi;

      $scope.gridApi.grid.registerRowBuilder(function(row, gridOptions) {
          if (angular.isArray(row.entity.courses)) {
              row.height = gridOptions.rowHeight * row.entity.courses.length;
          }
      });
  };

A data like following will be rendered with rows with varying heights:

  $scope.gridOptions.data = [
    {
        "name": "Monica",
        "courses": ["Maths", "English"]
    },
    {
        "name": "Rachel",
        "courses": ["Physics", "Chemistry", "Biology"]
    }
  ];

as follows:

[fatebook1004]

Hi azharak, the above solution is working fine in Chrome.. But not working in IE. Can you please provide a solution for IE...

Waiting for your response..

[doubleac]

For IE use "ng-attr-style" instead of "style"

[fatebook1004]

@doubleac Thanks. It is working fine. Can I know if the above solution works for fixed grid height and external pagination..?

Dynamic row height is actually working, but the problem is there are 61 rows in the grid and only some columns are getting visible. There are lots of space left at the bottom of the grid. On scrolling up and down, some rows are getting visible and invisible.

Can you please help me with this..?

[shamimafridi]

Excelent @azhar2205 your solution worked for me.

[shamimafridi]

@fatebook1004 I also has the same issue you have. did you found any solution?