Asp Gridview Render the header row as thead and tbody

Asp Gridview Render the header row as thead and tbody:

Description:

                When setting the property UseAccessibleHeader = true, it replaces the<td> elements of the header row with the correct <th> which means table header. It also adds the scope property of these header elements making them more accessible.

C# code:

      //This replaces <td> with <th> and adds the scope attribute
      gvtabledetails.UseAccessibleHeader = true;

      //This will add the <thead> and <tbody> elements
      gvtabledetails.HeaderRow.TableSection = TableRowSection.TableHeader;

      //This adds the <tfoot> element. Remove if you don't have a footer row 
      gvtabledetails.FooterRow.TableSection = TableRowSection.TableFooter;

Reference Link:

http://madskristensen.net/post/make-the-gridview-control-accessible

Capture Postback event Javascript ( Client side )

Capture Postback event Javascript:

Description:

        This piece of javascript code can intercept dopostback event in asp.net
        
        get the Dopostback event and call it after the AlwaysFireBeforeFormSubmit function. I used this code to show my overlay effect with progress bar and let the postback occurs.

Javascript:

<script type="text/javascript">
        var __oldDoPostBack = __doPostBack;
        __doPostBack = AlwaysFireBeforeFormSubmit;

        function AlwaysFireBeforeFormSubmit(eventTarget, eventArgument) {

            // Here we can add our function needed to execute before postback.

            return __oldDoPostBack(eventTarget, eventArgument);
        }
</script>

Relevant Post:

Overlay effect with jQuery and CSS

Overlay effect with jQuery and CSS

Overlay effect with jQuery:       

       1. This html code can be used as overlay effect when event postback occurs. 
       2. In this html code div with progress class used to show progress bar and the div with loading class used for displaying loading image or font inside the overlay effect. 
       3. Here I used font awesome icons.
       4. Switch the div style from display none to display block it will be shown as in the screen by applying jquery.

HTML:

    <div class="overlayidentifier overlay mouse-events-off" style="display: none">
        <div class="progress progress-mini ">
            <div style="width: 10%" class="pbidentifier progress-bar progress-bar-success">
            </div>
        </div>
        <div class="loading">
            <i class='icon-spinner icon-spin pink icon-5x'></i><i class='icon-blank icon-spin icon-5x'>
            </i>
        </div>
    </div>

CSS:
        /* Overlay effect for div */
        .overlay
        {
            background-color: rgba( 0, 0, 0, .2 );
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0; /* also -moz-opacity, etc. */
            z-index: 100000;
        }
        
        /* Progres bar styles */
        .overlay .progress
        {
            height: 3px !important;
            z-index: 100001;
        }

         /* loading image styles */
        .loading
        {
            text-align: center;
            height: 100%;
        }
        .loading i
        {
            top: 45% !important;
            position: absolute;
        }

jQuery:

$('.overlayidentifier').css('display', 'block');
$('.overlayidentifier').css('display', 'none');

------------------------------------------------------------------------------------------------------------