[Solved] Horizontal Panelbar

[Simon]

Hi,

We are interested in using the telerik panelbar but would like the orientation to be 90 degrees from the default. Is this possible?

Thanks

[Dimo]

Hello Simon,

The described horizontally expandable PanelBar would require a lot different CSS styling and animation logic, which has not been taken into account when designing the component.

If you test the example below, you will achieve a look similar to the required one, however I am not sure this will fulfil your needs. Don't forget to clear the floats after the PanelBar.

<% Html.Telerik().PanelBar()
        .Name("PanelBar")
        .HtmlAttributes(new { style = "width: auto; float: left;" })
        .ExpandMode(PanelBarExpandMode.Single)
        .SelectedIndex(0)
        .Effects(ef => ef.Toggle())
        .Items(item =>
        {
            item.Add()
                .Text("Mail")
                .Items(subItem =>
                {
                    subItem.Add()
                           .Text("Personal Folders");
                    subItem.Add()
                           .Text("Deleted Items");
                    subItem.Add()
                           .Text("Inbox");
                    subItem.Add()
                           .Text("My Mail");
                    subItem.Add()
                           .Text("Sent Items");
                    subItem.Add()
                           .Text("Outbox");
                    subItem.Add()
                           .Text("Search Folders");
                });

            item.Add()
                .Text("Contacts")
                .Items((subItem) =>
                {
                    subItem.Add()
                           .Text("My Contacts");
                    subItem.Add()
                           .Text("Address Cards");
                    subItem.Add()
                           .Text("Phone List");
                    subItem.Add()
                           .Text("Shared Contacts");
                });

            item.Add()
                .Text("Tasks")
                .Items((subItem) =>
                {
                    subItem.Add()
                          .Text("My Tasks");
                    subItem.Add()
                           .Text("Shared Tasks");
                    subItem.Add()
                           .Text("Active Tasks");
                    subItem.Add()
                           .Text("Completed Tasks");
                });
        })
        .Render();
%>

#PanelBar>.t-item,
#PanelBar>.t-item>.t-link,
#PanelBar>.t-item>.t-group
{
    float:left;
    height:200px;
}

#PanelBar>.t-item>.t-link,
#PanelBar>.t-item>.t-group
{
    width:100px;
}

#PanelBar>.t-item>.t-state-selected
{
    background-image:none;
}

Regards,
Dimo
the Telerik team