columnMenu in GridColumn TS error

3 posts, 0 answers
  1. SoH
    SoH avatar
    9 posts
    Member since:
    Jun 2017

    Posted 14 May 2020 Link to this post

    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?

  2. SoH
    SoH avatar
    9 posts
    Member since:
    Jun 2017

    Posted 15 May 2020 in reply to SoH Link to this post

    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>, {}> {
  3. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 18 May 2020 Link to this post

    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

    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.
Back to Top