Uncaught TypeError: Cannot read property 'setDomLayout' of undefined - Error when trying to make print function work with AG-Grid
Uncaught TypeError: Cannot read property 'setDomLayout' of undefined - Error when trying to make print function work with AG-Grid
一直在尝试实现一个按钮,该按钮在单击时打印 ag-grid,如图所示 here:
但是,我在 api.setDomLayout('print') 行的 setPrinterFriendly 中不断收到错误消息,上面写着 Uncaught TypeError: Cannot read 属性 'setDomLayout' of undefined。我在这里错过了什么吗?
function setPrinterFriendly(api: any) {
const eGridDiv = document.querySelector('.my-grid') as HTMLElement;
eGridDiv.style.width = '';
eGridDiv.style.height = '';
api.setDomLayout('print');
}
function setNormal(api: any) {
const eGridDiv = document.querySelector('.my-grid') as HTMLElement;
eGridDiv.style.width = '600px';
eGridDiv.style.height = '200px';
api.setDomLayout(null);
}
export function onBtPrint(params: any) {
const gridApi = params.api;
setPrinterFriendly(gridApi);
setTimeout(() => {
print();
setNormal(gridApi);
}, 2000);
}
以下是我的主要 class 项目。
class Items extends Component<any, ItemsState> {
private gridApi: any;
constructor(props: any) {
super(props);
this.state = {
columnDefs: [{
headerName: 'Store', field: 'store', sortable: true, filter: true, resizable: true, minWidth: 100,
}, {
headerName: 'Effective Date',
field: 'effectiveDate',
sortable: true,
filter: true,
resizable: true,
minWidth: 150,
},
...
};
}
onGridReady(params: any) {
params.api.expandAll();
}
onGridSizeChanged(params: any) {
this.gridApi = params.api;
}
render() {
const { rowData } = this.props;
const {
columnDefs, rowClassRules, statusBar,
} = this.state;
return (
<div id="grid-wrapper" style={{ width: '100%', height: '100%' }}>
<button onClick={onBtPrint.bind(null, this)}>Print</button>
<div
id="myGrid"
style={{
height: '100%',
width: '98.5%',
marginLeft: 13,
overflow: 'scroll',
}}
className="ag-theme-balham my-grid"
>
<AgGridReact
columnDefs={columnDefs}
rowData={rowData}
onGridReady={this.onGridReady}
onGridSizeChanged={this.onGridSizeChanged}
suppressMenuHide
statusBar={statusBar}
enableRangeSelection
rowClassRules={rowClassRules}
suppressHorizontalScroll={false}
/>
</div>
</div>
);
}
}
要达到预期结果,请使用以下选项将 params.api 分配给 this.gridApi onGridReady 方法
onGridReady={ params => this.gridApi = params.api }
请参阅此 link 了解更多详情
一直在尝试实现一个按钮,该按钮在单击时打印 ag-grid,如图所示 here:
但是,我在 api.setDomLayout('print') 行的 setPrinterFriendly 中不断收到错误消息,上面写着 Uncaught TypeError: Cannot read 属性 'setDomLayout' of undefined。我在这里错过了什么吗?
function setPrinterFriendly(api: any) {
const eGridDiv = document.querySelector('.my-grid') as HTMLElement;
eGridDiv.style.width = '';
eGridDiv.style.height = '';
api.setDomLayout('print');
}
function setNormal(api: any) {
const eGridDiv = document.querySelector('.my-grid') as HTMLElement;
eGridDiv.style.width = '600px';
eGridDiv.style.height = '200px';
api.setDomLayout(null);
}
export function onBtPrint(params: any) {
const gridApi = params.api;
setPrinterFriendly(gridApi);
setTimeout(() => {
print();
setNormal(gridApi);
}, 2000);
}
class Items extends Component<any, ItemsState> {
private gridApi: any;
constructor(props: any) {
super(props);
this.state = {
columnDefs: [{
headerName: 'Store', field: 'store', sortable: true, filter: true, resizable: true, minWidth: 100,
}, {
headerName: 'Effective Date',
field: 'effectiveDate',
sortable: true,
filter: true,
resizable: true,
minWidth: 150,
},
...
};
}
onGridReady(params: any) {
params.api.expandAll();
}
onGridSizeChanged(params: any) {
this.gridApi = params.api;
}
render() {
const { rowData } = this.props;
const {
columnDefs, rowClassRules, statusBar,
} = this.state;
return (
<div id="grid-wrapper" style={{ width: '100%', height: '100%' }}>
<button onClick={onBtPrint.bind(null, this)}>Print</button>
<div
id="myGrid"
style={{
height: '100%',
width: '98.5%',
marginLeft: 13,
overflow: 'scroll',
}}
className="ag-theme-balham my-grid"
>
<AgGridReact
columnDefs={columnDefs}
rowData={rowData}
onGridReady={this.onGridReady}
onGridSizeChanged={this.onGridSizeChanged}
suppressMenuHide
statusBar={statusBar}
enableRangeSelection
rowClassRules={rowClassRules}
suppressHorizontalScroll={false}
/>
</div>
</div>
);
}
}
要达到预期结果,请使用以下选项将 params.api 分配给 this.gridApi onGridReady 方法
onGridReady={ params => this.gridApi = params.api }
请参阅此 link 了解更多详情