How To Assign A Collection To RadAccordion Items

1 Answer 54 Views
Accordion
billy
Top achievements
Rank 2
Iron
Iron
Iron
billy asked on 24 Jul 2023, 01:08 PM

I need to use the RadAccordion, but I'm not seeing any documentation or way in code to assign a collection of RadAccordionItem. I have a collection of items that need to be displayed using the according, not static items with dynamic content.

Can you point me to some documentation or a way to assign a collection to the accordionitems?

Thanks

Billy

1 Answer, 1 is accepted

Sort by
1
Accepted
Didi
Telerik team
answered on 24 Jul 2023, 02:03 PM

Hello billy,

The Items collection of the Accordion control is a read-only collection. You cannot assign a new collation to it. 

Here is an example how to add items to the collection.

<Grid RowDefinitions="Auto,*">
    <Button Text="add items" Clicked="Button_Clicked"/>

    <telerik:RadAccordion x:Name="accordion" Grid.Row="1"/>

</Grid>
private void Button_Clicked(object sender, EventArgs e)
{
    string text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore";
    var content = new Label() { Text = text };
    this.accordion.Items.Add(new Telerik.Maui.Controls.AccordionItem
    {
        HeaderText = "hello",
        Content = content
    });       
}

I hope it will be of help.

Regards,
Didi
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

billy
Top achievements
Rank 2
Iron
Iron
Iron
commented on 24 Jul 2023, 09:26 PM

Thanks Didi, I was able to get it to work by inheriting RadAccordion and adding a bindable property for my collection, then using PropertyChanged on the bindable property to load collection.  That all works fine, but I'm stumped on something really simple...

How can I change the font/style of the HeaderText. I need to make it smaller, yet not finding a way to modify it. I'm sure is something simple like a <Style> on the element, but cannot find an example.

Thanks

B

billy
Top achievements
Rank 2
Iron
Iron
Iron
commented on 24 Jul 2023, 09:36 PM

Nevermind. I'm a moron. Resource Style... Sheesh (facepalm).

 

Thanks again


B

Tags
Accordion
Asked by
billy
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Didi
Telerik team
Share this question
or