Friday, February 18, 2011

How to set buzy mouse pointer/ Progress bar while async post back.


The Asyn post back mostly done by Ajax or by Update panel.
So by the meantime we have to show the progress bar. but it is not good practive.
B'coz when you hit the button for full post back than your progress bar will not
come then buzy mouse pointer will show. so we should use buzy pointer and disable the backgroud. We can achive this by following method.



step 1.  Create following CSS.
.progress_overlay
{
          position: fixed;
          width: 100%;
          height: 100%;
          top: 0px;
          left: 0px;
          background: #fff;
          filter: alpha(opacity=5);
          z-index:20000;
}
.progress_container
{
          position: fixed;
          width: 100%;
          height: 100%;
          top: 0px;
          left: 0px;
          background: transparent;
          z-index:20001;
}
.progress_inner
{
          display: block;
          padding: 10px 10px 10px 10px;
          text-align:center;
          width: 380px;
          height: 50px;
          margin: 25% auto 0 auto;
          background: transparent;
          z-index:20002;
}

Step 2.Add followind dive in your master page or page where you want to show this.


[div id="progress_overlay"]
        [div id="progress_overlay_inside"]
        [/div]
    [/div]
    [div style="display: none" id="progress_container"]
        [div id="progress_inner"]
        [/div]
    [/div]


  


Step 3. Add following JS If you are using Update panel

/* Region for progress bar / busy mouse pointer */

             /* Get the instance of PageRequestManager.*/
             var prm = Sys.WebForms.PageRequestManager.getInstance();
             /* Add initializeRequest and endRequest */
             prm.add_initializeRequest(prm_InitializeRequest);
             prm.add_endRequest(prm_EndRequest);
          
             /* Called when async postback begins */
             function prm_InitializeRequest(sender, args) {
                 /* get the div and set it to visible and disable the background */
                 ShowHourGlass();
                $("#progress_container").show();
                $("#progress_overlay").addClass('progress_overlay');
                $("#progress_container").addClass('progress_container');
                $("#progress_inner").addClass('progress_inner');
              }

             /* Called when async postback ends */
             function prm_EndRequest(sender, args) {
                 /* get the div and hide it again */
                 /* Remove the class*/
                 HideHourGlass();
                 $("#progress_container").hide();
                 $("#progress_overlay").removeClass('progress_overlay');
                 $("#progress_container").removeClass('progress_container');
                 $("#progress_inner").removeClass('progress_inner');
             }


If we are using Ajax call method than just call these method before start and end of method.

/* End Region for progress bar / busy mouse pointer*/

Here we are showing hour pointer and hide hour class.

for example

      function HideHourGlass()
{
Wake("input"); // Not all needed in Mozilla browsers - just TD?
Wake("select");
Wake("a");
Wake("tr");
Wake("td");

document.body.style.cursor = '';
}

function Wake(tagName)
{
var ctrl, i;
var tags = document.getElementsByTagName(tagName);

for (i=0; i < tags.length; i++)
{
ctrl = tags[i];
ctrl.style.cursor = '';
}
}

function Sleep(tagName)
{
var ctrl, i;
var tags = document.getElementsByTagName(tagName);

for (i=0; i < tags.length; i++)
{
ctrl = tags[i];
ctrl.style.cursor = 'wait';
}
}

function ShowHourGlass()
{
Sleep("input"); // Not all needed in Mozilla browsers - just TD?
Sleep("select");
Sleep("a");
Sleep("tr");
Sleep("td");

document.body.style.cursor = 'wait';
//window.status = "Processing, please wait";
}

How to increase AsyncPostBackTime out of update panel


Like in following code line  we set the 15 Minute Asysn time

 ScriptManager _scriptMan = ScriptManager.GetCurrent(this);
            _scriptMan.AsyncPostBackTimeout = 3600 * 15;

Thanks
HelponDesk Team