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

RadSplitter with RadAjaxLoadingPanel

6 Answers 163 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Nelson
Top achievements
Rank 1
Nelson asked on 30 Sep 2011, 02:01 AM
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>

6 Answers, 1 is accepted

Sort by
0
Dobromir
Telerik team
answered on 03 Oct 2011, 01:40 PM
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
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
0
Nelson
Top achievements
Rank 1
answered on 04 Oct 2011, 02:24 AM
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
0
Nelson
Top achievements
Rank 1
answered on 04 Oct 2011, 10:18 AM
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);


    }
0
Dobromir
Telerik team
answered on 05 Oct 2011, 08:49 AM
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
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
0
Nelson
Top achievements
Rank 1
answered on 06 Oct 2011, 07:19 AM
Thanks, that is what i want. Btw, can we change the loading image just like the loading panel?

Cheers, 
Nelson
0
Dobromir
Telerik team
answered on 06 Oct 2011, 10:32 AM
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
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
Tags
Splitter
Asked by
Nelson
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
Nelson
Top achievements
Rank 1
Share this question
or