Alert Message when user moves out of gridview when he clicks other links apart from update and cancel

Question

5.00/5 (1 vote)

See more:

I am facing a problem with gridveiw. My gridveiw has some 'n' number of rows and few columns. When user clicks on edit click the gridview cells becomes editable. Now what I need is if user navigates in my case i have treeview on left hand side which has several pages listed in treeview format if user click without clicking the "cancel" or "update" button in my gridview and just clicks the links from the left hand side from tree view it should prompt message saying "You might loose the unsaved data in your row" How do i implement this

Below is my gridveiw Code

ASP.NET

<asp:GridView ID="gvTestScriptComponent" runat="Server" CssClass="GridViewStyle" AutoGenerateColumns="False"
       CellPadding="4" ForeColor="Black" DataKeyNames="ComponentID"
       ShowFooter="true" Height="110px" Style="margin-right: 0px" Width="990px" BackColor="White"
       OnRowDataBound="gvTestScriptComponent_RowDataBound" AutoGenerateEditButton="True"
       OnRowEditing="gvTestScriptComponent_RowEditing" OnRowCancelingEdit="gvTestScriptComponent_RowCancelingEdit"
       OnRowUpdating="gvTestScriptComponent_RowUpdating" OnRowDeleted="gvTestScriptComponent_RowDeleted"
       BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px"
       OnRowCommand="gvTestScriptComponent_RowCommand">
       <Columns>
           <asp:TemplateField HeaderText="ComponentID" ItemStyle-HorizontalAlign="Center">
               <ItemTemplate>
                   <asp:Label ID="lblComponentID" runat="server" Height="20px" Text='<%#Eval("ComponentID")%>'>  </asp:Label>
               </ItemTemplate>
               <ItemStyle HorizontalAlign="Center"></ItemStyle>
           </asp:TemplateField>
           <asp:TemplateField HeaderText="Options" ItemStyle-HorizontalAlign="Center">
               <ItemTemplate>
                   <asp:ImageButton ID="btnDelete" runat="server" ImageUrl="images/delete.ico" CausesValidation="false"
                       CommandName="DeleteRow" OnClick="btnDelete_Click"  OnClientClick='return confirm("Are you sure you want to delete?");'  />
               </ItemTemplate>
               <FooterTemplate>
                   <asp:ImageButton ID="btnSave" runat="server" ImageUrl="images/save.ico" CausesValidation="false"
                       CommandName="SaveRow" OnClick="btnSave_Click" />
               </FooterTemplate>
               <ItemStyle HorizontalAlign="Center"></ItemStyle>
           </asp:TemplateField>
           <asp:TemplateField HeaderText="TestWindow/Frame Name" ItemStyle-HorizontalAlign="Center">
               <ItemTemplate>
                   <asp:Label ID="lblTestWindow" runat="server" Height="20px" Text='<%#Eval("BrowserPage")%>'>  </asp:Label>
               </ItemTemplate>
               <ItemStyle HorizontalAlign="Left"></ItemStyle>
               <EditItemTemplate>
                   <asp:DropDownList ID="ddlTestWindow" runat="server" Visible="true" AutoPostBack="True"
                       OnSelectedIndexChanged="ddlTestWindow_SelectedIndexChanged">
                   </asp:DropDownList>
               </EditItemTemplate>
               <FooterTemplate>
                   <asp:DropDownList ID="ddlFooterTestWindow" runat="server" Visible="true" AutoPostBack="True"
                       OnSelectedIndexChanged="ddlFooterTestWindow_SelectedIndexChanged">
                   </asp:DropDownList>
               </FooterTemplate>
           </asp:TemplateField>
           <asp:TemplateField HeaderText="Test Object" ItemStyle-HorizontalAlign="Center">
               <ItemTemplate>
                   <asp:Label ID="lblTestObject" runat="server" Height="20px" Text='<%#Eval("ObjectName")%>'>  </asp:Label>
               </ItemTemplate>
               <ItemStyle HorizontalAlign="Left"></ItemStyle>
               <EditItemTemplate>
                   <asp:DropDownList ID="ddlTestObject" runat="server" Visible="true" AutoPostBack="True"
                       OnSelectedIndexChanged="ddlTestObject_SelectedIndexChanged" >
                   </asp:DropDownList>
               </EditItemTemplate>
               <FooterTemplate>
                   <asp:DropDownList ID="ddlFooterTestObject" runat="server" Visible="true" AutoPostBack="True"
                       OnSelectedIndexChanged="ddlFooterTestObject_SelectedIndexChanged">
                   </asp:DropDownList>
               </FooterTemplate>
           </asp:TemplateField>
           <asp:TemplateField HeaderText="Test Operation" ItemStyle-HorizontalAlign="Center">
               <ItemTemplate>
                   <asp:Label ID="lblTestOperation" runat="server" Height="20px" Text='<%#Eval("Action")%>'></asp:Label>
               </ItemTemplate>
               <ItemStyle HorizontalAlign="Left"></ItemStyle>
               <EditItemTemplate>
                   <asp:DropDownList ID="ddlTestOperation" runat="server" Visible="true">
                   </asp:DropDownList>
               </EditItemTemplate>
               <FooterTemplate>
                   <asp:DropDownList ID="ddlFooterTestOperation" runat="server" Visible="true">
                   </asp:DropDownList>
               </FooterTemplate>
           </asp:TemplateField>
           <asp:TemplateField HeaderText="Test Data" ItemStyle-HorizontalAlign="Center">
               <ItemTemplate>
                   <asp:Label ID="lblTestData" runat="server" Height="20px" Text='<%#Eval("TestData")%>'></asp:Label>
               </ItemTemplate>
               <ItemStyle HorizontalAlign="Left"></ItemStyle>
               <EditItemTemplate>
                   <asp:TextBox ID="txtTestData" runat="server" Text='<%# Bind("TestData") %>' Visible="true">
                   </asp:TextBox>
               </EditItemTemplate>
               <FooterTemplate>
                   <asp:TextBox ID="txtFooterTestData" runat="server" Visible="true"></asp:TextBox>
               </FooterTemplate>
           </asp:TemplateField>
           <asp:TemplateField HeaderText="Reusable‎OutputData" ItemStyle-HorizontalAlign="Center">
               <ItemTemplate>
                   <asp:Label ID="lblReUseableOutputData" runat="server" Height="20px" Text='<%#Eval("ReUsableOutputData")%>'></asp:Label>
               </ItemTemplate>
               <ItemStyle HorizontalAlign="Left"></ItemStyle>
               <EditItemTemplate>
                   <asp:TextBox ID="txtReUseableOutputData" runat="server" Text='<%# Bind("ReUsableOutputData") %>'
                       Visible="true">
                   </asp:TextBox>
               </EditItemTemplate>
               <FooterTemplate>
                   <asp:TextBox ID="txtFooterReUseableOutputData" runat="server" Visible="true"></asp:TextBox>
               </FooterTemplate>
           </asp:TemplateField>
           <asp:TemplateField HeaderText="Step Description" ItemStyle-HorizontalAlign="Center">
               <ItemTemplate>
                   <asp:Label ID="lblStepDescription" runat="server" Height="20px" Text='<%#Eval("Steps")%>'></asp:Label>
               </ItemTemplate>
               <ItemStyle HorizontalAlign="Left"></ItemStyle>
               <EditItemTemplate>
                   <asp:TextBox ID="txtStepDescription" runat="server" Text='<%# Bind("Steps") %>' Visible="true">
                   </asp:TextBox>
               </EditItemTemplate>
               <FooterTemplate>
                   <asp:TextBox ID="txtFooterStepDescription" runat="server" Visible="true"></asp:TextBox>
               </FooterTemplate>
           </asp:TemplateField>
       </Columns>
       <FooterStyle BackColor="#CCCC99" ForeColor="Black" />
       <PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Right" />
       <SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />
       <HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" HorizontalAlign="Justify"
           VerticalAlign="Middle" />
       <SortedAscendingCellStyle BackColor="#F7F7F7" />
       <SortedAscendingHeaderStyle BackColor="#4B4B4B" />
       <SortedDescendingCellStyle BackColor="#E5E5E5" />
       <SortedDescendingHeaderStyle BackColor="#242121" />
       <EmptyDataTemplate>
           <table>
               <tr style="background-color: #999999;">
                   <th>
                       Option
                   </th>
                   <th>
                       Test Window
                   </th>
                   <th>
                       Test Object
                   </th>
                   <th>
                       Test Operation
                   </th>
                   <th>
                       Test Data
                   </th>
                   <th>
                       ReUseableOutputData
                   </th>
                   <th>
                       StepDescription
                   </th>
               </tr>
               <tr>
                   <td headers="Option">
                       <asp:ImageButton ID="btnSave" runat="server" ImageUrl="images/save.ico" CausesValidation="false"
                           CommandName="FirstSaveRow" OnClick="btnSave_Click" />
                   </td>
                   <td headers="Test Window">
                       <asp:DropDownList ID="ddlFooterTestWindow" runat="server" Visible="true" AutoPostBack="True"
                           OnSelectedIndexChanged="ddlFooterTestWindow_SelectedIndexChanged">
                       </asp:DropDownList>
                   </td>
                   <td headers="Test Object">
                       <asp:DropDownList ID="ddlFooterTestObject" runat="server" Visible="true" AutoPostBack="True"
                           OnSelectedIndexChanged="ddlFooterTestObject_SelectedIndexChanged">
                       </asp:DropDownList>
                   </td>
                   <td headers="Test Operation">
                       <asp:DropDownList ID="ddlFooterTestOperation" runat="server" Visible="true">
                       </asp:DropDownList>
                   </td>
                   <td headers="Test Data">
                       <asp:TextBox ID="txtFooterTestData" runat="server" Visible="true"></asp:TextBox>
                   </td>
                   <td headers="ReUseableOutputData">
                       <asp:TextBox ID="txtFooterReUseableOutputData" runat="server" Visible="true"></asp:TextBox>
                   </td>
                   <td headers="StepDescription">
                       <asp:TextBox ID="txtFooterStepDescription" runat="server" Visible="true"></asp:TextBox>
                   </td>
               </tr>
           </table>
       </EmptyDataTemplate>
   </asp:GridView>

Posted 30-Dec-13 1:53am

ShaHam11

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

♥…ЯҠ…♥ · Answer 1 · 2013-12-30T02:05:00

Solution 1

Hi Shaham,

This is tricky and nice question, you can implement some tricky solution to overcome the issue ;-)
Earlier in previous project I came across the same kind of requirement, my goodness we use JQuery in that project.
Here is What I have done

1) Set some flag variable(Ex: isEditClicked) to true when user clicks on edit row option.
2) Now If user clicks on Update button(on success) or Cancel button change isEditClicked = false so that it ensures that edit is complete/Cancelled.
3) Check the value isEditClicked whenever user tend to click on other links, if its true then alert user that yet to save pending changes or something otherwise do that link process.

Hope this helps you a bit.

Regards,
RK

Posted 30-Dec-13 2:05am

♥…ЯҠ…♥

Updated 30-Dec-13 2:06am

v2

Comments

ShaHam11 31-Dec-13 3:07am

Hi Thanks for the reply I am just a beginner in asp.net can you elaborate how to implement this fucntion

♥…ЯҠ…♥ 31-Dec-13 3:43am

Do you use Javascript or Jquery in your project? then whenever user clicks on the row edit button then assign a flag variable to edited status, then if user clicks on any other link then call another javascript function to validate the status of the flag if its true then alert the user otherwise just do proceed

ShaHam11 2-Jan-14 6:34am

Hi RK,

I guess this script will solve the problem <script language="JavaScript">
var needToConfirm = true;

window.onbeforeunload = confirmExit;
function confirmExit()
{
if (needToConfirm)
return message to display in dialog box;
}
</script>

However i have a different problem, There are lot of links on the tree view if user clicks or if user navigates to some other URL it should prompt the above message but How do i make it using the above script