Need to expand Accordion control at runtime

[Yathish]

Hi,

We have a requirement were we have a accordion control containing many custom silverlight controls in it. We need to provide the user to resize the accordion and the accordion items in both the x and y axis direction.

Can you please guide me which radcontrols can be used to achieve this easily?

All inputs are welcome.

Thanks & Regards,
YK

[Tina Stancheva]

Hi YK,

The RadPanelBar control can be used as an accordion control - you can examine this demo which demonstrates similar scenario. However, please keep in mind that the RadPanelBar is a hierarchical control and each of its items has a header and a collection of subitems - thus, you shouldn't expect an item to have a content other than what is displayed in its header.

If your data is not hierarchical, probably the RadExpander control will be better suited to your scenario. You can define multiple RadExpander controls side-by-side and synchronize their expanding logic to create a custom accordion control.

All the best,
Tina Stancheva
the Telerik team

[Yathish]

Hi Tina Stancheva ,

Thanks for your response.

1. My main point of concern is that the user should be able to expand the accordion and its content (custom controls) to his wish. Is that achieveable using radpanelbar \radexpander?

2. I was also playing around with radwindow. I was able to load the radwindow with my custom control but i was not able to fit my custom control to the radwindow. Custom control was occupying only quarter of rad window, therefore when i expand the radwindow only radwindow expands and the custom control stays the same. Can we fit my custom control \ accordion control into radwindow - fit it - and expand in any direction?

Please share your valuable comments.

Regards,
YK

[Yana]

Hi YK,

Unfortunately I am not sure I understand your first concern - both the RadExpander and RadPanelBar controls allow expanding - each RadPanelBarItem should be expanded to display its Items collection, while the RadExpander control allows you to set up its content per your requirements and then hide or show it using the expander button in the header. However I might be missing something from your scenario as I am not sure what you mean by 'expand the accordion and its content (custom controls) to his wish'. So if you can further elaborate on your requirements we will be able to further assist you.

As to the problem regarding RadWindow - we have fixed similar issue in our latest internal build (after the service pack), could you please download it and give it a try?

Regards,
Yana
the Telerik team

[Yathish]

Hi Yana,

Thanks for your response.

Ok, let me first try to clearly explain you my requirement:
1. Have a look into the attached screenshot.
2. Each red rectangle represents a dashboard in other words silverlight xap files.
3. First rectangle is a simple dashboard, second and third  is set of dashboards in accordion control.

My Requirement : My requirement is to expand these rectangles individually in any direction.For examples say i expand rectangle1 downwards, then rectangle2 and 3 should automatically shrink to adjust within the actual size (blue rectangle). Approximately the first screenshot.png should change to secondscreenshot.png.

Please let me know which would be the best way to achieve this.

Well as you suggested, i just tried to use radpanelbar, but i am seeing some strange outputs with it. Before i proceed further explaining you the problem, my priority is to find a solution to the above explained scenario rather than fixing the below issue. So you can take the below explained problem as lesser priority unless you suggest a solution using radpanel bar.

I created a new project using radpanel with below code:

using Telerik.Windows.Controls;
using Telerik.Windows.Controls.Navigation;

namespace RadPanelBar
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            Telerik.Windows.Controls.RadPanelBar myPanelBar = new Telerik.Windows.Controls.RadPanelBar();
            RadPanelBarItem item1 = new RadPanelBarItem() { Header = "Item 1" };
            RadPanelBarItem item2 = new RadPanelBarItem() { Header = "Item 2" };
            RadPanelBarItem item3 = new RadPanelBarItem() { Header = "Item 3" };
            myPanelBar.Items.Add(item1);
            myPanelBar.Items.Add(item2);
            myPanelBar.Items.Add(item3);
        }
    }
}
It compiles fine, but the output is a blank screen.

Then i remove this code in the behind and add the xaml code alone:


XAML :

 <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadPanelBar Height="63" HorizontalAlignment="Left" Margin="106,143,0,0" Name="radPanelBar1" VerticalAlignment="Top" Width="150">
            <telerik:RadPanelBarItem DropPosition="Inside" Header="Item 1" TabNavigation="Once" />
        </telerik:RadPanelBar>
    </Grid>

This results in this error : 'RadPanelBar' is a 'namespace' but is used like a 'type'. Even after adding references to T.Controls and T.navigation dlls.

All your valuable inputs are welcome!!!!!!!

Looking forwards for your reply.

Sorry for the long response:(

Regards,
YK

[Tina Stancheva]

Hi YK,

Thank you for elaborating on your scenario. I believe that it would be easier to implement it using the RadTileView control. It is basically an ItemsControl but each RadTileViewItem can have three states - restored, maximized and minimized. This means that you will be able to show one item maximized  thus taking most of the available space while the other items will go into minimized state and take up only what's left from the available area. Can you please examine this demo sample and play with the configuration menu on the left to see if this control would be a good choice for you? Also, please keep in mind that even though the RadTileViewItems cannot be resized by dragging out-of-the-box, such a scenario can be implemented using a GridSplitter and if you decide to use this approach we will gladly assist you.

As for the RadPanelBar sample solution you created, it would be best to rename the namespace not to match the name of the control. That should fix your issues.

Greetings,
Tina Stancheva
the Telerik team