How to detect unsaved changes in RadGrid when the user attempts to navigate away from the web page

[Herman Gouw]

Hi,

In my current project, I have to develop a web application which connects to a back-end server.

One of the web pages contains a RadGrid used to display the Participants details (Name, Email, Title, Phone, Mobile). 

The user is able to Add, Edit, Delete the Participant details. When the user performs an Add or Edit or Delete the changes will be performed on the data object in the memory.

When the users clicks on the Update button the data object will be submitted into the back-end server.

All RadGrid operations are Server-side operations (instead of Client-side ones).

There is a user requirement if the users attempts to navigate away from this web page and there exists unsaved changes in the data object (i.e. not yet submitted), a message should be displayed asking them if they want to save the changes before proceeding.

Can you please tell me how to implement this?

Thanks,

Herman

[Veli]

Hi Herman,

There are various ways to implement this behavior. One of them is to use the client-side onchange event of the input elements in the edit form. You can set a boolean flag indicating values are edited. When navigating away, you can use the onbeforeunload event of the body check to see if there are unsaved changes and
prompt the user about an action.

To demonstrate this approach, I have attached a small test page you can refer to.

Best wishes,
Veli
the Telerik team

[Herman Gouw]

Hi Veli,

I can't compile the source code that you sent me (got error messages).

Can you please send me the complete source code?

I need to compile and run the source code to check if it serves my purpose?

Thanks,

Herman

[Veli]

Hi Herman,

You need to put the attached test page in a project and reference the Telerik.Web.UI.dll in the project. If the reference to the server controls in Telerik.Web.UI namespace is not added for all your pages through the web.config, you need to add the following directive to the top of the test page:

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

All the best,
Veli
the Telerik team

[Herman Gouw]

Hi Veli,

I have compiled and run the web page.

It works fine if I edit a row and then try to edit another row without saving the first one.

But it does not work as follows:

1. Edit a row (but do not save it).

2. Go to another web page on the same project by changing the URL.

3. The warning popup window is not displayed.

Can you you please confirm if this handles that?

Thanks,

Herman

[Veli]

Hi Herman,

I am getting the alert box when I try to navigate to another page. Attaching a video. The issue may be caused by the fact that the input's onchange event is not fired until the input loses focus. This is why, if you type some text in the input and navigate to another page without blurring the input, onchange is not fired and the onunload event handler does not return an alert message.

All the best,
Veli
the Telerik team

[Herman Gouw]

Hi Veli,

Thanks a lot for the video.

The sample that you gave me is now available on http://www.gouw.ws/RadGridWithUnsavedChanges.aspx

I noticed that this web page does not always display the alert box when I navigate to a different web page.

For example,

1. Go to http://www.gouw.ws/RadGridWithUnsavedChanges.aspx

2. Click Edit on any row and type in "xxx" on ID.

3. Go to http://www.gouw.ws/RadGrid.aspx

The alert box is displayed sometimes but not always.

I have a few queries here:

1. What did you mean by "without blurring the input"  in your previous comment "This is why, if you type some text in the input and navigate to another page without blurring the input, onchange is not fired and the onunload event handler does not return an alert message." ?

2. On your sample, why is the alert box displayed when we click the Cancel? This is not desirable in my case.

3. Do you have any solution to make it more reliable?

Thanks,

Herman

[Veli]

Hi Herman,

Thanks for the live URL.

1. By "blurring the input" I mean the following: you type some text into the input and you click somewhere else on the page. That is making sure the textbox is blurred, i.e. it does not keep the focus. As you may know, onchange  client input events are fired after the input is blurred. In IE, focusing the address bar does not automatically blur  the focused control in the HTML body. This is why you need to explicitly blur the input and make sure it's onchange event handler is raised. The attached video demonstrates my point.

2. You are right about this obsevations. It seems in IE the grid command is fired after onbeforeunload, so we are unable to prevent the buttons in the edit form from alerting a message. To work around, we can take a different approach and use the onclick event handler of the Update and Cancel buttons to notify changes to the edit controls should be discarded. Modified test page reflecting this change is attached.

Even though the onbeforeunload event does not behave consistently in different browsers, it is the only event that can be used to notify of unsaved changes and prevent page navigation / postback i a large set of scenarios - clicking link, submit buttons or typing a new address in the address bar.

Best,
Veli
the Telerik team

[Herman Gouw]

Hi Veli,

Your updated solution is now available on http://www.gouw.ws/RadGridWithUnsavedChanges2.aspx

I noticed that this solution fails to display the alert box when I navigate to a different web page.

1. Go to http://www.gouw.ws/RadGridWithUnsavedChanges2.aspx
2. Click Edit on any row and type in "xxx" on Id.
3. Go to http://www.gouw.ws/RadGridWithUnsavedChanges.aspx
The alert box is not displayed at all.

Regards,
Herman

[Veli]

Hello Herman,

As I said, in IE, you have to click somewhere else on the form after you change the input value, before clicking on the browser address bar to change the address. This will fire the onchange event of the input. The event does not fire when you click on the address bar right after typing on the input.

Veli
the Telerik team

[Jenny]

Hello,

I have a page with radgrid and master page is also there. For this page i want to warn user before leaving web page with unsaved changes of radgrid. I tried your code which you have given. Below i giving code which i have tried.

Code:

<script type="text/javascript">
                function notifyChange(sender, args) {
                    window.editInProgress = true;
                }

                function verifyCancelChanges(e) {
                    if (window.editInProgress) {
                        if (document.all) {
                            window.event.returnValue = "Changes will be lost. Continue?";
                        }
                        else {
                            return "Changes will be lost. Continue?";
                        }
                    }
                }
            </script>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" onbeforeunload="return verifyCancelChanges(event)" LoadingPanelID="RadAjaxLoadingPanel1" Height="100%">
 <div align="center" >
     <table align="center" style="width: 90%"><tr>
            <td align="Center" style="padding-right:20px">
                    <asp:Label runat="server" ID="lblErrormessage" SkinID="Error" Visible="false" ForeColor="Red"></asp:Label>                
            </td>
        </tr>
        <tr>
            <td align="right" style="padding-right:20px">
                <telerik:RadButton ID="btnAddDeduction" runat="server" Skin="Windows7" Text="Add Deduction" OnClick="btnAddDeduction_Click" Enabled="true" CausesValidation="false">
                    <Icon PrimaryIconCssClass="rbAdd" />
                </telerik:RadButton>
            </td>
        </tr>
    </table>
     <asp:HiddenField ID="hfDeductionid" runat="server"  />
       <telerik:RadGrid ID="Radgriddeductions" runat="server"  OnItemDataBound="Radgriddeductions_ItemDataBound" OnItemCommand="Radgriddeductions_ItemCommand"
           EnableEmbeddedSkins="False" Skin="Custom1" ShowHeader="True" ForeColor="Darkblue" GridLines="Both" Width="85%" ItemStyle-Height="30px" >
         <MasterTableView  AutoGenerateColumns="false" ForeColor="DarkBlue">
             <Columns>
                <telerik:GridBoundColumn HeaderText="DeductionID" DataField="DeductionID" Display="false"></telerik:GridBoundColumn>
                 <telerik:GridBoundColumn HeaderText="EmployeeDeductionID" DataField="EmployeeDeductionID" Display="false"></telerik:GridBoundColumn>
                <telerik:GridTemplateColumn HeaderText="Deduction Desc" UniqueName="Description" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="75px">
                     <ItemTemplate>
                         <div class="selectWrapper">
                         <asp:DropDownList runat="server" ID="ddlDescription" CssClass="selectBox"  AppendDataBoundItems="true" Enabled="true" AutoPostBack="true" OnSelectedIndexChanged="ddlDescription_SelectedIndexChanged1" Height="26px">
                             <asp:ListItem Text="Select"/> 
                         </asp:DropDownList>  
                             </div>                           
                     </ItemTemplate>
                 </telerik:GridTemplateColumn>
                 <telerik:GridTemplateColumn HeaderText="Dollar Amount/Percentage" UniqueName="DeductionType" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="75px">
                     <ItemTemplate>
                         <div class="selectWrapper">
                         <asp:DropDownList runat="server" ID="ddldollaramtper" CssClass="selectBox"  Enabled="true" AppendDataBoundItems="true" Height="26px" OnSelectedIndexChanged="ddldollaramtper_SelectedIndexChanged" AutoPostBack="true" >
                          </asp:DropDownList>
                             </div>                   
                     </ItemTemplate>
                 </telerik:GridTemplateColumn>
                 <telerik:GridTemplateColumn HeaderText="Per Pay Period Amount" DataField="DeductionAmt" UniqueName="DeductionAmt" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="120px">
                     <ItemTemplate>
                     <telerik:RadNumericTextBox ID="txtdeductamt" runat="server" Enabled="true" Width="115px" Height="25px" NumberFormat-DecimalDigits="2" SelectionOnFocus="SelectAll" 
                   mask="nnnn.nn" MaxValue="9999.99" MinValue="0000.00" AllowOutOfRangeAutoCorrect="False" CssClass="input" BorderColor="DarkBlue" PlaceHolder="Amount/Percent" >
               </telerik:RadNumericTextBox> 
                       
                          <asp:RegularExpressionValidator runat="server" id="rvDeductamt"  ControlToValidate="txtdeductamt" Enabled="false" 
                              ErrorMessage="Enter numbers between 0 to 100." ForeColor="Red" ValidationGroup="DeductSave"
                               ValidationExpression="^100(\.0{0,2}?)?$|^\d{0,2}(\.\d{0,2})?$" Display="Dynamic" SetFocusOnError="True">                     
                              </asp:RegularExpressionValidator> 
                     </ItemTemplate>
                 </telerik:GridTemplateColumn>
                 <telerik:GridTemplateColumn HeaderText="Limit" DataField="DeductionLimit" UniqueName="DeductionLimit" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="75px">
                     <ItemTemplate>
                     <telerik:RadNumericTextBox ID="txtlimits" runat="server" Enabled="true" Width="115px" Height="25px" NumberFormat-DecimalDigits="2" SelectionOnFocus="SelectAll" 
                   mask="nnnn.nn" MaxValue="999999.99" MinValue="000000.00" AllowOutOfRangeAutoCorrect="False" CssClass="input" BorderColor="DarkBlue" PlaceHolder="Limits" >
               </telerik:RadNumericTextBox>  
                   
                     </ItemTemplate>
                 </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn HeaderText="Balance" DataField="DeductionBal" UniqueName="DeductionBal" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="75px">
                     <ItemTemplate>  
                     <telerik:RadNumericTextBox ID="txtbalance" runat="server" Enabled="true" Width="115px" Height="25px" NumberFormat-DecimalDigits="2" SelectionOnFocus="SelectAll" 
                   mask="nnnn.nn" MaxValue="999999.99" MinValue="000000.00" AllowOutOfRangeAutoCorrect="False" CssClass="input" BorderColor="DarkBlue" PlaceHolder="Balance" >
               </telerik:RadNumericTextBox> 
                                               
                     </ItemTemplate>
                 </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderText="" ItemStyle-Width="40px">
                     <ItemTemplate>
                         <telerik:RadButton ID="btnedit" Text="Remove" Visible="true" runat="server" CommandName="Delete" CausesValidation="false" skin="Windows7" AutoPostBack="true">
                             <Icon PrimaryIconCssClass="rbRemove" />
                         </telerik:RadButton>           
                     </ItemTemplate>
                 </telerik:GridTemplateColumn>
             </Columns>
         </MasterTableView>
        </telerik:RadGrid>
     </div> 
    <table align="center" >
        <tr>
            <td align="right">
                <telerik:RadButton ID="radbtnCancel" runat="server" AutoPostBack="true" OnClick="radbtnCancel_Click" Skin="Windows7" Text="Cancel" CausesValidation="false">
                    <Icon PrimaryIconCssClass="rbRemove" />
                </telerik:RadButton>
                &nbsp
                 <telerik:RadButton ID="radbtnSave" runat="server" Skin="Windows7" Text="Save" OnClick="radbtnSave_Click" ValidationGroup="DeductSave" AutoPostBack="True">
                     <Icon PrimaryIconCssClass="rbSave" />
                 </telerik:RadButton>
                &nbsp&nbsp
            </td>
        </tr>
    </table>
    <br />
    <br />
</telerik:RadAjaxPanel>

But it is not working please help me out of this problem.

 

 

[Attila Antal]

Hi Jennifer,

Nothing is calling the notifyChange() JavaScript method. If you wire this up with an event, then the detection will be also working.

Generally, detecting changes can used with BatchEditing. Here is a forum post describing the way: Best way to detect changes in RadGrid in batch edit mode.
In other edit modes, you can detect whether the Grid is in edit mode, if so, fire the pop-up message warning the user about that.

Alternatively you can access the controls server-side and bind the desired client-side event to them which file fire when values are changing. See Accessing Cells and Rows article to learn more on accessing the controls.

Eventually, you can modify the attached sample project to reflect the exact scenario from your side and send it back to us so that we can understand more about the scenario itself and be able to advise you accordingly.

Kind regards,
Attila Antal
Progress Telerik

[Jenny]

Thanks for your support. Bt it won't worked. i tried same with different way. In this i got desire result but the thing is that when i am clicking on save after changing and try to saving it, it is saved but when i am loading again that time i am getting warn msg box. and when i am trying to remove something from grid and reloading then it is also a modification but i am not getting an warn msg.

the new i tried is is below:

<script type="text/javascript">

        var changes = false;        
        window.onbeforeunload = function() {
            if (changes)
            {
                var message = "Are you sure you want to navigate away from this page?\n\nYou have started writing or editing a post.\n\nPress OK to continue or Cancel to stay on the current page.";
                if (confirm(message)) return true;
                else return false;
            }
            $("#btnAddDeduction").click(function () {
                onbeforeunload = true;
            });
        }
    </script>

<telerik:RadAjaxPanel ID="RadAjaxPanel1"  runat="server" LoadingPanelID="RadAjaxLoadingPanel1" Height="100%">
 <div align="center" >
     <br />
     <br />
     <table align="center" style="width: 90%"><tr>
            <td align="Center" style="padding-right:20px">
                    <asp:Label runat="server" ID="lblErrormessage" SkinID="Error" Visible="false" ForeColor="Red"></asp:Label>                
            </td>
        </tr>
        <tr>
            <td align="right" style="padding-right:20px">
                <telerik:RadButton ID="btnAddDeduction" runat="server"  Skin="Windows7" Text="Add Deduction" OnClick="btnAddDeduction_Click" Enabled="true" CausesValidation="false">
                    <Icon PrimaryIconCssClass="rbAdd" />
                </telerik:RadButton>
            </td>
        </tr>
    </table>
     <asp:HiddenField ID="hfDeductionid" runat="server"  />
     
       <telerik:RadGrid ID="Radgriddeductions" runat="server"  OnItemDataBound="Radgriddeductions_ItemDataBound" OnItemCommand="Radgriddeductions_ItemCommand"
           EnableEmbeddedSkins="False" Skin="Custom1" ShowHeader="True" ForeColor="Darkblue" GridLines="Both" Width="85%" ItemStyle-Height="30px" >
         <MasterTableView  AutoGenerateColumns="false" ForeColor="DarkBlue">
             <Columns>
                <telerik:GridBoundColumn HeaderText="DeductionID" DataField="DeductionID" Display="false"></telerik:GridBoundColumn>
                 <telerik:GridBoundColumn HeaderText="EmployeeDeductionID" DataField="EmployeeDeductionID" Display="false"></telerik:GridBoundColumn>
                <telerik:GridTemplateColumn HeaderText="Deduction Desc" UniqueName="Description" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="75px">
                     <ItemTemplate>
                         <div class="selectWrapper">
                         <asp:DropDownList runat="server" ID="ddlDescription" onchange='changes=true;' CssClass="selectBox"  AppendDataBoundItems="true" Enabled="true" AutoPostBack="true" OnSelectedIndexChanged="ddlDescription_SelectedIndexChanged1" Height="26px">
                             <asp:ListItem Text="Select"/> 
                         </asp:DropDownList>  
                             </div>                           
                     </ItemTemplate>
                 </telerik:GridTemplateColumn>
                 <telerik:GridTemplateColumn HeaderText="Dollar Amount/Percentage" UniqueName="DeductionType" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="75px">
                     <ItemTemplate>
                         <div class="selectWrapper">
                         <asp:DropDownList runat="server" ID="ddldollaramtper" CssClass="selectBox" onchange='changes=true;' Enabled="true" AppendDataBoundItems="true" Height="26px" OnSelectedIndexChanged="ddldollaramtper_SelectedIndexChanged" AutoPostBack="true" >
                          </asp:DropDownList>
                             </div>                   
                     </ItemTemplate>
                 </telerik:GridTemplateColumn>
                 <telerik:GridTemplateColumn HeaderText="Per Pay Period Amount" DataField="DeductionAmt" UniqueName="DeductionAmt" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="120px">
                     <ItemTemplate>
                     <telerik:RadNumericTextBox ID="txtdeductamt" runat="server" onchange='changes=true;' Enabled="true" Width="115px" Height="25px" NumberFormat-DecimalDigits="2" SelectionOnFocus="SelectAll" 
                   mask="nnnn.nn" MaxValue="9999.99" MinValue="0000.00" AllowOutOfRangeAutoCorrect="False" CssClass="input" BorderColor="DarkBlue" PlaceHolder="Amount/Percent" >
               </telerik:RadNumericTextBox> 
                         <asp:RegularExpressionValidator runat="server" id="rvDeductamt"  ControlToValidate="txtdeductamt" Enabled="false" 
                              ErrorMessage="Enter numbers between 0 to 100." ForeColor="Red" ValidationGroup="DeductSave"
                               ValidationExpression="^100(\.0{0,2}?)?$|^\d{0,2}(\.\d{0,2})?$" Display="Dynamic" SetFocusOnError="True">                     
                              </asp:RegularExpressionValidator> 
                     </ItemTemplate>
                 </telerik:GridTemplateColumn>
                 <telerik:GridTemplateColumn HeaderText="Limit" DataField="DeductionLimit" UniqueName="DeductionLimit" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="75px">
                     <ItemTemplate>
                     <telerik:RadNumericTextBox ID="txtlimits" runat="server" Enabled="true" Width="115px" Height="25px" NumberFormat-DecimalDigits="2" SelectionOnFocus="SelectAll" 
                   mask="nnnn.nn" MaxValue="999999.99" MinValue="000000.00" onchange='changes=true;' AllowOutOfRangeAutoCorrect="False" CssClass="input" BorderColor="DarkBlue" PlaceHolder="Limits" >
               </telerik:RadNumericTextBox>  
                     </ItemTemplate>
                 </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn HeaderText="Balance" DataField="DeductionBal" UniqueName="DeductionBal" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="75px">
                     <ItemTemplate>  
                     <telerik:RadNumericTextBox ID="txtbalance" runat="server" Enabled="true" Width="115px" Height="25px" NumberFormat-DecimalDigits="2" SelectionOnFocus="SelectAll" 
                   mask="nnnn.nn" MaxValue="999999.99" MinValue="000000.00" onchange='changes=true;' AllowOutOfRangeAutoCorrect="False" CssClass="input" BorderColor="DarkBlue" PlaceHolder="Balance" >
               </telerik:RadNumericTextBox> 
                           </ItemTemplate>
                 </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderText="" ItemStyle-Width="40px">
                     <ItemTemplate>
                         <telerik:RadButton ID="btnedit" Text="Remove" onclintclick='changes=false;'  Visible="true" runat="server" CommandName="Delete" CausesValidation="false" skin="Windows7" AutoPostBack="true">
                             <Icon PrimaryIconCssClass="rbRemove" />
                         </telerik:RadButton>           
                     </ItemTemplate>
                 </telerik:GridTemplateColumn>
             </Columns>
         </MasterTableView>
        </telerik:RadGrid>
     </div> 
    <table align="center" >
        <tr>
            <td align="right">
                <telerik:RadButton ID="radbtnCancel"  runat="server" AutoPostBack="true" OnClick="radbtnCancel_Click" Skin="Windows7" Text="Cancel" CausesValidation="false">
                    <Icon PrimaryIconCssClass="rbRemove" />
                </telerik:RadButton>
                &nbsp
                 <telerik:RadButton ID="radbtnSave" runat="server"  Skin="Windows7" Text="Save" OnClick="radbtnSave_Click" ValidationGroup="DeductSave" AutoPostBack="True">
                     <Icon PrimaryIconCssClass="rbSave" />
                 </telerik:RadButton>
                &nbsp&nbsp
            </td>
        </tr>
    </table>
    <br />
    <br />
</telerik:RadAjaxPanel>

[Eyup]

Hello Jenny,

Your approach seems correct. You can try to temporarily disable AJAX to check for script errors:
https://www.telerik.com/support/kb/aspnet-ajax/ajaxmanager/details/get-more-descriptive-errors-by-disabling-ajax

If this is not the case, you can create a sample isolated web site sample to demonstrate the issue and open a formal support ticket to send it to us for further investigation.

Regards,
Eyup
Progress Telerik

[Jenny]

If I am doing "EnableAJAX="false"" then my radgrid is flickering which i dont want and if i am "EnableAJAX="false"" then everyclick of my all postback field I am getting that popup 

[Attila Antal]

Hi Jenny,

There is no need to eliminate AJAX entirely, only disabling it for troubleshooting purposes. The idea behind it is that sometimes the server generates errors and if AJAX is enabled, the errors would most likely be hidden, and so the developer is wondering where the issue might be. Having AJAX off, will show up all the errors generated on the server and can be easily tracked down and eventually find out the originating problem.

If none of the suggestions are helping, I would advise you isolate the problem in a sample project and send it back to us so that we can run it locally and debug the issue. 

We look forward to hearing from you.

Kind regards,
Attila Antal
Progress Telerik