How to make Angular ui grid expand all rows initially?


I am using ui grid to show a list of data and I am trying to initially expand all rows.

I am trying to do this in the onRegisterApi event:

scope.GridOptions =
            data: properties,
                { 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) => 
                scope.gridApi = gridApi;
                gridApi.expandable.on.rowExpandedStateChanged(scope,(row) =>
                    if (row.isExpanded) {
                        this.scope.GridOptions.expandableRowScope = row.entity;


But the code above does not work. It looks like when I call expandAllRows() the rows are not rendered yet.


I find I can expand all rows by using rowsRendered event:

gridApi.core.on.rowsRendered(scope,() => {
        if (!gridApi.grid.expandable.expandedAll && !initialized)
            initialized = true;

I have used a variable initialized to identify if this is the first time rows are rendered as I only want to expand all rows initially.

Answered By – Yang Zhang

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.