Click here to Skip to main content
15,903,385 members
Articles / Web Development / ASP.NET

Cancel GridView Edit on Escape Key Press

20 Mar 2014CPOL2 min read 28.8K   182   8   13
This is one interesting research resulting a Trick to Cancel the GridView Editing Mode, when you press the Escape Key. Many guys asked this question in forums and those are still unanswered.
[DEMO] Cancel GridView Edit on Escape KeyPress

[DEMO] Cancel GridView Edit on Escape KeyPress

This is one interesting research resulting a Trick to Cancel the GridView Editing Mode, when you press the Escape Key. Many guys asked this question in forums and those are still unanswered. Let’s learn and explore.

Is there a Logic?

Ofcourse, there is and its really very simple. When GridView Default Edit Button is clicked on a particular Row, it shows one TextBox for each Cell and one Update and Cancel Button. So, we just need to find that Cancel Button and hit its Click Event explicitly, that’s hit.

Seems Simple, but How to?

With the help of jQuery, which always makes a Developer’s life easier.
Okay, let’s click the Edit Button on First Row. You can see one TextBox, Update and Cancel Button appearing on the Row.

First Row in Edit Mode

First Row in Edit Mode


Referring to the generated HTML (following image), we can see that the Cancel Button does not have any Identity (ID) attribute associated with it.
<a href="javascript:__doPostBack('gvTestEscapePress','Cancel$0')">Cancel</a>
First Row Cancel Button Source HTML

First Row Cancel Button Source HTML


So, the only option here is to find the Button which has the Text as “Cancel“.

Using the Code

For GridView Editing

I have added one CommandField for the Edit Button. You can also use AutoGenerateEditButton="true".

<asp:GridView ID="gvTestEscapePress" 
              runat="server" 
              OnRowEditing="gvTestEscapePress_RowEditing"
              OnRowUpdating="gvTestEscapePress_RowUpdating" 
              OnRowCancelingEdit="gvTestEscapePress_RowCancelingEdit">
    <Columns>
        <asp:CommandField ShowEditButton="true" HeaderText="Edit" />
    </Columns>
</asp:GridView>

To handle the Edit, Update and Cancel Events, we have declared the respective Events (OnRowEditing, OnRowUpdating and OnRowCancelingEdit) inside GridView Markup.
Now, let’s define these Events on Code Behind Page.

/// <summary>
/// This Event shows a particular Row in Editing Mode.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void gvTestEscapePress_RowEditing(object sender, GridViewEditEventArgs e)
{
    // Set the New Edit Index.
    gvTestEscapePress.EditIndex = e.NewEditIndex;

    // Bind data to the GridView control.
    BindGrid();
}

/// <summary>
/// This Event Cancels the Row Editing on Cancel Button Click.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void gvTestEscapePress_RowCancelingEdit(Object sender, 
                                                         GridViewCancelEditEventArgs e)
{
    // Reset the edit index.
    gvTestEscapePress.EditIndex = -1;

    // Bind data to the GridView control.
    BindGrid();
}

I am not writing the Update Event code here as it is not important in our discussion. You can refer see that Event in the Source Code by Downloading it.

For Escape Key Press

We will use the following code in order to check the Event KeyCode. If that is 27, it would refer to Escape Key.

<script type="text/javascript">
    $(document).keyup(function (e) {
        if (e.keyCode == 27) {
            // Here we will put the Cancel GridView Editing Logic.    
        }
    });
</script>

For Cancelling the GridView Edit Mode

  1. Here we are searching all anchor (a) tags inside the GridView by .find('a').
  2. Then to get only the Cancel Button, we need to filter by Text using .filter(function () { return $(this).text() === "Cancel" }).
  3. Now it is just a matter of clicking the Button by .click(). Before that, I am just showing one message and on .fadeOut() function, I am clicking the Button.
<script type="text/javascript">
    $(document).keyup(function (e) {
        if (e.keyCode == 27) {
            // Find the Generated Cancel Button for the Row in Edit Mode.
            var cancelButton = $('#<%= gvTestEscapePress.ClientID %>')
                               .find('a')
                               .filter(function () { return $(this).text() === "Cancel" });

            // If Cancel Button is found, then show message and click the Cancel Button.
            if (cancelButton != null && cancelButton.length > 0) {
                $("#lblShowMessage")
                .html("You pressed Escape. Cancelling the GridView Edit...")
                .fadeOut(3000, function () {
                    buttonClick(cancelButton[0]);
                });
            }
        }
    });

    // This function fires the Button Click Event.
    function buttonClick(button) {
        button.click();
    }
</script>

Did you like the post?

Feel free to comment. Please Like and Share the Blog, if you find it interesting.


License

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


Proud Indian | Author | TEDx Speaker | Microsoft MVP | CodeProject MVP | Speaker | DZone Most Valuable Blogger| jsfiddler

My Website

taditdash.com

Programming Community Profiles

jsfiddle | Stack Overflow

Social Profiles

Facebook | Twitter | LinkedIn

Awards


  1. DZone Most Valuable Blogger
  2. Microsoft MVP 2014, 2015, 2016, 2017, 2018
  3. Code Project MVP 2014, 2015, 2016
  4. Star Achiever of the Month December 2013
  5. Mindfire Techno Idea Contest 2013 Winner
  6. Star of the Month July 2013

Comments and Discussions

 
QuestionProblem Pin
esb777-Nov-14 16:45
esb777-Nov-14 16:45 
AnswerRe: Problem Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)11-Nov-14 20:53
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)11-Nov-14 20:53 
GeneralRe: Problem Pin
esb7712-Nov-14 4:08
esb7712-Nov-14 4:08 
GeneralRe: Problem Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)12-Nov-14 19:49
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)12-Nov-14 19:49 
QuestionAsp.net Pin
Member 1092869722-Aug-14 23:10
Member 1092869722-Aug-14 23:10 
can i add quicksearch in the a bove link is it possible....
AnswerRe: Asp.net Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)23-Aug-14 21:06
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)23-Aug-14 21:06 
QuestionOne query regarding your jquery code Pin
Tridip Bhattacharjee26-Mar-14 21:18
professionalTridip Bhattacharjee26-Mar-14 21:18 
AnswerRe: One query regarding your jquery code Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)26-Mar-14 22:03
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)26-Mar-14 22:03 
GeneralRe: One query regarding your jquery code Pin
Tridip Bhattacharjee26-Mar-14 23:22
professionalTridip Bhattacharjee26-Mar-14 23:22 
GeneralRe: One query regarding your jquery code Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)26-Mar-14 23:45
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)26-Mar-14 23:45 
SuggestionSource Code Pin
Yashwanth R20-Mar-14 2:33
Yashwanth R20-Mar-14 2:33 
GeneralRe: Source Code Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)20-Mar-14 19:17
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)20-Mar-14 19:17 
GeneralRe: Source Code Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)26-Mar-14 19:37
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)26-Mar-14 19:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.