01.<Tooltip openDelay={100} position="right" anchorElement="element">02.<Grid03. data={process(this.state.managers.map((manager) => ({...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. }}14.>15. 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" />20. 21.</Grid>22.</Tooltip>
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. }7.}
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?
1 Answer, 1 is accepted
Hello,
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>, {}> {
Regards,
Stefan
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.