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
0
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
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?
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
Hello Titus,
Could you please try warping the content inside the td element? Please check out the following code snippet.
Regards,
Kostadin
Telerik
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>
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
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.
Regards,
Kostadin
Telerik
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.