Cancel GridView Edit on Escape Key Press

[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.

Set Content inside AJAX HTMLEditor and EditorExtender using JavaScript

HTML Table set inside Editor and EditorExtender

HTML Table set inside Editor and EditorExtender


If you want to set text inside AJAX HTMLEditor or HTMLEditorExtender, then this is the right place. Enjoy the Tip.

What?

I am going to talk about ASP.NET Ajax HTMLEditor and HTMLEditorExtender.

So, what is the issue?

There are two types of Editors available.

  1. HTMLEditor
  2. HTMLEditorExtender

If you are going to set Text or HTML inside the Edit Panel of any of these Controls, then you can’t do this directly using document.getElementById("EditorID");. That is because the HTMLEditor or HTMLEditorExtender are rendered on Browser with the help of many divs.

Then what is the Logic?

We need to identify the div which is used to the actual content and set the Text or HTML inside it. The way of setting this inside Editor and Extender will be different.

For HTMLEditor, let’s identify the Edit Panel in source HTML

Ajax HTMLEditor Browser Rendered View

Ajax HTMLEditor Browser Rendered View

For HTMLEditorExtender, let’s identify the Edit Panel in source HTML

Ajax HTMLEditorExtender Browser Rendered View

Ajax HTMLEditorExtender Browser Rendered View


So, we just need to assign Text or HTML inside these body or div.

How to do this?

For HTMLEditor

There is a method present named as set_content(), by which we can easily do this task.

var htmlEditor = $find("<%= htmlEditorDemo.ClientID %>");
htmlEditor.set_content(tableToBeSetInsideEditPanel);

Here tableToBeSetInsideEditPanel is a string containing one table Markup.

For HTMLEditorExtender

  • Using innerHTML

    First find the EditorExtender using ID, then assign the required HTML to its

    var htmlEditorExtender = $find("<%= htmlEditorExtenderDemo.ClientID %>");
    htmlEditorExtender._editableDiv.innerHTML = tableToBeSetInsideEditPanel;
  • Using jQuery .html()

    Get only the Edit Panel div by the Class Name .ajax__html_editor_extender_texteditor, then call .html() to set the required HTML inside that.

    var htmlEditorExtender = $('.ajax__html_editor_extender_texteditor');
    htmlEditorExtender.html(tableToBeSetInsideEditPanel);

Doubts/Queries/Modifications?

If you have any, feel free to comment. Please Like and Share the Blog, if you find it interesting.