[英]ag-Grid Cell Rendering - Custom Props
After looking through the ag-Grid Cell Rendering documentation I don't see a way to add custom properties to the cell renderer via the cellRenderFramework
argument. 在查看ag-Grid Cell Rendering文档后,我没有看到通过
cellRenderFramework
参数向单元格渲染器添加自定义属性的方法。 For example, I'd like to pass in a callback to my custom renderer that is called when the button is clicked. 例如,我想将回调传递给单击按钮时调用的自定义渲染器。
class AddCellRenderer extends React.Component<ICellRendererParams, {}> {
/**
* Callback handle to pass data to on a click.
*/
public static callback = (data: MyData): void => { return; };
public constructor(params: ICellRendererParams) {
super(params);
}
public render() {
let className = 'pt-button pt-intent-success pt-icon-add';
let text = 'Click to add';
if (this.props.data.saved) {
className = 'pt-button pt-intent-danger pt-icon-remove';
text = 'Click to remove';
}
return (
<button type="button" onClick={this.onClick} className={className}>{text}</button>
);
}
private onClick = (event: React.FormEvent<HTMLButtonElement>): void => {
AddCellRenderer.callback(this.props.data);
this.setState({ ...this.state }); // Make React update the component.
}
}
And I have another component that uses it like so 我还有另一个使用它的组件
public render() {
let saveCellRenderer = AddCellRenderer;
saveCellRenderer.callback = this.onSelectData;
const columnDefs: ColDef[] = [
{
headerName: 'Add to Available Data',
cellRendererFramework: AddCellRenderer,
},
...
];
...
}
There must be another way to pass this callback as props other than a static public method which is ugly and will not work when multiple components use the renderer, how do I go about doing this with ag-Grid? 除了静态公共方法之外,必须有另一种方法将此回调作为道具传递,这种方法很丑陋并且在多个组件使用渲染器时无法工作,如何使用ag-Grid进行此操作?
I know this is late. 我知道这已经很晚了。 But have you tried
cellRendererParams
with cellRenderer
? 但你有没有试过
cellRendererParams
与cellRenderer
?
You can set custom props for the custom cell component using it. 您可以使用它为自定义单元组件设置自定义道具。 Eg:
例如:
columnDef = [
.......
{
.......
cellRenderer: CustomCellComponent,
cellRendererParams: {
prop1: "this is prop1"
}
}
]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.