Home » General Scripting and Coding » ASP.Net » Re-bind the GridView on the Parent Page after FancyBox close

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

Posted on by

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
}

 

Comments have now been disabled. If you have a question to ask about this post please ask the community!