RadSplitter with RadAjaxLoadingPanel

[Nelson]

Hi,

I have a RadSplitter with Left and Right RadPane. Is it possible to show a loading screen on the right panel when user click menu item on the left one? Sample code is shown on below. 

Cheers, 
Nelson

    <form runat="server" id="mainForm" method="post">
    <!-- content start -->
    <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Panel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rpContent" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
        <telerik:RadSplitter ID="rsKB" runat="server" Orientation="Horizontal" Width="100%" Height="100%">
            <telerik:RadPane ID="rpMain" runat="server" >
                <telerik:RadSplitter ID="rsMain" runat="server" Orientation="Vertical" Width="100%" Height="100%">
                    <telerik:RadPane ID="rpMenu" runat="server" Width="205px">
                                <asp:Button ID="Button1" runat="server" Text="Click to see the loading image" OnClick="Button1_Click"
            Style="margin-top: 15px; margin-left: 15px" CssClass="qsfButtonBigger" />
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Forward">
                    </telerik:RadSplitBar>
                    <telerik:RadPane ID="rpContent" runat="server" ContentUrl="">
                    </telerik:RadPane>                
                </telerik:RadSplitter>
            </telerik:RadPane>
        </telerik:RadSplitter>




    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
      <asp:Image id="Image1" runat="server" ImageUrl="Images/loading.gif">
      </asp:Image>
    </telerik:RadAjaxLoadingPanel>
    <!-- content end -->
    </form>

[Dobromir]

Hi Nelson,

RadPane or RadSlidingPane cannot be directly updated with RadAjaxManager. If you need to update the content of a pane using RadAjaxManager you need to add an asp:panel inside the pane and then update this panel.

For your convenience I have attached a sample page demonstrating how to display the loading panel over the pane. In the button click click handler I have added the following code to simulate longer loading time.

System.Threading.Thread.Sleep(5000);

All the best,
Dobromir
the Telerik team

[Nelson]

Hi Dobromir, 

Thanks for your help and three more questions as follow.

1. If we put a Panel inside the RadPanel, seem we cant access the Panel after changing the "contenturl" of the RadPanel?
2. Can the loading panel show base on the loading time of the content page but not fixed?
3. Can i bind the AjaxControlID to a RadPanelBar so that all the RadPanelItem under it can trigger the loading panel? (I have a list of menu item in the left handed side and i want all menu item to trigger the loading panel)

Cheers, 
Nelson

[Nelson]

Hi,

What i want is whenever ppl click on the left menu, loading panel will be shown first and hide when the page is loaded.

Cheers,
Nelson

Sample Code is attached as follow.....

aspx

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


        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="rbMain">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="rsKB" LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelRenderMode="Inline" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>


        <telerik:RadSplitter ID="rsKB" runat="server" Orientation="Horizontal" Width="100%"
            Height="100%">
            <telerik:RadPane ID="rpMain" runat="server">
                <telerik:RadSplitter ID="rsMain" runat="server" Orientation="Vertical" Width="100%"
                    Height="100%">
                    <telerik:RadPane ID="rpMenu" runat="server" Width="205px">
                        <telerik:RadPanelBar runat="server" ID="rbMain" OnItemClick="rbMain_Click">
                            <Items>
                                <telerik:RadPanelItem runat="server" ID="riItem1" Text="Menu 1" NavigateUrl="javascript:loadpage(1);" >
                                    <Items>
                                        <telerik:RadPanelItem runat="server" ID="rsItem11" Text="Sub Menu 11" NavigateUrl="javascript:loadpage(11);"> </telerik:RadPanelItem>
                                        <telerik:RadPanelItem runat="server" ID="rsItem12" Text="Sub Menu 12" NavigateUrl="javascript:loadpage(12);"></telerik:RadPanelItem>
                                    </Items>
                                </telerik:RadPanelItem>
                                <telerik:RadPanelItem runat="server" ID="riItem2" Text="Menu 2" NavigateUrl="javascript:loadpage(2);">
                                    <Items>
                                        <telerik:RadPanelItem runat="server" ID="rsItem21" Text="Sub Menu 21" NavigateUrl="javascript:loadpage(21);"> </telerik:RadPanelItem>
                                        <telerik:RadPanelItem runat="server" ID="rsItem22" Text="Sub Menu 22" NavigateUrl="javascript:loadpage(22);"></telerik:RadPanelItem>
                                    </Items>
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelBar>
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Forward">
                    </telerik:RadSplitBar>
                    <telerik:RadPane ID="rpContent" runat="server" ContentUrl="">


                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
        </telerik:RadSplitter>


    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Vista">
    </telerik:RadAjaxLoadingPanel>


    </form>
            <script type="text/javascript">
                function loadpage(url) {
                    var splitter = $find("<%= rsMain.ClientID %>");
                    var pane = splitter.getPaneById("<%=rpContent.ClientID %>");
                    var urllink;


                    if (url == 1) {
                        urllink = 'http://www.google.com';
                    } else if (url == 2) {
                        urllink = 'http://www.yahoo.com';
                    }


                    pane.set_contentUrl(urllink);
                }
        </script>


aspx.vb

    protected void rbMain_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(1500);


    }

[Dobromir]

Hi Nelson,

If you you need to display a loading panel over a RadPane that is loading only external content you do not need to ajaxify the splitter, you can just set the ShowContentDuringLoad property of the RadPane that will display the external page to false and this will configure the splitter to display a loading animation until the content is loading. Please review the following live demo for more information regarding this feature:
Show Content During Load

Kind regards,
Dobromir
the Telerik team

[Nelson]

Thanks, that is what i want. Btw, can we change the loading image just like the loading panel?

Cheers, 
Nelson

[Dobromir]

Hi Nelson,

You can change the RadPane's loading image using CSS, e.g.:

.rspLoading {
    background-image: url("myLoadingImage.gif") !important;
}

Regards,
Dobromir
the Telerik team