Expand specific rows in Angular-ui-grid

Question

I'm using angular-ui-grid 3.0.5 with the treeview extension to display a tree. The data loads normally, everything works as expected, except that expandRow fails silently.

My use case is this: suppose we have a path like a > b > c and I need c shown to the user as preselected. I know the selection is correctly done because when I manually expand the parent rows, the child row is indeed selected.

Should I call expandAllRows, all rows would be expanded. However, calling expandRow with references on rows a and b taken from gridOptions.data leads to nothing happening: all rows will remain collapsed.

Is there any precaution to be taken that I have maybe overlooked, or is this a bug?

There's one mention in a closed issue that may be related to this but problem I'm having, but I'm not even sure it's related, given how dry the comment/solution was.

There's no example of using expandRow in the documentation but it's in both the API and the source code.

alfalfasprossen · Accepted Answer · 2016-05-24 10:23:19Z

The gridRow objects mentioned in the documentation http://ui-grid.info/docs/#/api/ui.grid.treeBase.api:PublicApi are not the elements you put into the data array (though this seems to be not explained anywhere).

What the function expects is an object that the grid creates when building the tree, you can access them by looping through the grids treeBase.tree array. This will only be valid when the grid has built the tree, it seems, so it is not directly available when filling in the data, that's why registering a DataChangeCallback helps here https://github.com/angular-ui/ui-grid/issues/3051

// expand the top-level rows
// https://github.com/angular-ui/ui-grid/issues/3051
ctrl.gridApi.grid.registerDataChangeCallback(function() {
  if (ctrl.gridApi.grid.treeBase.tree instanceof Array) {
    angular.forEach(ctrl.gridApi.grid.treeBase.tree, function(node) {
      if (node.row.treeLevel == 0) {
        ctrl.gridApi.treeBase.expandRow(node.row);
      }
    });
  }
});

Nomair Ghanem · Accepted Answer · 2018-07-12 17:25:15Z

0

  self.onContentReady = function (e) {
        e.component.expandRow(e.component.getKeyByRowIndex(0));
        e.component.expandRow(e.component.getKeyByRowIndex(1));
    };

selec which row you wanna expand

answered Jul 12, 2018 at 17:25

Nomair Ghanem

5644 silver badges12 bronze badges

Collectives™ on Stack Overflow

Expand specific rows in Angular-ui-grid

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related