RadAjax on RadPanelBar as Navigation

6 posts, 0 answers
  1. ttaylor29
    ttaylor29 avatar
    9 posts
    Member since:
    Mar 2013

    Posted 06 Apr 2014 Link to this post

    I have a master page that has a table in it and one row with 2 cells in the table.  The left cell is Navigation on the master page.  The right cell is the main content.  Is there a way I can put a loading panel ONLY on the navigation cell when the user clicks a web page to go to?  I've tried this already with the ajaxsetting - using the radpanelbar id and then I put the cell within a panel and use it to show the loading panel. That seems to not work. So is this even possible?  The loading panels work perfect on my content pages when I want to show the loading panel on the grid or the table where I have my search criteria entered. 
  2. Kostadin
    Admin
    Kostadin avatar
    1708 posts

    Posted 09 Apr 2014 Link to this post

    Hi Titus,

    A possible solution is to wrap the content of the left cell in RadAjaxPanel and wrap the content of the right cell in another RadAjaxPanel. This way both cells will be independent form each other and the loading panel will be shown only over to one of them.

    Regards,
    Kostadin
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. ttaylor29
    ttaylor29 avatar
    9 posts
    Member since:
    Mar 2013

    Posted 10 Apr 2014 in reply to Kostadin Link to this post

    Thanks for your reply.  I don't think this will work because my navigation and main content is in a html table comparled to an asp.net table: Here is the error I get when trying what you suggested:

    Parser Error Message: System.Web.UI.HtmlControls.HtmlTableCellCollection must have items of type 'System.Web.UI.HtmlControls.HtmlTableCell'. 'telerik:RadAjaxPanel' is of type 'Telerik.Web.UI.RadAjaxPanel'.

    Line 99:         <table style="width: 100%;" runat="server">
    Line 100:            <tr >
    Line 101: <telerik:RadAjaxPanel runat="server" ID="rapTblRowNavigation">
    Line 102:                    <td class="navTD"  id="tblRowPnlBarNavigation">
    Line 103:                       


    Any other suggestions?
  5. Kostadin
    Admin
    Kostadin avatar
    1708 posts

    Posted 14 Apr 2014 Link to this post

    Hello Titus,

    Could you please try warping the content inside the td element? Please check out the following code snippet.
    <telerik:RadAjaxLoadingPanel id="RadAjaxLoadingPanel1" runat="server" Skin="Vista" MinDisplayTime="2000">         
    </telerik:RadAjaxLoadingPanel>
    <table id="Table1" style="width: 100%;" runat="server">
        <tr>
            <td class="navTD" id="tblRowPnlBarNavigation">
                <telerik:RadAjaxPanel runat="server" ID="rapTblRowNavigation" LoadingPanelID="RadAjaxLoadingPanel1">
                    <span>Test</span>
                    <asp:Label ID="Label1" runat="server" Text="Test">
                    </asp:Label>
                    <asp:Button Text="Change Label" ID="Button1" OnClick="Button1_Click" runat="server" />
                </telerik:RadAjaxPanel>
            </td>
        </tr>
    </table>

    Regards,
    Kostadin
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. ttaylor29
    ttaylor29 avatar
    9 posts
    Member since:
    Mar 2013

    Posted 15 Apr 2014 in reply to Kostadin Link to this post

    I tried the following above, but that did not work. I tried with a table and with <div> tags

    Here is some of my code:

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" >

     </telerik:RadScriptManager>

     
        <telerik:RadAjaxLoadingPanel ID="RadLoadingPnl" Runat="server" Skin="Default"></telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadLoadingPnl">
            <ClientEvents OnRequestStart="onRequestStart" />
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="radPnlBarNavigation">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="rapNavigation" LoadingPanelID="RadLoadingPnl" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings> 
        </telerik:RadAjaxManager>



            <div class="Table" runat="server">
                <div class="Row"> 
                    <div class="CellNav">
                        <telerik:RadAjaxPanel runat="server" ID="rapNavigation" LoadingPanelID="RadLoadingPnl">
                            <strong>Welcome, <asp:Literal runat="server" ID="litWelcomeUser"></asp:Literal>!</strong>
                            <br /><br />
        <telerik:RadPanelBar ID="radPnlBarNavigation" runat="server" Width="165px" Skin="Default" />
                        </telerik:RadAjaxPanel>
                    </div>
                    <div class="CellMainContent">
                            <asp:ContentPlaceHolder ID="MainContent" runat="server">
                            </asp:ContentPlaceHolder>
                    </div>
                </div>
            </div>


  7. Kostadin
    Admin
    Kostadin avatar
    1708 posts

    Posted 17 Apr 2014 Link to this post

    Hi Titus,

    Note that we highly recommend that you try to avoid working with the RadAjaxManager and RadAjaxPanel controls on the same time. I your case I would recommend you to remove the RadAjaxManager control and leave only the RadAjaxPanel. Another approach is to replace the RadAjaxPanel with an asp:Panel and use only one ajax setting where the panel updates itself. Please check out the following code snippet.
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" >
     
     </telerik:RadScriptManager>
     
      
        <telerik:RadAjaxLoadingPanel ID="RadLoadingPnl" Runat="server" Skin="Default"></telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadLoadingPnl">
            <ClientEvents OnRequestStart="onRequestStart" />
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="rapNavigation">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="rapNavigation" LoadingPanelID="RadLoadingPnl" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
     
     
     
            <div class="Table" runat="server">
                <div class="Row">
                    <div class="CellNav">
                        <asp:Panel runat="server" ID="rapNavigation">
                            <strong>Welcome, <asp:Literal runat="server" ID="litWelcomeUser"></asp:Literal>!</strong>
                            <br /><br />
        <telerik:RadPanelBar ID="radPnlBarNavigation" runat="server" Width="165px" Skin="Default" />
                        </asp:Panel>
                    </div>
                    <div class="CellMainContent">
                            <asp:ContentPlaceHolder ID="MainContent" runat="server">
                            </asp:ContentPlaceHolder>
                    </div>
                </div>
            </div>


    Regards,
    Kostadin
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017