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

4 posts, 0 answers
  1. Marianne
    Marianne avatar
    5 posts
    Member since:
    Mar 2020

    Posted 05 Jun 2020 Link to this post

    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. 

     

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2152 posts

    Posted 10 Jun 2020 Link to this post

    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

    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.
  3. Marianne
    Marianne avatar
    5 posts
    Member since:
    Mar 2020

    Posted 10 Jun 2020 in reply to Ivan Danchev Link to this post

    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.
  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2152 posts

    Posted 15 Jun 2020 Link to this post

    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

    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