Duplicated
Last Updated: 26 Nov 2020 13:32 by ADMIN
cmarsh
Created on: 20 Nov 2020 13:43
Category: UI for Blazor
Type: Feature Request
0
Panel Bar
I would like to know if the Panel Bar that we have in WPF (https://www.telerik.com/products/wpf/panelbar.aspx) is going to be implemented in Blazor? Or, is there another solution that I am missing?
Duplicated
This item is a duplicate of an already existing item. You can find the original item here:
1 comment
ADMIN
Nadezhda Tacheva
Posted on: 26 Nov 2020 13:32

Hello Chris,

There is an opened request for an Accordion style expander (Panelbar) that you can follow here to receive notification emails on status changes. I have added an additional vote on your behalf to increase the feature's priority in our back log. 

With that said, I am closing this item as a duplicate of the original Panelbar request to keep the portal clean of duplicates.

In the meantime, I will propose a couple of alternative solutions that you may try to achieve behavior similar to a Panelbar:

Using AnimationContainer component

You could make a component to achieve similar behavior through the AnimationContainer component we provide. Here's a basic example of the functionality so you can tweak it further (and, of course, expose as a stanadalone component in your app, and implement templates and so on)

 

<div style="position: relative; width: 400px; border: 1px solid red;">
    <div>
        <h6>Title goes here</h6>
        <span style="position: absolute; top: 0; right: 0">
            <TelerikButton Icon="@( Expanded ? IconName.ArrowChevronUp : IconName.ArrowChevronDown )"
                           OnClick="@ExpandCollapse" />
        </span>
    </div>
    <TelerikAnimationContainer @ref="@AnimContainer" Width="100%" Height="100px" Class="k-popup">
        lorem ipsum dolor sit amet
    </TelerikAnimationContainer>
</div>

@code {
    TelerikAnimationContainer AnimContainer { get; set; }
    bool Expanded { get; set; }

    async void ExpandCollapse()
    {
        await AnimContainer.ToggleAsync();
        Expanded = !Expanded;
    }
}

 

I have also provided another example with some custom markup that uses existing Telerik classes, and the AnimationContainer - please see the attached file PanelBarSample

Using the TreeView component

Since the TreeView offers expand/collapse animations, you can put generic content in its Template to achieve the similar to Panelbar behavior. You can find more details for the Treeview here.

Regards,
Nadezhda
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Attached Files: