RadzenAccordionItem Template

Radzen.Blazor Components
1

Hi guys,

Any examples on the implementation for RadzenAccordionItem Template? I've tried the following but it does not work as expected.

<RadzenAccordion>
     <Items>
          @foreach (var item in project.Phases.Single(x => x.Id == selectedPhaseId).Items) 
          {
               <RadzenAccordionItem Template="@AccordionItemTemplate" />
          }
     </Items>
</RadzenAccordion>

And the RenderFragment

    RenderFragment<RadzenAccordionItem> AccordionItemTemplate = (context) => builder =>
    {
        PhaseItem phaseItem = context.Value as PhaseItem;

        builder.OpenComponent(0, typeof(RadzenIcon));
        builder.AddAttribute(1, "Icon", "person");
        builder.AddAttribute(2, "IconColor", phaseItem.Color);
        builder.CloseComponent();

        builder.AddContent(1, phaseItem.Article.Description);
    };
2

No error messages when altering the RenderFragment:

    RenderFragment AccordionItemTemplate = builder =>
    {
        //PhaseItem phaseItem = context.Value as PhaseItem;
        
        builder.OpenComponent(0, typeof(RadzenIcon));
        builder.AddAttribute(1, "Icon", "person");
        builder.AddAttribute(2, "IconColor", "red");
        builder.CloseComponent();

        //builder.AddContent(1, phaseItem.Article.Description);
    };

But how do I get context now?

3

Hi @nunile

Try passing your item to the AccordionItemTemplate.

This is an expansion of the existing code on the Accordion sample page. Copy and paste it into the code tab.


<RadzenCard>
    <RadzenButton Text="Collpse all" Click="@(args => items.ForEach(i => i.Selected = false) )" />
    <RadzenButton Text="Expand all" Click="@(args => items.ForEach(i => i.Selected = true) )" />
</RadzenCard>
<div class="rz-p-sm-12">
    <RadzenAccordion Multiple="true">
        <Items>
            @foreach (var item in items)
            {
                <RadzenAccordionItem Template="@AccordionItemTemplate(item)" Text="@item.Text" @bind-Selected=@item.Selected>
                    Details for @(item.Text)
                </RadzenAccordionItem>
            }
        </Items>
    </RadzenAccordion>
</div>
@code {
    List<MyItem> items = Enumerable.Range(0, 5).Select(i => 
        new MyItem() 
        { 
            Text =  $"Item{i}", 
            Selected = i == 0 ? true : false 
        }).ToList();

    class MyItem
    { 
        public string Text { get; set; }
        public bool Selected { get; set; }
    }

    RenderFragment AccordionItemTemplate(MyItem context) => builder =>
    {
        builder.OpenComponent(0, typeof(RadzenIcon));
        if(context.Text=="Item3")
        {
            builder.AddAttribute(1, "Icon", "hourglass_full");
        }
        else
        {
            builder.AddAttribute(1, "Icon", "hourglass_empty");
        }
        builder.CloseComponent();

        builder.AddContent(1, context.Text);
    };
}

Regards
Paul

4

Thank you Paul, this is exactly what I was looking for. In my opinion this would be a great addition to the documentation.