fancybox is not working for aspxgridview pages except first page

Question

I'm using fancybox on my page in Aspxgridview. In first grid page, it is working correctly. When I click the grid's other pages, fancybox does not work and url is opened in new tab. I want to open hyperlink urls in fancybox popup. What can be the problem?

<script type="text/javascript">        
    $(document).ready(function () {
        $('.fancybox').fancybox({
            openEffect: 'none',
            closeEffect: 'none',
            showCloseButton: true,
            titleShow: true,
            transitionIn: 'elastic',
            transitionOut: 'elastic',
            width: '80%',
            heigh: '80%',
            autoScale: true,
            type: 'iframe',
            onClosed: function() {
                location.reload();
                return;
            }
        });
    });
</script>

...

    <dx:ASPxGridView ID="gridDX" ClientInstanceName="grid" runat="server" KeyFieldName="ID" OnDataBinding="gridDX_DataBinding" AutoGenerateColumns="False" OnPageIndexChanged="gridDX_PageIndexChanged">
      <Columns>
        <dx:GridViewDataColumn FieldName="Edit" Caption="View" VisibleIndex="1">
          <DataItemTemplate>
            <dx:ASPxHyperLink CssClass="fancybox" ID="hypShowEdit" ClientInstanceName="hypShowEdit" runat="server" ImageUrl="~/img/edit.png" Text="Show/Edit" NavigateUrl="Documents.aspx">
            </dx:ASPxHyperLink>                   
          </DataItemTemplate>
        </dx:GridViewDataColumn>
      </Columns>
    </dx:ASPxGridView>

In addition, I've a pageindexchanged method:

protected void gridDX_PageIndexChanged(object sender, EventArgs e)
    {
        var view = sender as ASPxGridView;
        if (view == null) return;
        var pageIndex = view.PageIndex;
        gridDX.PageIndex = pageIndex;
    }

Answer 1

Extract the fancybox initialization to a separate method and call it within ASPxClientGridView.Init (not the jQuery document.ready) and EndCallback events.

Check out the Using jQuery / jQuery UI libraries with DevExpress ASP.NET Controls / MVC Extensions guide regarding this.

//$(document).ready(function () {
function InitFancyBox() {
    $('.fancybox').fancybox({
        openEffect: 'none',
        closeEffect: 'none',
        showCloseButton: true,
        titleShow: true,
        transitionIn: 'elastic',
        transitionOut: 'elastic',
        width: '80%',
        heigh: '80%',
        autoScale: true,
        type: 'iframe',
        onClosed: function() {
            location.reload();
            return;
        }
    });
}
//});

<dx:ASPxGridView ...>
  <Columns>
    <dx:GridViewDataColumn ...>
      <DataItemTemplate>
        <dx:ASPxHyperLink CssClass="fancybox" ...>
        </dx:ASPxHyperLink>
      </DataItemTemplate>
    </dx:GridViewDataColumn>
  </Columns>
  <ClientSideEvents Init="InitFancyBox" EndCallback="InitFancyBox" />
</dx:ASPxGridView>