将rowDrag图标更改为ag-grid-react

时间:2019-07-15 14:52:58

标签: react-redux ag-grid-react

我是新来的反应者,我正在为应用程序使用ag-grid。

我想将rowDrag图标更改为Font awesome circle图标(<i class="fa fa-circle"/>

我的colDefrender()在下面:

首先,我尝试更改rowDrag图标

export class App extends Component<AppProps, any> {
    private staticColumns: ColDef[] = [
        {
            valueGetter: () => "",
            rowDrag: true,
            lockVisible: true,
            maxWidth: 30,
            resizable: false,
            suppressSizeToFit: true,
            suppressToolPanel: true,
            suppressMenu: true,
            suppressMovable: true,
            cellStyle: { backgroundColor: "lightgrey", padding: "0" }
        }
    ];
    private gridColumnApi!: ColumnApi;
    private gridApi: any;

    constructor(props: any) {
        super(props);

        this.icon = {
            icons: {
                rowDrag: '<i class="fa fa-circle"/>'
            }
        };
    }

和我的render()返回:

return (
            <div className="ag-theme-balham" style={mainContentStyle}>
                <AgGridReact
                    suppressColumnVirtualisation={true}
                    rowSelection="multiple"
                    columnDefs={this.staticColumns.concat(columns)}
                    defaultColDef={defaultColumnDef}
                    columnTypes={customColumnTypes}
                    onFirstDataRendered={(params) => this.onFirstDataRendered(params)}
                    autoSizePadding={0}
                    rowData={mydata}
                    getContextMenuItems={(params) => this.getContextMenuItems(params)}
                    popupParent={this.popupParent || undefined}
                    onGridSizeChanged={() => this.autosizeColumns()}
                    onGridReady={(ev) => this.onGridReady(ev)}
                    onCellValueChanged={() => this.myCellValueChangedMethod()}
                    deltaRowDataMode={true}
                    getRowNodeId={(data) => data.id}
                    sideBar={this.getSideBar()}
                    rowDragManaged={true}
                    onRowDragEnd={(ev) => this.onRowDragEnd(ev)}
                    animateRows={allowRowAnimation}
                    icons={this.icon.icons}
                />
            </div>
        );

这不会更改网格中的rowDrag图标。

0 个答案:

没有答案