SlidingPane title request

[Nancy Cara]

I would like to display 'Contacts' on the sliding pane when collapsed but display a longer title at the top when expanded 'Contacts for John Smith'. The reason is I need to identify who the contacts are for but I don't want the long title along the side of my splitter when it's collapsed. It would be nice to see ExpandedTitle and CollapsedTitle properties.

[Yavor]

Hello Nancy,

Can you please elaborate a little bit more on the functionality that you are seeking to achieve?
I assume that you are using the Slider pager functionality. In this scenario, where would you like to display the titles, and how would you like to collapse the control?

Sincerely yours,
Yavor
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Nancy Cara]

Hello Yavor,

I must apologize. I posted the question in the wrong forum. I had thought I posted in the Splitter control forum. I am referring to the slidingpane of the RadSplitter (Prometheus). I would like the Title property to actually be two different properties - ExpandedTitle and CollapsedTitle so that I can do something like this.... When collapsed the slidingpane title shows 'Contacts' but when expanded the slidingpane title shows 'Contacts for John Smith' at the top. It seems that currently both places share the Title property.

Nancy

[Ubong]

Hello Nancy,

You can easily do this with the provided ClientSide API as demonstrated below:
You will see that the title of 'Pane1' changes on expand and returns back to 'Contacts' when another pane is selected.

 <script type="text/javascript">
    function SetTitletoJohn()
    {
    var splttr = $find('<%=RadSplitter1.ClientID %>');
    var pane = splttr.getPaneById(mypane);
    var mypane  = $find('<%=SlidingZone1.ClientID %>').GetPaneById('Pane1');
    var secndpane = $find('<%=SlidingZone1.ClientID %>').GetPaneById('Pane2');
    var thirdpane = $find('<%=SlidingZone1.ClientID %>').GetPaneById('Pane3');

    if (!mypane)return ;
    if (mypane)
          {
              mypane.set_title('Contacts for John Smith');
          }

         else
          {
            mypane.set_title('Contacts');

          }


    }

    function SetTitleBack()
       {
            var mypane  = $find('<%=SlidingZone1.ClientID %>').GetPaneById('Pane1');
        if (!mypane)return ;
        if (mypane)
          {

            mypane.set_title('Contacts');

           }
        }



       </script>
     <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
  <telerik:RadSplitter id="RadSplitter1" runat="server" height="400" width="700">
                <telerik:RadPane id="LeftPane" runat="server" width="22" scrolling="none">
                    <telerik:RadSlidingZone id="SlidingZone1" runat="server" width="22">
                        <telerik:RadSlidingPane id="Pane1" Title="Contacts" OnClientCollapsed="SetTitleBack" OnClientExpanded="SetTitletoJohn" runat="server" width="150">Pane1</telerik:RadSlidingPane>
                        <telerik:RadSlidingPane id="Pane2" title="Pane2" runat="server" width="150">Pane2</telerik:RadSlidingPane>
                        <telerik:RadSlidingPane id="Pane3" title="Pane3" runat="server" width="150">Pane3</telerik:RadSlidingPane>
                    </telerik:RadSlidingZone>
                </telerik:RadPane>
                <telerik:RadSplitBar id="RadSplitbar1" runat="server"></telerik:RadSplitBar>
                <telerik:RadPane id="MiddlePane" runat="server">Main Pane</telerik:RadPane>


            </telerik:RadSplitter>

Inject the code and enjoy!

You should also have a look at the online examples for more details here: http://www.telerik.com/demos/aspnet/prometheus/Splitter/Examples/ClientSideAPI/DefaultCS.aspx

Best Regards,
Ubong
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Nancy Cara]

Thank-you. I was able to get it to work with this:

function

SetTitleForName(sender, eventArgs)

{

var slidingZone = $find("<%= RadSlidingZone1.ClientID %>");

var slidingPane = slidingZone.getPaneById('RadSlidingPane1');

var l = document.getElementById(label);

var title = ('Contacts for ' + l.innerHTML);

slidingPane.set_Title(title);

}

However I was reading the documentation for the Prometheus Sliding Pane members and events and it says that eventArgs contains the pane being passed in as paneObj and you can use eventArgs.paneObj.ID to retrieve the pane ID that is calling the function. I could not get this to work as I get an error that paneObj.ID is null or not an object. It would be convenient for me to know which sliding pane is calling the function as I have several panes calling it and they all set the same title property.

[Tsvetie]

Hello Nancy Cara,
I believe you are looking at the help for RadSplitter Classic. To review the online documentation for RadSplitter Prometheus, please follow this link. In order to get the ClientID of the pane, calling the function, you can use the sender.get_id() method, as the sender is the pane client object.

Best wishes,
Tsvetie
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Nancy Cara]

Thank-you - that works.

I got my link to the previous statement on PaneObj here: http://www.telerik.com/help/radcontrols/prometheus/Telerik.Web.UI~Telerik.Web.UI.SplitterPaneBase~OnClientBeforeExpand.html  It indicates prometheus in the URL so I assumed it applied to prometheus. And prometheus uses Telerik.Web.UI

Where can I find the documentation on sender.get_id()

[Svetlina Anati]

Hi Nancy Cara,

The "Prometheus" controls are based upon MS AJAX Framework and as any other ajax objects you can get and set their properties using the get_property() and set_property() methods. These methods are not specific methods for our controls, this is the way you can manipulate every ajax object's properties. This being said, if you have a reference to the RadSplitter control, for example, you can get/set all its properties in this manner:

 var splitter = $find("<%= RadSplitter1.ClientID %>");
       alert(splitter.get_id());
       alert(splitter.get_width());
       alert(splitter.get_height());
       //etc

The sender object is the object which raises the event in the eventhandler - in different context it is a different object - if you execute a pane's eventhandler, the pane would be the sender object.
This being said there is no specific documentation on this in our online resources because it is not part of the controls' specific client-side API.

Regards,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Nancy Cara]

Thank-you Svetlina - that is great information to know!

Nancy