We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to load Content Dinamically

Thread ID:

Created:

Updated:

Platform:

Replies:

150299 Dec 31,2019 01:39 PM UTC Apr 2,2020 10:40 AM UTC Blazor 4
loading
Tags: Accordion
Carlos Lorenzo
Asked On December 31, 2019 01:39 PM UTC

Hi,

I want to fill/load every AccordionItem's Content when expanding them, what's the best way to accomplish this?

Thanks,

Alagumeena Kalaiselvan [Syncfusion]
Replied On January 2, 2020 09:39 AM UTC

Hi Carlos, 
 
Greetings from Syncfusion Support. 
 
We have prepared a sample to meet your requirement using Expanding event which can be downloaded from the following link. 
 
 
Please refer the code used in the sample. 
 
@using Syncfusion.EJ2.Blazor.Navigations 
 
<EjsAccordion @ref="AcrdnObj"> 
    <AccordionItems> 
        <AccordionEvents Expanding="OnExpand"></AccordionEvents> 
        <AccordionItem> 
            <HeaderTemplate> 
                <div>sample header1</div> 
            </HeaderTemplate> 
            <ContentTemplate>@FirstContent</ContentTemplate> 
        </AccordionItem> 
        <AccordionItem> 
            <HeaderTemplate> 
                <div>sample header2</div> 
            </HeaderTemplate> 
            <ContentTemplate>@SecondContent</ContentTemplate> 
        </AccordionItem> 
        <AccordionItem> 
            <HeaderTemplate> 
                <div>sample header3</div> 
            </HeaderTemplate> 
            <ContentTemplate>@ThirdContent</ContentTemplate> 
        </AccordionItem> 
    </AccordionItems> 
</EjsAccordion> 
 
@code{ 
    EjsAccordion AcrdnObj; 
    public RenderFragment FirstContent { get; set; } 
    public string SecondContent { get; set; } = ""; 
    public string ThirdContent { get; set; } = ""; 
    public void OnExpand(ExpandEventArgs args) 
    { 
        if (args.Index == 0) 
        { 
            FirstContent = builder => 
            { 
            builder.AddContent(1,@<Counter></Counter>); 
            }; 
        } 
        if (args.Index == 1) 
        { 
            SecondContent = "Sample Content Two"; 
        } 
        if (args.Index == 2) 
        { 
            ThirdContent = "Sample Content Three"; 
        } 
    } 
} 
 
Please try out the sample and get back to us for further assistance. 
 
Regards 
Alagumeena.K 


Carlos Lorenzo
Replied On January 2, 2020 02:12 PM UTC

Hi Alagumeena,

First of all, thanks for the quick answer.
Then, is there anyway of building the collection of AccordionItems dinamically as well? (without losing the ability to update every content template dinamically)

Thanks,
Carlos

Alagumeena Kalaiselvan [Syncfusion]
Replied On January 3, 2020 10:38 AM UTC

Hi Carols, 

Thanks for your update!. 

Currently, the requirement “Add collection of Items Dynamically” is not feasible with Blazor Accordion component. We have already considered this requirement as a feature request which can be tracked from the below link. It will be included in our upcoming volume 1, 2020 main release. We would appreciate your patience until then. 


Regards, 
Alagumeena.K 


Alagumeena Kalaiselvan [Syncfusion]
Replied On April 2, 2020 10:40 AM UTC

Hi Carols, 

We are glad to announce that our Essential Studio 2020 Volume 1 release v18.1.0.42  is rolled out and is available for download under the following link. 
 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 
 
Regards 
Alagumeena.K 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon