How to make Angular ui grid expand rows initially based on data?

Question

I am using ui-grid to show a list of data and on display of the grid I am trying to expand some of the rows depending on the data.

I am trying to do this in the onRegisterApi event:

scope.GridOptions = {
    data: properties,
    columnDefs: 
    [
        { name: "Full Address", field: "FullAddress" },
        { name: "Suburb", field: "Suburb" },
        { name: "Property Type", field: "PropertyType" },
        { name: "Price", field: "Price", cellFilter: 'currency'},
        { name: "Status", field: "Status" },
        { name: "Sale Type", field: "SaleType" }, 
        { name: "Date Created", field: "CreateDate", cellFilter: "date:'dd/MM/yyyy HH:mma'"}
    ],
    expandableRowTemplate: 'template.html',
    expandableRowHeight: 200,
    onRegisterApi: (gridApi) => 
    {
        gridApi.expandable.expandAllRows();
    }
};

The problem is gridApi.expandable.expandAllRows() expands all of the grouped sections. I see there is a expandRow function, but I am not sure how to use it in place of the expandAllRows function. I really would like to expand the group that has the column Status set to a particular value. Can someone help me figure this out?

potatopeelings · Accepted Answer · 2018-03-27 03:49:22Z

6

Here is a way to handle expanding of selective rows. I have created a Plunker link (http://plnkr.co/edit/CSaROQqKxYnkoxm2Tl6b?p=preview) where I am expanding all the even rows. In a similar way, you can iterate over the array and expand the required rows.

Include:
"$timeout" dependency in the controller

To expand first row:

$timeout(function() {
    var rows = $scope.gridApi.grid.rows;
    var entity = (rows.length && rows[0]) ? rows[0].entity : null;
    $scope.gridApi.expandable.toggleRowExpansion(entity);
  });

edited Mar 27, 2018 at 3:49

potatopeelings

41.2k8 gold badges97 silver badges121 bronze badges

answered Nov 6, 2015 at 12:42

SaiGiridhar

8861 gold badge13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Eric Over a year ago

Good answer. It helped me figure out where I need to go in my code, but it doesn't check the existing data values of each row. Can you update you answer to include this? Also, why did you use the $timeout function?

SaiGiridhar Over a year ago

What do you mean by existing values? I understood them as the values that are in the array at the time of rendering the table.

Eric Over a year ago

Yes, that is exactly what I am looking for. Your example uses the index and none of the data from the model

SaiGiridhar Over a year ago

Your data is nothing but rows. You can access each row content using rows[i].entity.name, rows[i].entity.phone etc.

Ankit Sahu Over a year ago

it is giving me this error: cnl.ctrl.js:74 Uncaught TypeError: Cannot read property 'toggleRowExpansion' of undefined

|

Romesh · Accepted Answer · 2015-12-28 12:58:40Z

0

May be I am late to answer. But it may help others.

I have taken the same plunker example as SaiGiridhar posted, but modified

$timeout(function() {
    var rows = $scope.gridApi.grid.rows;
    for(var i=0; i < rows.length; i++){
      if(i%2 === 0){
        var entity = (rows.length && rows[i]) ? rows[i].entity : null;
        $scope.gridApi.expandable.toggleRowExpansion(entity);
      }
    }
});

to

$scope.$$postDigest(function() {
    var rows = $scope.gridApi.grid.rows;
    for(var i=0; i < rows.length; i++){
      if(i%2 === 0){
        var entity = (rows.length && rows[i]) ? rows[i].entity : null;
        $scope.gridApi.expandable.toggleRowExpansion(entity);
      }
    }
});

answered Dec 28, 2015 at 12:58

Romesh

2,3023 gold badges25 silver badges48 bronze badges

1 Comment

Eric Over a year ago

What is the benifit of using $$postDigest?

Collectives™ on Stack Overflow

How to make Angular ui grid expand rows initially based on data?

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related