RadGrid disappears inside MultiPage with TabStrip

3 posts, 0 answers
  1. Steven
    Steven avatar
    27 posts
    Member since:
    May 2012

    Posted 27 Nov 2012 Link to this post

    I know this is AJAX related, but I can't seem to figure it out.  I have a TabStrip with a MultiPage and PageViews.  On one of the PageViews is a RadGrid.  For some reason when I click the Add button on the RadGrid (or do anything for that matter) I have to click to another tab and back to see the change.  I thought I could solve this by adding the grid and the multipage to the AJAX Manager, but that's not working.  I've tried wrapping the grid in its own AJAX panel, but that didn't work either.

    Ideas?

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PurchaseRequestControl.ascx.cs" Inherits="Controls.PurchaseRequestControl" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <link href="../Styles/PurchaseRequestStyleSheet.css" rel="stylesheet" type="text/css" />
     
    <asp:PlaceHolder runat="server" ID="placeHolder">
        <script type="text/javascript">
            function onNavigate(isMoveNext) {
                var tabs = $find('<%= tabStrip.ClientID %>');
                var totalNumOfTabs = tabs.get_tabs().get_count();     
     
                if (totalNumOfTabs > 0) {
                    var newTabIndex;
                    var currentTabIndex = tabs.get_selectedIndex();
     
                    if (isMoveNext) {
                        if (currentTabIndex + 2 == totalNumOfTabs) {
                            newTabIndex = 0;
                        }
                        else {
                            newTabIndex = currentTabIndex + 2;
                        }
                    }
                    else {
                        if (currentTabIndex - 1 < 0) {
                            newTabIndex = totalNumOfTabs - 2;
                        }
                        else {
                            newTabIndex = currentTabIndex - 2
                        }
                    }
                    tabs.set_selectedIndex(newTabIndex);
                }
            }
        </script>
    </asp:PlaceHolder>
     
    <telerik:RadAjaxManager ID="ajaxManager" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="tabStrip">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="tabStrip" />
                    <telerik:AjaxUpdatedControl ControlID="multiPage" />               
                </UpdatedControls>
            </telerik:AjaxSetting
            <telerik:AjaxSetting AjaxControlID="multiPage">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="tabStrip" />
                    <telerik:AjaxUpdatedControl ControlID="multiPage" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="cartgrdItems">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="multiPage" LoadingPanelID="ajaxLoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="tabStrip" LoadingPanelID="ajaxLoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>                 
        </AjaxSettings>
    </telerik:RadAjaxManager>
     
    <telerik:RadAjaxLoadingPanel runat="server" ID="ajaxLoadingPanel" InitialDelayTime="500"></telerik:RadAjaxLoadingPanel>
     
    <div id="control-wrapper">
        <div class="title-and-nav">            
            <span></span>
            <telerik:RadTabStrip runat="server"
                ID="tabStrip"
                MultiPageID="multiPage" 
                CssClass="tab-strip"
                EnableEmbeddedSkins="False"               
                AutoPostBack="true"
                OnTabClick="tabStrip_TabClick">
                <Tabs>
                    <telerik:RadTab IsSeparator="true" Text="1" CssClass="tab-number" Enabled="false"></telerik:RadTab>
                    <telerik:RadTab CssClass="tab" SelectedCssClass="tab-selected" Text="Buyer" PageViewID="pvBuyer"></telerik:RadTab>                   
                    <telerik:RadTab IsSeparator="true" Text="2" CssClass="tab-number" Enabled="false"></telerik:RadTab>
                    <telerik:RadTab CssClass="tab" SelectedCssClass="tab-selected" Text="Supplier" PageViewID="pvSupplier"></telerik:RadTab>
                    <telerik:RadTab IsSeparator="true" Text="3" CssClass="tab-number" Enabled="false"></telerik:RadTab>
                    <telerik:RadTab CssClass="tab" SelectedCssClass="tab-selected" Text="Shipping"  PageViewID="pvShipping"></telerik:RadTab>
                    <telerik:RadTab IsSeparator="true" Text="4" CssClass="tab-number" Enabled="false"></telerik:RadTab>
                    <telerik:RadTab CssClass="tab" SelectedCssClass="tab-selected" Text="Cart" PageViewID="pvCart"></telerik:RadTab>
                    <telerik:RadTab IsSeparator="true" Text="5" CssClass="tab-number" Enabled="false"></telerik:RadTab>
                    <telerik:RadTab CssClass="tab" SelectedCssClass="tab-selected" Text="Review" PageViewID="pvReview"></telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
        </div>
                
        <telerik:RadMultiPage runat="server" ID="multiPage" RenderSelectedPageOnly="true">
     
            <!-- ********************************CART START****************************** -->
            <telerik:RadPageView runat="server" ID="pvCart" CssClass="page-view">
                <div class="controls-container">               
                    <telerik:RadGrid runat="server"
                        ID="cartgrdItems"
                        AllowPaging="True"
                        AllowSorting="True"
                        AutoGenerateColumns="true"
                        AutoGenerateDeleteColumn="True"
                        AutoGenerateEditColumn="True"
                        CellSpacing="0"
                        GridLines="Horizontal"
                        GroupingEnabled="False"      
                                                       
                        ondeletecommand="cartgrdItems_DeleteCommand"
                        oninsertcommand="cartgrdItems_InsertCommand"
                        onupdatecommand="cartgrdItems_UpdateCommand">
                        <MasterTableView
                            EnableNoRecordsTemplate="true"
                            CommandItemDisplay="TopAndBottom"
                            EditMode="InPlace"                        
                            InsertItemPageIndexAction="ShowItemOnCurrentPage">
                            <CommandItemSettings ShowAddNewRecordButton="true" AddNewRecordText="Add Item" />
                            <NoRecordsTemplate>Add Items</NoRecordsTemplate>
                             
                        </MasterTableView>                   
                    </telerik:RadGrid>
                </div>
                 
                <br />
                <div class="navigation-buttons">
                    <asp:Button ID="cartbtnPrevious" runat="server" Text="Previous" OnClientClick="onNavigate(false); return false;" CssClass="nav-button"/>
                    <asp:Button ID="cartbtnNext" runat="server" Text="Next" OnClientClick="onNavigate(true); return false;" CssClass="nav-button" />
                </div>           
            </telerik:RadPageView>          
        </telerik:RadMultiPage>
    </div>
  2. Eyup
    Admin
    Eyup avatar
    3825 posts

    Posted 30 Nov 2012 Link to this post

    Hello Steven,

    I have created a sample RadGrid web site using the provided mark-up. On my side everything works correctly when all of the PageViews are added to the page. Please check out the attached application and let me know about the result.

    Kind regards,
    Eyup
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Bart
    Bart avatar
    1 posts
    Member since:
    Sep 2017

    Posted 06 Sep 2017 Link to this post

    Hello:

    Could you please tell me how you resolved this problem?  The Radgrid also disappears for me also.  In order to see the radgrid, I have to click on another tab within the tabstrip, and then click on the tab that contains the RadGird.  Why does it occur?  How do I fix it so that I don't have to click on another tab, and back to the tab containing the radgrid?

Back to Top