RadSplitter with RadAjaxLoadingPanel

7 posts, 0 answers
  1. Nelson
    Nelson avatar
    15 posts
    Member since:
    Jan 2011

    Posted 29 Sep 2011 Link to this post

    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>
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 03 Oct 2011 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nelson
    Nelson avatar
    15 posts
    Member since:
    Jan 2011

    Posted 03 Oct 2011 Link to this post

    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
  5. Nelson
    Nelson avatar
    15 posts
    Member since:
    Jan 2011

    Posted 04 Oct 2011 Link to this post

    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);


        }
  6. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 05 Oct 2011 Link to this post

    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
  7. Nelson
    Nelson avatar
    15 posts
    Member since:
    Jan 2011

    Posted 06 Oct 2011 Link to this post

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

    Cheers, 
    Nelson
  8. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 06 Oct 2011 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017