This is a migrated thread and some comments may be shown as answers.

RadAjax on RadPanelBar as Navigation

5 Answers 60 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
ttaylor29
Top achievements
Rank 1
ttaylor29 asked on 06 Apr 2014, 06:25 AM
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. 

5 Answers, 1 is accepted

Sort by
0
Kostadin
Telerik team
answered on 09 Apr 2014, 01:18 PM
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.

 
0
ttaylor29
Top achievements
Rank 1
answered on 10 Apr 2014, 11:57 AM
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?
0
Kostadin
Telerik team
answered on 14 Apr 2014, 12:32 PM
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.

 
0
ttaylor29
Top achievements
Rank 1
answered on 15 Apr 2014, 03:48 PM
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>


0
Kostadin
Telerik team
answered on 17 Apr 2014, 02:29 PM
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.

 
Tags
Ajax
Asked by
ttaylor29
Top achievements
Rank 1
Answers by
Kostadin
Telerik team
ttaylor29
Top achievements
Rank 1
Share this question
or