Jquery – How to capture ‘Update’ click event in ASP.NET GridView with jQuery

asp.netgridviewjquery

I need to capture the 'Update' click event with jQuery in an asp.net GridView and have no way of knowing where to start. I'm still rather new to jQuery. My GridView is attached to a SQLDataSource and, naturally, has all the bells and whistles that that combination affords. Any help would be greatly appreciated.

Best Answer

Simply add the script block anywhere after the GridView is declared and it should work with the default non-templated GridView column. No code in the codebehind as it is purely a Javascript solution.

Use this if you are using a Link-type GridView column:

<script type="text/javascript">
    // a:contains(The text of the link here)
    $('#<%= theGridViewID.ClientID %> a:contains(Update)').click(function () {
        alert('Update click event captured from the link!');
        // return false: stop the postback from happening
        // return true or don't return anything: continue with the postback
    });
</script>

Use this if you are using a Button-type GridView column and you don't want your Javascript to block the postback:

<script type="text/javascript">
    // :button[value=The text of the button here]
    $('#<%= theGridViewID.ClientID %> :button[value=Update]').click(function () {
        alert('Update click event captured from the button!');
    });
</script>

Use this if you are using a Button-type GridView column and you want to have control whether to continue with the postback or not:

<script type="text/javascript">
    // :button[value=The text of the button here]
    var updateButtons = $('#<%= theGridViewID.ClientID %> :button[value=Update]');
    updateButtons
        .attr('onclick', null)
        .click(function () {
            alert('Update click event captured from the button!');
            var doPostBack = true; // decide whether to do postback or not
            if (doPostBack) {
                var index = updateButtons.index($(this));
                // 'Update$' refers to the GridView command name + dollar sign
                __doPostBack('<%= theGridViewID.UniqueID %>', 'Update$' + index);
            }
        });
</script>

Update: I think this would be a better solution in replacement of the last (3rd) script block I presented above, since you won't need to update the __doPostBack function call manually based on the command name, and as such, it should be less error-prone:

<script type="text/javascript">
    // :button[value=The text of the button here]
    var updateButtons = $('#<%= theGridViewID.ClientID %> :button[value=Update]');
    updateButtons.each(function () {
        var onclick = $(this).attr('onclick');
        $(this).attr('onclick', null).click(function () {
            alert('Update click event captured from the button!');
            var doPostBack = true; // decide whether to do postback or not
            if (doPostBack) {
                onclick();
            }
        });
    });
</script>

Credit to Aristos for this idea. :)

Related Topic