How to stop navigation when Grid row is in edit mode?

[Marianne]

I'm using Asp.net core razor pages with custom column settings.  The client wants to block users from navigating off the page when there is a row in edit mode. Is there a suggested way to do this that doesn't involve jquery? Every example I've found so far is under jquery. Ideally, the client should be told with some kind of message the reason for preventing page close. 

 

[Ivan Danchev]

Hello Marianne,

Preventing the users from closing the page is not something our components are capable of doing. See the following stackoverflow thread where possible approaches are discussed, and they don't involve using the jQuery library, instead they use JavaScript.

Note that this is an old thread, and judging by some of the comments, most likely the suggestions would work only in older browsers such as IE, whereas in modern browsers they won't, due to security reasons.

Regards,
Ivan Danchev
Progress Telerik

[Marianne]

thanks for the reply & the reference!  I do see that adding an beforeunload event might be annoying  (and may be the only option) but  is it possible to use jquery with the asp.net core razor page that will be able to check if a custom grid has a row in edit mode?  I know my boss & the client are not going to let this go.

[Ivan Danchev]

Marianne,

You can use the following logic to check whether a Grid row is in edit mode:

if($('#grid').find('.k-grid-edit-row').length > 0) {
  console.log("Grid is in edit mode");
}
else {
  console.log("Grid is not in edit mode");
}

When a row is in edit mode , we apply the "k-grid-edit-row" class to that row. So whenever you want to check this you can use this logic. If there are no rows found that means the Grid is not in edit mode, if there is a row with that class, then the Grid is in edit mode. Highlighted in green is the name (id) of the Grid, which you should replace with the actual name.

Regards,
Ivan Danchev
Progress Telerik