Sunday 30 March 2008

AJAX/Atlas UpdatePanel and UpdateProgress with GridView

There are a few basic tricks that I have discovered today.

1) When you click on a button to update an UpdatePanel, you can hide a GridView by adding code to the OnClientClickEvent (so only the UpdateProgress shows while the UpdatePanel is updating)

i.e.

OnClientClick="if(window.document.all('GridView')) window.document.all('GridView1').style.visibility = 'hidden';"

2) You can intercept the __doPostBack to add functionality by injecting Javascript code. The benefit of this is when you enable Paging on the GridView and the user clicks on another page. i.e.
inject the following code using Page.ClientScript.RegisterStartupScript(this.GetType(), "script" ...


// save the original function pointer of the .NET __doPostBack function
// in a global variable netPostBack
var netPostBack = __doPostBack
// replace __doPostBack with your own function
__doPostBack = GridViewHide;

function GridViewHide (eventTarget, eventArgument)
{ alert('test');
if(eventArgument.indexOf('Page') == 0) window.document.all(eventTarget).style.visibility = 'hidden';
// call base functionality

return netPostBack (eventTarget, eventArgument);
}

The effect is pretty cool.

No comments: