AG 网格自定义工具面板 - 捕捉网格就绪事件

Question

我实现了一个自定义工具面板，允许用户使用用户定义的名称将列和过滤器状态保存到浏览器本地存储，还可以在名称列表中进行选择以重新加载这些列和过滤器设置。这一切都运行得相当好。

问题是，我希望用户能够选择保存的“视图”并将其标记为“初始视图”，该视图将在页面加载时自动选择。 我遇到的问题是，当我尝试应用列和过滤器状态时，网格尚未准备好，并且我尚未确定如何从工具面板中捕获“GridReadyEvent”或“FirstDataRenderedEvent”。

我不确定如何（或是否）可以从自定义工具面板本身向网格添加事件侦听器。我目前的尝试不起作用。

例如：

agInit(params: GridStateMgrToolPanelParams): void {
  this.params = params;
  this.params.api.addEventListener("GridReadyEvent", () => {
    console.log("from GridStateMgrToolPanel: grid ready");
  });
}

Answer 1

以下方法有效，但会导致行数据跳转，因为在网格加载未过滤的数据后应用过滤器。

agInit(params: GridStateMgrToolPanelParams): void {
  this.params = params;
  this.storeName = `grid-state-mgr-${this.params.storage_key}`;
  this.gsmStore = JSON.parse(localStorage.getItem(this.storeName));
  if (this.gsmStore === null) {
    this.gsmStore = new GridStateMgrStore();
  }
  else {
    this.params.api.addEventListener("firstDataRendered", () => {
      let viewToLoad = this.gsmStore.initialView;
      if (viewToLoad != 'Default') {
        let entry = this.gsmStore.views.find(x => x.name == viewToLoad);
        if (entry) {
          // zone issue?
          setTimeout(() => { 
            this.params.api.applyColumnState({
              state: JSON.parse(entry.colState),
              applyOrder: true,
            });
            this.params.api.setFilterModel(JSON.parse(entry.filterModel));
          }, 0);
        }
        else {
          console.warn(`No entry found for ${viewToLoad}`);
        }
      }
   });
 }

}