Unable to use GridColumnMenuFilter with TypeScript

3 posts, 1 answers
  1. Alex
    Alex avatar
    6 posts
    Member since:
    Aug 2013

    Posted 18 May 2020 Link to this post

    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?
  2. Answer
    Ina
    Admin
    Ina avatar
    9 posts

    Posted 19 May 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Alex
    Alex avatar
    6 posts
    Member since:
    Aug 2013

    Posted 19 May 2020 in reply to Ina Link to this post

    Thanks Ina!
    It all works now!
Back to Top