Show/Hide Datagrid columns using JQuery

Recently one of our customer came with a special requirement of letting the users to show/hide the columns in a grid as he wish. The customer was little hesitant to ask for this requirement. (he was thinking, it will be difficult to achieve). But we gave him confidence by achieving this by using JQuery. This is how we achieved this functionality

Grid code:

<asp:GridView ID="grdView" runat="server" AutoGenerateColumns="false" OnRowDeleting="grdView_RowDeleting"
    EnableViewState="true">
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <div id="ColAH" >
                    <asp:ImageButton ID="ImageButtonDelete2" runat="server" ImageUrl="~/_assets/img/delete.png"
                        CssClass="deleteButton" />
                </div>
            </HeaderTemplate>
            <ItemTemplate>
                <div id="ColA" class="columnA">
                    <asp:Label ID="l1" runat="server" Text='<%# Eval("ColA") %>'></asp:Label>
                </div>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <HeaderTemplate>
                <div id="ColBH" >
                    <asp:ImageButton ID="ImageButtonDelete1" runat="server" ImageUrl="~/_assets/img/delete.png"
                        CssClass="deleteButton" />
                </div>
            </HeaderTemplate>
            <ItemTemplate>
                <div id="ColB" class="columnB">
                    <asp:Label ID="l2" runat="server" Text='<%# Eval("ColB") %>'></asp:Label>
                </div>
            </ItemTemplate>
        </asp:TemplateField>
       
    </Columns>
</asp:GridView>

Javascript code:

    $(document).ready(function() {
       
        
        $('#ColAH').each(
            function(e)
            {
            $(this).find(".deleteButton").click(
                function (e)
                {
                e.preventDefault();
                var res = getDivs('columnA');
                    for(var i=0; i
                    {
                        var state = res[i].style.display;
                        if (state == 'block' || state == '')
                        {
                            res[i].style.display = 'none';
                        }
                        else
                        {
                            res[i].style.display = 'block';
                        }
                        alert(res[i].style.display);
                    }
                }
               
            );
            }
        );
       
         $('#ColBH').each(
            function(e)
            {
            $(this).find(".deleteButton").click(
                function (e)
                {
                e.preventDefault();
                var res = getDivs('columnB');
                    for(var i=0; i
                    {
                        var state = res[i].style.display;
                        if (state == 'block' || state == '')
                        {
                            res[i].style.display = 'none';
                        }
                        else
                        {
                            res[i].style.display = 'block';
                        }
                        alert(res[i].style.display);
                    }
                }
               
            );
            }
        );
       
    });

    function deleteRow(args) {
        $(args).click();
        return false;
    }
   
    function getDivs(cName)
    {
    var ar = document.getElementsByTagName("div");
    var divArray = new Array();
   for(var i=0; i
     if(ar[i].className == cName ){
        divArray.length++;
        divArray[divArray.length -1] = ar[i];
     }
  }
  return divArray;
}
  
function hideColumn(id)
{
var state = document.getElementById(id).style.display;
if (state == 'block' || state == '') {
     document.getElementById(id).style.display = 'none';
} else {
       document.getElementById(id).style.display = 'block';
   }
}
    function confirm(message, callback) {
        $('#confirm').modal({
            close:false,
            overlayId:'confirmModalOverlay',
            containerId:'confirmModalContainer',
            onShow: function (dialog) {
                dialog.data.find('.message').append(message);

                // if the user clicks "yes"
                dialog.data.find('.yes').click(function () {
                    // call the callback
                    if ($.isFunction(callback)) {
                        callback.apply();
                    }
                    // close the dialog
                    $.modal.close();
                });
            }
        });
     }
                           
 And don't forget to include the Jquery.

Kudo to JQuery!!!!! JQuery is a proof for "Impossible is Nothing"!!!!