Basically I want to achieve this https://www.telerik.com/kendo-react-ui/components/popup/ (using React, hooks and TS) example but instead of using the HTML Button I want to replace it with the Kendo-UI Button component. So when I replace the <button> element with the Kendo-UI Button I get type Errors for the ref.
How do I fix this?
1 Answer, 1 is accepted
Hello Dervis,
The reference of the KendoReact Button points to the component and not to the rendered "button" element, which will cause problems with the anchor property of the Popup. Additionally, you need to change the type to Button when getting the reference. For your convenience, following is an example with KendoReact Button set as anchor of the Popup:
Please give this a try and let me know if everything works as expected with the suggested changes.
Regards,
Konstantin Dikov
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Hi Konstantin,
Thank you for your answer! That part works now but I still get the following error for the Button ref props:
Type '{ ref: any; onClick: () => void; togglable: true; }' is not assignable to type 'ButtonProps'.
Property 'ref' does not exist on type 'ButtonProps'.How do I fix this?
Thanks in advance
Regards,
Dervis
You will have to include "@types/react" and "@types/react-dom":
Note that the "ref" attribute is coming from React.Component, which all of our KendoReact components use as a base.
Rank 1
This worked! Thank you so much Konstantin!
Best Wishes,
Dervis
Rank 1
Rank 1
Nvm I got it!
type HelpIconButtonProps = {
onClick: () => void;
};
const HelpIconButton = React.forwardRef<Button, HelpIconButtonProps>(({ onClick } : HelpIconButtonProps, ref) => {
return <Button ref={ref} icon="k-icon k-i-question" type="button" aria-label="help" onClick={onClick} togglable />;
});