标签: ag-grid-angular

I'm using Ag-Grid and Angular for this project, and what I'm trying to do is set up shortcut keys to change the 'Status' value of selected rows by pressing associated keys('1'= 'status complete', etc.). There is a built in function called onCellKeyPress() that listens for keystrokes after a row, or rows, has been selected. That's working great, I have a switch case that sends off a value depending on which key is pressed like so:

  onCellKeyPress = (e: any) => …

我正在尝试在 ag-grid table cell 中添加一个简单的组件。我在 aggrid 网站中流动指令，但它不呈现组件。这是我的代码：

  columnDefs = [
{ headerName: "Name", field: "name" ,width: 400},
{ headerName: "GoodsFinalCode", field: "goodsFinalCode" ,width:  200},
{ headerName: "operation", field: "operation" ,cellRendererFramework: OperationComponent, width: 450} 
];


rowData  = [ {
      name : 'b',
      goodsFinalCode :6,
 }
 ]

gridoptions 是：

  this.gridOptions = <GridOptions>{
  rowData: this.rowData,
  columnDefs: this.columnDefs,
  context: {
      componentParent: this
  },
  enableColResize: true

};

组件是：

        import { Component } from '@angular/core';

        @Component({
        selector: 'app-operation',
        templateUrl: './operation.component.html',
        styleUrls: ['./operation.component.scss']
        })

     export class OperationComponent …

1. 我创建了 AgGrid 数据表，其中 AgGrid Cell 包含一个自定义对象
2. 该对象具有一些属性，例如名称、颜色、锁定等。
3. 我正在使用 customCellRenderer 和 customCellEditor
4. 现在，我必须将一个单元格数据复制到其他单元格数据。

我尝试过 AgGrid 公开的以下方法

 processCellFromClipboard = function(params) {
console.log(params.value);
return  params.value;}

  processCellForClipboard = function(params) {
    console.log(params.data);
    return  params.value;
  };

FromClpboard 方法正在提供对象，但我无法在 processCellFromCliboard 中查看相同的视图。有没有其他方法可以实现自定义对象的复制粘贴。任何想法或样品都会有帮助吗？

目前正在评估 AgGrid 企业版自定义对象复制粘贴的可行性。

使用 ag-grid 和 ng7，我创建了一个自定义工具提示组件，将其绑定到列定义 tooltipComponent，以及 headertooltip 和 headername。当我将鼠标悬停在标题上时，console.log会调用 from agInit，但不会呈现模板

基于官方的 ag-grid 工具提示指南，有一种方法getGui可以渲染 html。也试过了，悬停在标题上时没有显示。

    <ag-grid-angular
      #agGrid
      [frameworkComponents]="frameworkComponents"
      ...
    ></ag-grid-angular>

    headerName: 'Atheltes`
    tooltipComponent: 'customTooltip',
    headerTooltip: 'Helper text should show here'
    this.frameworkComponents = { customTooltip: CustomTooltipComponent };

@Component({
    selector: 'ffp-tooltip-component',
    template: `<div>It should show helper text</div>`,
})
export class CustomTooltipComponent implements ITooltipAngularComp {
    agInit(params: ITooltipParams) {
       console.log('this console log works!!')
       // console.log above gets called, however, no template is shown.
    }

    getGui(): any {
    }
} …

我正在使用 ag-grid (angular)，我想将选择的行导出到 CSV 或 Excel。从我对文档的研究来看，此功能似乎只能使用外部按钮（图像上的黄色）而不是表格内部的导出（图像中的红色下划线）。

这是否可以通过表格本身导出选定的行（图像中的红色下划线）？

我正在想象表格中的多选功能，如果我没有选择任何元素，那么 ag-grid 导出所有数据，如果我选择了一些元素，那么 ag-grid 只导出选定的元素。

我从18 版开始使用ag-grid，目前是 20.0.0

我正在升级到其最新版本 - 22.1.1。

解决由于重大更改而导致的警告/错误后，一切（包括“ng serve”）都可以正常工作。

但是，当我尝试在 prod 模式下构建 angular 应用程序时，它失败了。

./app/app.module.ngfactory.js 中的
错误未找到模块：错误：无法解析 'C:\project\src\app'ERROR 中的 'ag-grid-community/dist/lib/eventService'。 /main.ts
未找到模块：错误：无法解析“C:\project\src”中的“ag-grid-enterprise/main”

下面是我得到的控制台日志。有人可以帮忙吗？

PS C:\projectDirectory> npm run build:prod

> project@0.0.1 build:prod <C:\projectDirectory>
> node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng build --prod --base-href ./

Browserslist: caniuse-lite is outdated. Please run next command `npm update`

Date: 2020-02-06T14:34:51.950Z
Hash: f5504506298058ba661b
Time: 303119ms
chunk {0} runtime.0feced4b926ef4569891.js (runtime) 2.35 kB [entry] [rendered]
chunk {1} 1.ff56049eefdf00546e5b.js () 20.1 kB [rendered]
chunk {2} common.778967e60acae82560b8.js (common) 1.59 kB [rendered]
chunk …

第一次写在这里，如果我做得不对，请道歉。在将值导入 React 中的 AG 网格时，我尝试将字符串的值类型更改为整数。为了做到这一点，我创建了这个列标题：

 {
    headerName: "calc inline clicks",
    field: "adsetstats_inline_link_clicks",
    aggFunc: "sum",
    valueGetter: params => {
        return parseInt(params.data.adsetstats_inline_link_clicks_0days_ago);
    }
  }

然后我运行：

this.setState({ rowData })

然而，当我运行这个时，React 给出了以下错误：

错误：ag-Grid：当网格位于绘制行的中间时，无法让网格绘制行。当网格处于渲染阶段时，您的代码可能调用了网格 API 方法。为了克服这个问题，请将 API 调用设置为超时，例如，调用 setTimeout(function(){api.refreshView(),0})，而不是 api.refreshView()。要查看代码的哪一部分导致刷新，请检查此堆栈跟踪。

知道如何解决这个问题吗？我所做的一切似乎都不起作用。

谢谢，加布里埃尔

我想将 ag-grid 的数据复制到剪贴板并格式化。我可以复制没有格式/样式的数据。

ag-grid 是否提供此功能，以便我也可以复制数据格式。我正在 ag-grid(Angular) 中尝试将日期粘贴到 Excel 中。

最好的问候，卡利姆

我希望我的 AG-Grid 列具有垂直边框。默认情况下，网格行具有水平边框。我希望它模仿常规 Excel 电子表格的外观和感觉。

我曾尝试在列定义中使用单元格样式，如下所示：

this.columnDefs = [
  { headerName: 'Test', cellStyle: {'border-right-color': '#e2e2e2'}, field: 'test' }];

这就是诀窍。但是当我点击一个单元格进行编辑时，它放在活动单元格上的蓝色边框被上面的单元格样式覆盖，所以我得到一个带有 3 个蓝色边框和 1 个灰色边框的单元格。

这不是解决这个问题的正确方法......

有人有任何想法吗？我试图做一些 CSS 样式，但一无所获，因为找出要覆盖的类似乎非常困难。

根据 ag-grid，列顺序将遵循它们在列定义中指定的顺序。参考

但这在使用 ag-grid-angular 时不起作用。一些列首先显示，即使它们是在列定义的末尾指定的。看一些示例代码，

// grid.ts
// helper function to generate a definition of a single column
function generateColDef() {
    return { ... };
}

// helper function to dynamically generate ColDefs
export function getColDef(someArgs) {
    const someDynamicCols = someArgs.map((arg) => {
        return generateColDef(.....);
    })
    const colDefs = [
        slColumn,   // A column to show serial number
        generateColDef('id', 'ID', {
            editable: false,
        }),
        generateColDef('name', 'Name', {
            editable: false,
        }),
        ...someDynamicCols,
    ];
    return colDefs;
}

// html
<ag-grid-angular [columnDefs]="colDefs" …