如何使Angular ui网格最初扩展所有行?

时间:2021-01-13 19:38:10

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

我正在使用ui grid来显示数据列表,我正在尝试初始扩展所有行。

I am trying to do this in the onRegisterApi event:

我试图在onRegisterApi事件中执行此操作:

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

            }
        };

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

但上面的代码不起作用。看起来当我调用expandAllRows()时,行还没有渲染。

5 个解决方案

#1


14  

In my case, the following worked:

就我而言,以下工作:

    $scope.gridOptions = {
      ...
      onRegisterApi: function(gridApi) {
        $scope.gridApi = gridApi;
        $scope.gridApi.grid.registerDataChangeCallback(function() {
          $scope.gridApi.treeBase.expandAllRows();
        });
      }
    };

#2


1  

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

我发现我可以使用rowsRendered事件扩展所有行:

gridApi.core.on.rowsRendered(scope,() => {
        if (!gridApi.grid.expandable.expandedAll && !initialized)
        {
            gridApi.expandable.expandAllRows();
            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.

我使用了一个初始化的变量来识别这是否是第一次呈现行,因为我只想最初扩展所有行。

#3


0  

None of the above worked for me for all of my grid use cases.

对于我的所有网格用例,以上都不适用于我。

        $scope.gridApi.grid.registerDataChangeCallback(function() {
            if($scope.gridApi.grid.treeBase.tree instanceof Array){
                $scope.gridApi.treeBase.expandAllRows();
            }

        });

The following works in every case I have tested. DataChangeCallback is called twice (for some unknown reason) on initial page load. The first time, gridApi.grid.treeBase.tree is an object which causes the issue with gridApi.grid.treeBase.tree.forEach above:

以下是我测试过的每种情况。在初始页面加载时,DataChangeCallback被调用两次(出于某种未知原因)。第一次,gridApi.grid.treeBase.tree是一个导致上面gridApi.grid.treeBase.tree.forEach问题的对象:

#4


0  

None of these answers worked for me, the following did:

这些答案都不适合我,以下是:

scope.gridApi.core.on.rowsRendered(null, () => {
    scope.gridApi.treeBase.expandAllRows();
});

#5


-1  

I assume you use a grid, in which case you can use the option groupsCollapedByDefault: false to expand all items by default.

我假设您使用网格,在这种情况下,您可以使用选项groupsCollapedByDefault:false来默认展开所有项目。

#1


14  

In my case, the following worked:

就我而言,以下工作:

    $scope.gridOptions = {
      ...
      onRegisterApi: function(gridApi) {
        $scope.gridApi = gridApi;
        $scope.gridApi.grid.registerDataChangeCallback(function() {
          $scope.gridApi.treeBase.expandAllRows();
        });
      }
    };

#2


1  

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

我发现我可以使用rowsRendered事件扩展所有行:

gridApi.core.on.rowsRendered(scope,() => {
        if (!gridApi.grid.expandable.expandedAll && !initialized)
        {
            gridApi.expandable.expandAllRows();
            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.

我使用了一个初始化的变量来识别这是否是第一次呈现行,因为我只想最初扩展所有行。

#3


0  

None of the above worked for me for all of my grid use cases.

对于我的所有网格用例,以上都不适用于我。

        $scope.gridApi.grid.registerDataChangeCallback(function() {
            if($scope.gridApi.grid.treeBase.tree instanceof Array){
                $scope.gridApi.treeBase.expandAllRows();
            }

        });

The following works in every case I have tested. DataChangeCallback is called twice (for some unknown reason) on initial page load. The first time, gridApi.grid.treeBase.tree is an object which causes the issue with gridApi.grid.treeBase.tree.forEach above:

以下是我测试过的每种情况。在初始页面加载时,DataChangeCallback被调用两次(出于某种未知原因)。第一次,gridApi.grid.treeBase.tree是一个导致上面gridApi.grid.treeBase.tree.forEach问题的对象:

#4


0  

None of these answers worked for me, the following did:

这些答案都不适合我,以下是:

scope.gridApi.core.on.rowsRendered(null, () => {
    scope.gridApi.treeBase.expandAllRows();
});

#5


-1  

I assume you use a grid, in which case you can use the option groupsCollapedByDefault: false to expand all items by default.

我假设您使用网格,在这种情况下,您可以使用选项groupsCollapedByDefault:false来默认展开所有项目。