Content in splitter

[Laura]

I have a radsplitter embedded in a radsplitter and a radpanel  used as a menu to put content in a pane of the splitter. I am retrieving the urls to go to from a table. When the page loads, I have a .jpg being loaded into the content pane. As the user clicks on menu choices from the radpanel, different URLs are loaded. I want the user to have the ablilty to click "home" on the radpanel which would simply re-load the .jpg back in the pane. Where could I set this?
Thanks in advance for help...

Here is my code:

 <telerik:RadScriptManager ID="RadScriptManager1" runat="server" OutputCompression="AutoDetect"></telerik:RadScriptManager>
    <telerik:RadAjaxManager ID="ajaxPanel1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1"  >
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadPanelBar1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="contentPane"
                        LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
     </telerik:RadAjaxManager>


    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Width="75px">
        <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
            style="border: 0px;" />
    </telerik:RadAjaxLoadingPanel>

  <telerik:RadSplitter  ID="mainSplitter" runat="server" Orientation="Horizontal" Width="100%"  height="100%"
        VisibleDuringInit="false" Skin="Office2007"  >

    <telerik:RadPane id="topPane" runat="server" Width="" Height="65px"
          EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False" Index="0"
          Skin=""  >
    <table width="100%" cellpadding="0"  cellspacing="0" height="65px">
     <tr align="center">
      <td>
      <asp:Image ID="Image1" runat="server" ImageUrl="~/Img/DashboardTopLeft1.jpg" ImageAlign="Left"  />
      </td>
      <td>
      <asp:Image ID="Image2" runat="server" ImageUrl="~/Img/DashboardTopMiddle.jpg" ImageAlign="Middle" />
      </td>
      <td>
      <asp:Image ID="Image3" runat="server" ImageUrl="~/Img/DashboardTopRight1.jpg" ImageAlign="Right" />
      </td>
     </tr>
    </table>
    </telerik:RadPane>

       <telerik:RadSplitBar id="Radsplitbar1" runat="server" collapsemode="Forward" EnableResize="false"   />


       <telerik:RadPane ID="middlePane" runat="server"   Height="85%" Scrolling="None"   >

        <telerik:RadSplitter ID= "nestedSplitter" runat="server" Orientation="Vertical"   Skin="Office2007"   ResizeMode="AdjacentPane" width="100%"
                VisibleDuringInit="false" Height="100%" ResizeWithParentPane="true">
         <telerik:RadPane id="leftPane" runat="server"    width="22"   minwidth="22">
           <telerik:RadSlidingZone id="SlidingZone1" runat="server" width="22" clicktoopen="true" SkinID="Office2007" DockedPaneId="Menu" ExpandedPaneId="Menu" >
            <telerik:RadSlidingPane id="Menu" title="Menu" runat="server" width="200"  SkinID="Office2007" Scrolling="Both" EnableResize="false" >
              <telerik:RadPanelBar ID="RadPanelBar1" runat="server" DataSourceID="panelGroups"  width="180" Height="80%"
                AllowCollapseAllItems="True"  ExpandMode="SingleExpandedItem"    onclientitemclicked="itemClicked"
                Skin="Office2007" DataFieldID="FieldID" DataFieldParentID="ParentID"
                DataTextField="Text"  DataValueField="NavigateURL" >
                <CollapseAnimation Type="InOutExpo" Duration="100"></CollapseAnimation>
              </telerik:RadPanelBar>

            </telerik:RadSlidingPane>
           </telerik:RadSlidingZone>
          </telerik:RadPane>
          <telerik:RadSplitBar id="Radsplitbar3" runat="server" collapsemode="Forward" EnableResize="false" />
          <telerik:RadPane id="contentPane" runat="server"  Scrolling="Both"  Height="100%"  >
          <center> <asp:Image ID="DashInitial" runat="server" ImageUrl="~/Img/DashboardInitialScreen.jpg" ImageAlign="Right" />
            </center>
          </telerik:RadPane>
         </telerik:RadSplitter>
       </telerik:RadPane>
     <telerik:RadSplitBar id="Radsplitbar2" runat="server" collapsemode="Backward" EnableResize="false" />
     <telerik:RadPane ID="BottomPane" runat="server" Width="100%" Height="24px"     >
     <table cellpadding="0" cellspacing="0" align="center" >
      <tr align="center"   >
       <td>
          <asp:Image ID="Image4" runat="server" ImageUrl="~/Img/DashboardCopyright.jpg"  ImageAlign="Middle"   />
       </td>
      </tr>
     </table>


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

    <asp:SqlDataSource ID="panelGroups" runat="server"
         ConnectionString="<%$ ConnectionStrings:CC2ConnectionString %>"


         SelectCommand="SELECT [FieldID], [ParentID], [Text], [Value], [NavigateURL], [Active] FROM [DashboardPanelGroups] WHERE ([Active] = @Active)">
        <SelectParameters>
            <asp:Parameter DefaultValue="y" Name="Active" Type="String" />
        </SelectParameters>
     </asp:SqlDataSource>
    </form>
</body>

 <script type="text/javascript">
     function itemClicked(sender, eventArgs) {
         var item = eventArgs.get_item();
         var link = item.get_value();
         if (link != null){
             var splitter = $find("<%= nestedSplitter.ClientID %>");
             var pane = splitter.getPaneById("contentPane");
             pane.set_contentUrl(link);
         }
         var x = 1;
     }

 </script>
</html>

[Svetlina Anati]

Hello Laura,

I am not quite sure whether I completely understood your requirement but as far as I understood you ask how to show the image in the RadPane. If so, I suggest to simply create a new, separate page which will contain only the image and to initially set it through the ContentUrl property to the RadPane:

  <telerik:RadPane ID="BottomPane" runat="server" Width="100%" Height="24px" ContentUrl=Home.aspx>

After that you can set the same url when needed in the same manner as you have done by using javascript. In case this is not what you want to achieve, please prepare a sample, fully runnable demo project, open a new support ticket and send it to us along with a detailed explanation.

All the best,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Laura]

Thank you Svetlina . After posting my question, I thought about it a bit more, and implemented it exactly the way you suggested. Thanks again.