Tooltip not working for me

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

    Posted 02 Jun 2020 Link to this post

    <Tooltip openDelay={100} position="right" anchorElement="element">
    03.    data={process( => ({...manager, selected: manager["mail"] == this.state.selectedID})  ), this.state.gridDataState)}
    04.    {...this.state.gridDataState}
    05.    onDataStateChange={this.handleGridDataStateChange}
    06.    style={{ height: "300px" }}
    07.    pageable={true}
    08.    sortable={true}
    09.    selectedField="selected"
    10.    onRowClick={(e) => {
    11.       this.setState({ selectedID: e.dataItem.mail });
    12.       this.props.callback(e.dataItem.mail);
    13.    }}
    16.  <Column field="mail" title="email" filter={'text'} headerCell={MailHeader} columnMenu={ColumnMenu} headerClassName="k-header-filtered" />
    17.  <Column field="givenName" title=”first name” filter={'text'} columnMenu={ColumnMenu} headerClassName="k-header-filtered" />
    18.  <Column field="sn" title=”last name” filter={'text'} columnMenu={ColumnMenu} headerClassName"k-header-filtered”/>
    19.  <Column field="managerOf" title=”manager of” filter={'text'} columnMenu={ColumnMenu} headerClassName="k-header-filtered" />


    The above is how I have implemented my Grid with tooltips. My MailHeader component looks like:

    1.class MailHeader extends React.Component<Readonly<MailHeaderProps>, {}> {
    2.    render() {
    3.        return (
    4.            <span title={this.props.title}>{this.props.title}</span>
    5.        );
    6.    }


    But I get this error:

    TS2326: Types of property 'headerCell' are incompatible.
      Type 'typeof MailHeader' is not assignable to type 'ComponentType<GridHeaderCellProps>'.
        Type 'typeof MailHeader' is not assignable to type 'StatelessComponent<GridHeaderCellProps>'.
          Type 'typeof MailHeader' provides no match for the signature '(props: GridHeaderCellProps & { children?: ReactNode; }, context?: any):ReactElement<any>'.


    Can anyone point me in the right direction to an answer or a possible clue? 

  2. Stefan
    Stefan avatar
    3039 posts

    Posted 03 Jun 2020 Link to this post


    Thank you for the code.

    The error is a TypeScript one and it is connected to the type of props passes to the MailHeader component. This component should have props of type GridHeaderCellProps:

    class MailHeader extends React.Component<Readonly<GridHeaderCellProps>, {}> {
    Please give this a try and let me know if the error still occurs.


    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