ColumnMenu.tsx
/// <reference path="./ColumnMenu.d.ts"/>import * as React from 'react';import { GridColumnMenuFilter } from '@progress/kendo-react-grid';export default class ColumnMenu extends React.Component<Readonly<ColumnMenuProps>, {}> { render() { return ( <div> <GridColumnMenuFilter columnMenu={this.props.columnMenu} expanded={true} /> </div> ); }}
I am importing this into my main class and using it here:
01.<Grid02. data={process(this.props.users, this.state.gridDataState)}03. {...this.state.gridDataState}04. onDataStateChange={this.handleGridDataStateChange}05. style={{ height: "300px" }}06. pageable={true}07. sortable={true}08.>09. <GridColumn field="email" title="Email" filter={'text'} columnMenu={ColumnMenu}/>10. <GridColumn field="givenName" title="First name" />11. <GridColumn field="sn" title="Last name" />12. <GridColumn field="managerOf" title="Manager of" />13.</Grid>
No matter how I try to run this, I get the same error:
1.TS2326: Types of property 'columnMenu' are incompatible.2.Type 'typeof ColumnMenu' is not assignable to type 'ComponentType<GridColumnMenuProps>'.3.Type 'typeof ColumnMenu' is not assignable to type 'StatelessComponent<GridColumnMenuProps>'.4.Type 'typeof ColumnMenu' provides no match for the signature '(props: GridColumnMenuProps & { children?: ReactNode; }, context?: any): ReactElement<any>'.
Any idea how I get past this TS issue?
2 Answers, 1 is accepted
Rank 1
Iron
Veteran
Iron
For anyone stuck on this issue, this was the fix for me:
import GridColumnMenuProps to the ColumnMenu,tsx and pass to the class
import { GridColumnMenuFilter, GridColumnMenuProps } from '@progress/kendo-react-grid';export default class ColumnMenu extends React.Component<Readonly<GridColumnMenuProps>, {}> {
Hello,
Thank you for sharing the resolution with the KendoReact community, it is highly appreciated.
The type of component can be seen in the API section. This should be null or a component that expected props from type "GridColumnMenuProps"
https://www.telerik.com/kendo-react-ui/components/grid/api/GridColumnProps/#toc-columnmenu
As our components are written on TypeScript, these types come built into components and we export them in the package.
Regards,
Stefan
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.