[Solved] columnMenu in GridColumn TS error

[SoH]

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.<Grid
02.    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?

[SoH]

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>, {}> {

[Stefan]

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