Expand Item after bidding data to Accordion component.

[Nguyen Huu]

Hi, 

How can I expand the specified Accordion item after bidding data through DataSource  property. 

I have tried to using method ExpandItem but it doesn't work.

[Alagumeena Kalaiselvan]

Hi Nguyen, 

Greetings from Syncfusion support! 

We have validated your reported issue “How to expand specified accordion item after bidding data through Datasource property” and during invoking of OnInitializedAsync the component public methods can’t accessible properly. So, you can achieve your case by using Accordion OnCreated event. Refer the below code that 

@using Syncfusion.EJ2.Blazor.Navigations 

 

<EjsAccordion @ref="AcrdnObj" DataSource="@CourseProgressData" ModelType="@typeof(CourseProgressItem)"> 

    <AccordionEvents Created="OnCreated"></AccordionEvents> 

    <AccordionTemplates> 

        <HeaderTemplate> 

            @{  

                var data = (context as CourseProgressItem); 

                <div>@data.Id</div> 

            } 

        </HeaderTemplate> 

        <ItemTemplate> 

            @{  

                var data = (context as CourseProgressItem); 

                <div>@data.Name</div> 

            } 

        </ItemTemplate> 

    </AccordionTemplates> 

</EjsAccordion> 

 

@code{ 

    EjsAccordion AcrdnObj; 

    public class CourseProgressItem 

    { 

        public int Id { get; set; } 

        public string Name { get; set; } 

    } 

    public List<CourseProgressItem> CourseProgressData = new List<CourseProgressItem>(); 

    public async Task<List<CourseProgressItem>> GetCourseProgress() 

    { 

        CourseProgressData.Add(new CourseProgressItem { Id = 1, Name = "Item1" }); 

        CourseProgressData.Add(new CourseProgressItem { Id = 2, Name = "Item2" }); 

        return CourseProgressData; 

    } 

    protected override async Task OnInitializedAsync() 

    { 

        var data = await GetCourseProgress(); 

        CourseProgressData = data; 

    } 

     

    public async void OnCreated() 

    { 

        await Task.Delay(150); 

        await AcrdnObj.ExpandItem(true, 0);  // To expand specified accordion item 

    } 

} 

Also you can download this sample using the following link 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AccordionComponent873441445  

Kindly get back to us, If you need further assistance. 

Regards 

Alagumeena.K 

[Nguyen Huu]

Hi Alagumeena, thank for the reply.

I tried updating it again. But sometimes, the HTML render was broken although I increased the waiting time to 2000ms. Function GetCourseProgress is used to call an API.

[Alagumeena Kalaiselvan]

Hi Nguyen, 

Thanks for your update! 

We have evaluated your query and considered as an improvement also logged the feature request for that which can be tracked from the below link. 

Feedback Link: https://www.syncfusion.com/feedback/12816/expand-specific-accordion-items-while-binding-through-datasource-property 

Also, the feature will be available for our Volume1, SP1 main release which is expected to be roll-out at the end of April, 2020. Please let us know, If you need further help. 

Regards 

Alagumeena.K 

[Vengatesh Maniraj]

Hi Nguyen

We are glad to announce that our latest release in the version 18.2.0.44 has been rolled out successfully. In that release, we have provided ExpandedIndices property has been introduced to expand accordion panel especially when panels bind through DataSource.  So, we suggest you upgrade our Syncfusion packages to avail of the requested feature in your end.

 

Please find the links below,

 

NuGet Link: https://www.nuget.org/packages/Syncfusion.Blazor/18.2.0.44

Release notes: https://blazor.syncfusion.com/documentation/release-notes/18.2.44/?type=all#accordion

Feedback: https://www.syncfusion.com/feedback/12816/expand-specific-accordion-items-while-binding-through-datasource-property

 

Could you please check the above links and get back to us, if you need any further assistance on this.

 

Regards,

Vengatesh