标签: ag-grid-angular

使用 Angular 4（打字稿），我有一些使用 ag-grid 12.0.2 的代码，如下所示。我要做的就是加载我的网格并自动（以编程方式）选择第一行。

:
this.gridOptions = ....
    suppressCellSelection = true;
    rowSelection = 'single'
:

loadRowData() {
    this.rowData = [];
    // build the row data array...
    this.gridOptions.api.setRowData(this.rowData);

    let node = this.gridOptions.api.getRowNode(...);
    // console logging here shows node holds the intended row
    node.setSelected(true);
    // console logging here shows node.selected == true

    // None of these succeeded in highlighting the first row
    this.gridOptions.api.redrawRows({ rowNodes: [node] });
    this.gridOptions.api.redrawRows();
    this.gridOptions.api.refreshCells({ rowNodes: [node], force: true });

选择了第一个节点，但该行拒绝在网格中突出显示。否则，鼠标行选择工作得很好。此代码模式与此处的示例代码相同：https : //www.ag-grid.com/javascript-grid-refresh/#gsc.tab=0 但它不起作用。 …

我尝试使用 Ag-Grid，并面临着绘制特殊符号数据的挑战，它实际上不支持特殊符号并且不绘制它！

请参阅Example1.png，这里的No. Column不包含数据，但是当我从script.js文件中的headerName和rowData中删除点运算符时，它开始绘制它。（参考示例2.png）

另外附上一个zip文件（Google Drive Link）作为这个问题的原型供大家参考！ https://drive.google.com/open?id=1UqyrRtAhg8-HBwqVqUT_CGMhwyr_cOUT

库夏格拉

我将 ag-grid 与 Angular v7 一起使用，但我在使用值解析器时遇到了一些问题，我想将其与自定义单元格编辑器一起使用。

当我声明自定义单元格编辑器值解析器似乎被简单地忽略了。我将它硬编码为始终返回相同的值，无论参数如何，它都会这样做 - 当我从列定义中删除 cellEditor 时。一旦声明了自定义编辑器，解析器似乎不再工作 - 它对保存的值没有任何影响。它甚至没有被调用 - 我试图在其中记录一些东西，当自定义编辑器在那里时，它在控制台中不可见。

如果我错了，请纠正我，但这不是预期的行为，或者是吗？Cell Editing 文章中提到了文档中的正弦值解析器和设置器，所以我认为它们应该一起工作。

我想在将值导出到 CSV 之前对其进行格式化。为此，我使用了代码示例中所示的 processCellCallback。当我包含回调时，我的 ag-grid 中的每个单元格都会得到空字符串而不是单元格值。为此，我在导出之前遵循了 ag-grid 站点https://www.ag-grid.com/javascript-grid-export/和 StackOverflow 文章Ag-grid angular format data上的示例

出于调试目的，我将除返回之外的所有内容都注释掉并包含了一个 console.log

单元格值写在日志中，但我的导出 CSV 只有空列。我删除了参数中的 processCellCallback 值被正确导出。

ExportToCsv(gridApi: any, exportFileName: string){
    var params = {
      fileName: exportFileName
      ,columnSeparator: ';'
      ,processCellCallback: (params) => {this.processCells(params)}
    }
    gridApi.exportDataAsCsv(params);
  }
  processCells(params: any) {
    console.log(params.value);
    return params.value;
  }

我的网格中有一些代码，我试图防止双击事件导致树行展开/折叠，但我在任何地方都找不到如何执行此操作的文档。我想这样做的原因是，当我双击单元格时，我想让它可编辑，但由于一些技术上的需要，我需要gridApi.redrawRows()在折叠/展开发生时运行，这会导致编辑字段失去焦点，这意味着我永远无法通过双击来实际编辑单元格。

我正在使用以下 ag-grid 模块版本

"ag-grid-angular": "^22.1.1",
"ag-grid-community": "^22.1.1",
"ag-grid-enterprise": "^22.1.1"

我的网格中的相关 html 看起来像这样

<ag-grid-angular
        #agGrid
        class="ag-theme-balham"
        [modules]="modules"
        [columnDefs]="columnDefs"
        [rowData]="rowData"
        [treeData]="true"
        (rowGroupOpened)="onRowGroupOpened($event)"
        (cellDoubleClicked)="handleCellDoubleClicked($event)"
        [getDataPath]="getDataPath"
        [defaultColDef]="defaultColDef"
        [frameworkComponents]="frameworkComponents"
        [autoGroupColumnDef]="autoGroupColumnDef"
        (gridReady)="onGridReady($event)"
        [getRowNodeId]="getRowNodeId"

      >
</ag-grid-angular>

在我的组件文件中，负责以树格式自动分组行的特定列如下所示

ngOnInit() {
   this.autoGroupColumnDef = {
      editable: this.isAllowedtoEdit,
      headerName: "Account #",
      sortable: true,
      lockPosition: true,
      resizable: true,
      field: "accountNum",
      filter: "agGroupCellRenderer",
      cellRendererParams: {
        suppressCount: true,
        innerRenderer: 'AccountNameColumnDisplayer',
      },
    };
}

处理双击单元格的函数是这样的：

handleCellDoubleClicked(cell) {
    if(cell.column.colDef.field === 'accountNum') {
      cell.event.stopPropagation();
      return false;
    }
  }

我的handleCellDoubleClicked()功能似乎没有做任何事情。它运行，但当我双击时该行仍然展开/折叠。

我什至尝试过这个只是为了看看它会做什么，它导致了一些非常奇怪的行为发生

handleCellDoubleClicked(cell) { …

如何在 Ag-Grid 单元格中包含基本 HTML 元素。

下面是我的 html PrimeNg p-dropdownMyComponent.html

<p-dropdown [options]="cars" [(ngModel)]="selectedCar" (click)="doSomething()" [style]="{'width':'150px'}"></p-dropdown>

现在 ag-grid 用于将上面的 p-dropdown 包含在其中一个单元格中

<ag-grid-angular #agGrid style="width: 100%; height: 350px;" class="ag-theme-alpine"
[gridOptions]="gridOptions"
[rowData]="rowData"
[columnDefs]="columnDefs">
</ag-grid-angular>

下面是代码MyComponent.ts

 this.columnDefs= [{
    headerName: 'Type',
    field: 'type',
    editable: true
   },
   {
    headerName: 'DropdownColumn'
    field: 'ddValue',
    cellEditor:'agRichSelectCellEditor',
    cellEditorParams: function(params) {
    
    },
    cellRenderer: function(params) {
     'What to do here'
    }
]

如何在任何 Ag-Grid 单元格中包含 Angular 的任何 HTML 元素（包括 ng-model + 单击功能）

在我的网格中，我有这个专栏：

  {
      headerName: "Generic/Specific",
      field: "genericspecific",
      id: "6",
      cellRenderer:'genericSpecificCellRenderersComponent',
      cellStyle: params => {
        const colors: string[] = ["red", "orange"];
        const genericSpecific: string[] = ["Generic", "Specific"];
        return {
          "background-color": colors[genericSpecific.indexOf(this.selectedOptions[params.node.id])]
        };
      }
    }

如您所见，它有一个自定义的 Cell Renderer。这是它的定义：

 @Component({
  selector: "app-generic-specific-renderers",
  template: `
    <hr />
    <select class="form-control" id='0' (change)="updateChosenValue($event.target); refresh(params)">
      <option >{{ selectedOptions[params.node.id] }}</option>
      <option >Specific</option>
      <option >Generic</option>
    </select>
    <hr />
  `
})
export class GenericSpecificCellRenderersComponent implements OnInit {
  updateChosenValue(event) {
    if (event.value==='Specific'){
      this.selectedOptions[this.params.node.id]='Specific'
    }
    else if (event.value==='Generic'){
      this.selectedOptions[this.params.node.id]='Generic'
     }
    }
  selectedOptions:string[]=[];
  constructor(private …

我正在尝试在我的Ionic 4/Angular 8应用程序中对 ag-Grid 中的列使用自定义排序。

我在这里有一个示例应用程序，或者在Stackblitz 上我无法让它在 Stackblitz 上运行，但它肯定在本地运行，

无论如何，有几件事需要注意的是，我希望网格在虚拟模式下运行（例如可能有 1000 行数据），而且我已经设置this.gridOptions.immutableData = true;为处理来自ng/rx.

此外，我使用一个组件作为单元格模板，但我认为我们可以在这里忽略它（使用现有示例）

我希望对行进行排序，因此调用我的dateComparator函数

• 当我第一次加载数据时
• 如果我添加或更新了任何数据

为了模拟来自服务器的新数据，我有一个调用该add方法的添加按钮。

我comparator在列上添加了一个...

        public ngAfterViewInit(): void {                
            const self = this;
            this.gridOptions.immutableData = true;
            this.gridOptions.animateRows = true
            this.gridOptions.api.setColumnDefs([
            {
                    headerName: 'myheader',
                    comparator: self.dateComparator,
                    sortable: true,
                    field: 'equipment',
                    cellStyle: { padding: 0 },        
                    cellRendererFramework: TemplateRendererComponent,              
                    cellRendererParams: {
                        ngTemplate: this.itemCard
                    },        
                },
            ]);

            this.setData();
            }

    private dateComparator(valueA, valueB, nodeA, …

在 ag-Grid 中，我想在像 Gmail 一样悬停一行时显示操作按钮。无论滚动位置如何，操作按钮都必须出现在网格的右端。

https://blog.ag-grid.com/build-email-client-with-ag-grid-like-gmail/提到了一种方法。他们在最后一列使用了 cellRenderer 并在“onCellMouseOver”发生时在其中显示按钮。只有当最后一列（使用 cellRenderer）始终在视图中时，此方法才有效。如果该列不在视图中，操作按钮也将不在视图中。

我不能使用这种方法，因为在我的情况下，有很多列，并且网格中的所有列不能同时显示在屏幕上。因此，根据滚动位置，右端可以有任何列，因此我们不知道要在哪一列上添加 cellRenderer。

我们将如何实现这一目标？

编辑：这是我的问题的一个plunkr

Ag-Grid 提供了在提供的过滤器下设置 4 个按钮的选项。这些是应用、清除、重置和取消按钮。这是一个例子。我试图在提供的数字过滤器上显示应用和重置按钮，但它没有显示。过滤器工作正常，但按钮没有出现。

这是我的列定义：

filter: 'agNumberColumnFilter',
filterParams: {
    buttons: ['apply', 'reset']
},

这是它的外观。没有按钮显示

注意：我正在使用带有Angular 9 的Ag-Grid 23.0.0社区版。