Re-bind the GridView on the Parent Page after FancyBox close

I have a GridView with hyperlinks in some of the columns, which open up a new page in a FancyBox. FancyBox is a pretty cool lightbox alternative. Anyway, in the FancyBox page content you can make changes which will affect values in the parent page’s GridView. So when the FancyBox is closed, I needed to refresh the parent GridView. Here is how you can re-bind the GridView on the Parent Page after FancyBox close:

First I create a button, gave it an OnClick event, and used CSS to make it hidden:

<asp:Button ID="fancyBt" OnClick="fancyBt_Click" style="visibility: hidden; display: none;" runat="server" Text="Hidden - used to update GV on FancyBox close" />

FancyBox has a handy afterClose function which, unsurprisingly, gets calledafter the FancyBox is closed. What it does in here is call the click event of my hidden button:

$('.fancybox').fancybox({
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 600,
'speedOut': 200,
'overlayShow': false,
'width': 1000,           // set the width
'height': 400,           // set the height
'type': 'iframe',       // tell the script to create an iframe
'scrolling': 'no',
afterClose: function () {
//refresh GV
document.getElementById('<%=fancyBt.ClientID%>').click();
}
});

and then of course, the code behind for the button click event should rebind the gridview!

protected void fancyBt_Click(object sender, EventArgs e)
{
//rebind GridView
}