Click here to Skip to main content
12,630,137 members (25,054 online)
Click here to Skip to main content
Add your own
alternative version

Stats

13.7K views
151 downloads
8 bookmarked
Posted

Cancel GridView Edit on Escape Key Press

, 20 Mar 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
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)

Share

About the Author

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
Software Developer Mindfire Solutions
India India
Official Facebook Page - Tadit Dash

Proud Indian | Microsoft MVP | CodeProject MVP | Speaker | Author | DZone Most Valuable Blogger | Community Expert | Moderator | jsfiddler | Cook | Dancer

Currently working @Mindfire Solutions.
Love to code and help guys to Trap the Bug.

My Tech Blog

taditdash.wordpress.com

Programming Community Profiles

jsfiddle | Stack Overflow

Other Blog Profiles

Mindfire CRM Team Blog | Mindfire Blog

Social Profiles

Facebook | Twitter | LinkedIn | Google+

Awards

  1. DZone Most Valuable Blogger
  2. Microsoft MVP 2014, 2015, 2016
  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

You may also be interested in...

Comments and Discussions

 
QuestionProblem Pin
esb777-Nov-14 17:45
memberesb777-Nov-14 17:45 
AnswerRe: Problem Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)11-Nov-14 21:53
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)11-Nov-14 21:53 
GeneralRe: Problem Pin
esb7712-Nov-14 5:08
memberesb7712-Nov-14 5:08 
GeneralRe: Problem Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)12-Nov-14 20:49
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)12-Nov-14 20:49 
QuestionAsp.net Pin
Member 1092869723-Aug-14 0:10
memberMember 1092869723-Aug-14 0:10 
AnswerRe: Asp.net Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)23-Aug-14 22:06
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)23-Aug-14 22:06 
QuestionOne query regarding your jquery code Pin
Tridip Bhattacharjee26-Mar-14 22:18
memberTridip Bhattacharjee26-Mar-14 22:18 
AnswerRe: One query regarding your jquery code Pin
Tadit Dash26-Mar-14 23:03
protectorTadit Dash26-Mar-14 23:03 
GeneralRe: One query regarding your jquery code Pin
Tridip Bhattacharjee27-Mar-14 0:22
memberTridip Bhattacharjee27-Mar-14 0:22 
GeneralRe: One query regarding your jquery code Pin
Tadit Dash27-Mar-14 0:45
protectorTadit Dash27-Mar-14 0:45 
SuggestionSource Code Pin
Yashwanth R20-Mar-14 3:33
memberYashwanth R20-Mar-14 3:33 
GeneralRe: Source Code Pin
Tadit Dash20-Mar-14 20:17
protectorTadit Dash20-Mar-14 20:17 
GeneralRe: Source Code Pin
Tadit Dash26-Mar-14 20:37
protectorTadit Dash26-Mar-14 20: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.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.161205.3 | Last Updated 20 Mar 2014
Article Copyright 2014 by Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid