FancyBox, UpdatePanel and NestedGrid

2 posts, 0 answers
  1. Jako
    Jako avatar
    107 posts
    Member since:
    Apr 2012

    Posted 22 Aug 2013 Link to this post

    Hi everyone

    I have a RadGrid, inside a UpdatePanel, so that the page doesn't jump to the top during postbacks. 

    In the Grid I have a fancy box that opens up a deny window, but when I expand a grid item, the page loses the document.Ready function and the FancyBox stops working, any idea how to get around this?

    Here is my code:
            <script type="text/javascript">
                $(document).ready(function () {
     
                    $("a.denyButton").fancybox({
                        'width': 400,
                        'height': 400,
                        'autoScale': true,
                        'transitionIn': 'none',
                        'transitionOut': 'none',
                        'type': 'iframe',
                        'onClosed': function () {
                            window.location = "Index.aspx";
                        }
                    });
     
                });
            </script>
    <asp:UpdatePanel ID="uxBookUpdatePanel" runat="server">
        <ContentTemplate>         
            <telerik:RadGrid ID="uxBookOrderGrid" runat="server" OnNeedDataSource="uxBookOrderGrid_NeedDataSource">
                <MasterTableView DataKeyNames="BookOrderID" CssClass="quantitytable table table-striped">
                    <NestedViewTemplate>
                        <div class="tabstrip-wrapper">
                            <telerik:RadTabStrip ID="uxTabMenuStrip" runat="server" MultiPageID="uxMultiPageWIPDetail" SelectedIndex="0" Align="Justify" >
                                <Tabs>                           
                                    <telerik:RadTab Text="Book Order Details" PageViewID="uxBookOrderDetails"/>                             
                                </Tabs>
                            </telerik:RadTabStrip>
                            <telerik:RadMultiPage ID="uxMultiPage" runat="server" SelectedIndex="0" CssClass="tabstrip-page">
                                <telerik:RadPageView ID="uxBookOrderDetails" runat="server">
                                    ORDER DETAIL VIEW
                                </telerik:RadPageView>
                            </telerik:RadMultiPage>
                        </div>
                    </NestedViewTemplate>
                    <Columns>
                        <telerik:GridBoundColumn FilterControlWidth="90%" SortExpression="OrderID" HeaderText="Order ID" DataField="OrderID" UniqueName="OrderID" CurrentFilterFunction="Contains" ShowFilterIcon="false" AutoPostBackOnFilter="true" />
                            .
                            .
                            .
                            <ItemTemplate>
                                <telerik:RadButton ToolTip="Approve Order" CssClass="approveButton" ID="uxBookOrderApprove" runat="server" OnClick="uxBookOrderApprove_Click">
                                    <Image EnableImageButton="true" />
                                </telerik:RadButton>
                                    
                                <asp:HyperLink ToolTip="Deny Order" Width="25px" CssClass="denyButton" ID="uxBookOrderDeny" runat="server"/>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn DataField="BookOrderStatusID" UniqueName="BookOrderStatusID" Display="false" />
                    </Columns>    
                    <NoRecordsTemplate>
                        No Book Orders waiting to be Approved.
                    </NoRecordsTemplate>              
                </MasterTableView>
            </telerik:RadGrid>
        </ContentTemplate>
    </asp:UpdatePanel>
        </div></div></div>
    </asp:Content>
  2. Jako
    Jako avatar
    107 posts
    Member since:
    Apr 2012

    Posted 22 Aug 2013 Link to this post

    I just had to change

    $(document).ready(function () {

    to 

    function pageLoad() {

    #facepalm
Back to Top