Unable to use GridColumnMenuFilter with TypeScript

[Alex]

Hello!
I have a problem:
try to create ColumnMenu

import * as React from 'react';
import {GridColumnMenuSort, 
        GridColumnMenuFilter} from '@progress/kendo-react-grid';
class ColumnMenu extends React.Component {

    render() {

        return (
            <div>
                <GridColumnMenuSort {...this.props} />
                <GridColumnMenuFilter {...this.props} expanded={true} />
            </div>
        );         
    }  
}
export default ColumnMenu; 

but i have compile error:

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<GridColumnMenuSortProps>): GridColumnMenuSort', gave the following error.
    Property 'column' is missing in type '{ children: false; }' but required in type 'Readonly<GridColumnMenuSortProps>'.        
  Overload 2 of 2, '(props: GridColumnMenuSortProps, context?: any): GridColumnMenuSort', gave the following error.
    Property 'column' is missing in type '{ children: false; }' but required in type 'Readonly<GridColumnMenuSortProps>'.

Is it able to use Kendo react Grid with TypeScript?

[Ina]

Hello Alex,

Yes, you can use KendoReact Grid with TypeScript. The KendoReact components are written on TypeScript and come with all typing out of the box.

I have prepared the following Stackblitz example to demonstrate this:

https://stackblitz.com/edit/react-ts-cljz4c 

The example shows the usage of the `columnMenu` and KendoReact Grid with TypeScipt. The `columnMenu` component has props from type `GridColumnMenuProps`. We should add the correct props in the `ColumnMenu` class, otherwise, it is interpreted as if it has on the standard props - `props.children` hence we have that error.

Please let me know if you need more assistance.

Regards,
Ina
Progress Telerik

[Alex]

Thanks Ina!
It all works now!