CODEWITHSUNDEEP
javascriptangularjsangular-ui-grid
Eric
Eric

Reputation: 6352

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

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?

Upvotes: 1

Views: 7163

Answers (2)

SaiGiridhar
SaiGiridhar

Reputation: 886

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);
  });

Upvotes: 6

Romesh
Romesh

Reputation: 2274

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);
      }
    }
});

Upvotes: 0

Related Questions