I am using a Kendoreact drawer component with some menu option. On click of 1 of the menu options, it will open a grid page. My requirement is, when i am editing grid & if i click on the drawer component, i have to show a confirmation pop-up stating, "do you want to continue editing" with cancel & Ok button.
I am facing complexity in identifying click event on the drawer component. Please help.
1 Answer, 1 is accepted
Hello Abhishek,
You can use the onSelect event of the Drawer to show a Dialog before setting the new selected item and navigate:
Following is a very basic example using a "confirm" dialog, but you can replace it with a Dialog component or any other confirmation popup:
const onSelect = (e) => {
if (confirm('Are you sure you want to switch views?')) {
navigate(e.itemTarget.props.route);
setSelected(e.itemIndex);
}
};
Best Regards,
Konstantin Dikov
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!
Rank 2
Iron
Iron
Iron
Hi Abhishek,
You can still use the onSelect event of the Drawer to show the confirmation. What is executed within the confirmation (navigate or useRouter).
Hope this helps.
Rank 2
Iron
Iron
Iron
Within the onItemChange you can add some state variable that can be used to track if there are any changes and if so, open the confirmation pop-up. You can propagate that variable to the context of the Drawer where you can check its state within the select event.
Another option would be to intercept the "click" event of the document within the context of the Grid component and if the click is within the Drawer element, open the pop-up for the confirmation.
Rank 2
Iron
Iron
Iron
Can you please share any sample code or example?
Hi Abhishek,
I have to say that we do not have an example that we can share for this particular requirement, but the idea is that the Drawer should change its view within the onSelect event and the first option would be to check within the onSelect event if the data in the Grid is saved or not. You can use React Context in the component with the Drawer for passing a setter to the component with the Grid and update the value of the state variable if the Grid is edited and not saved:
const onSelect = (e) => {
if(gridNotSaved){
confirmation (....)
}else{
navigate(e.itemTarget.props.route);
setSelected(e.itemIndex);
setExpanded(!expanded);
}
};