how to pre-set column filter in ag-grid

时间:2018-03-23 11:56:39

标签: ag-grid ag-grid-ng2

I have an Ionic/Angular app using ag-grid. I would like certain grids to have a filter automatically applied when the grid is loaded - without the user having to do anything.

I tried the following:

onGridReady(params) {
  params.api.sizeColumnsToFit();
  // get filter instance
  var filterComponent = params.api.getFilterInstance("isActive");
  // OR set filter model and update
  filterComponent.setModel({
    type: "greaterThan",
    filter: 0
  });
  filterComponent.onFilterChanged();
}

but it did nothing. Any ideas?

5 个答案:

答案 0 :(得分:4)

在他们的几个例子中重复你的问题,似乎通过添加一个小延迟来缓解。只是冒险猜测DOM可能还没有完全准备好,尽管网格是。

修复:

onGridReady(params) {
params.api.sizeColumnsToFit();

setTimeout(() => {
    var filterComponent = params.api.getFilterInstance("isActive");
    filterComponent.setModel({
      type: "greaterThan",
      filter: 0
    });
    filterComponent.onFilterChanged();
    },150)
}

答案 1 :(得分:4)

我最终这样做了。

var FilterComponent = gridOptions.api.getFilterInstance('Status');
FilterComponent.selectNothing(); //Cleared all options
FilterComponent.selectValue('Approved')  //added the option i wanted
FilterComponent.onFilterChanged();   

答案 2 :(得分:1)

我认为问题是,当加载新行时,网格会重置过滤器。有多种方法可以解决这个问题:

  1. 预定义过滤器类型有一个名为 newRowsAction 的过滤器参数 https://www.ag-grid.com/javascript-grid-filter-text/#params

      

    newRowsAction :加载新行时该怎么做。默认设置是重置过滤器。如果要在行加载之间保持过滤器状态,请将此值设置为“保持'。

  2. This回答建议设置gridOptions属性deltaRowDataMode=true

  3. 您还可以侦听网格日期更改时发出的网格事件之一,然后应用过滤器 https://www.ag-grid.com/javascript-grid-events/#miscellaneousrowDataChanged, rowDataUpdated
  4. 这些都应该在数据发生变化时保留过滤器但我认为如果只想在第一次加载时使用过滤器,还需要一些额外的逻辑(设置一个标志)。

答案 3 :(得分:1)

就我而言,当网格加载时,我需要恢复Ag-Grid的Set Filter。受公认的答案启发,我的理解是只能在网格数据准备好后才能访问过滤器实例api(不是gridReady),因为它需要聚合行数据以填充其过滤器列表。

因此,正如@Fabian的答案中的第3条建议,我在行数据更改时设置了事件侦听器。

您还可以侦听网格日期更改时发出的网格事件之一,然后应用过滤器https://www.ag-grid.com/javascript-grid-events/#miscellaneousrowDataChanged, rowDataUpdated

在类似的用例中,我认为这比在访问过滤器实例之前设置任意超时编号更好,因为它可能导致结果不一致。

答案 4 :(得分:0)

v24.0.0

实现此目的的最佳方法是在firstDataRendered回调中应用默认过滤器。

例如

onFirstDataRendered(params) {
   //... apply your default filter here
}