SfAccordion collapses all items after the DataSoruce is modified within OnAfterRender()

[Tobias Andraschko]

Hi,

after the accordion is successfully set and initialized, an update triggers the OnAfterRender method in which, the DataSource (binded to the SfAccordion) is modified. This update collapses automatically all accordion items. To fix this, i have to programmatically expand every item. I am also using an int array for the ExpandedIndices attribute.

But it is visible that all items are first collapsed and then expanded again which does not look good. Can i avoid the total collapse after the DataSource gets updated within OnAfterRender?

Version in use: 18.3.038.

Best,

Tobias

[Satheesh Kumar Balasubramanian]

Hi Tobias, 

  

Greetings from Syncfusion Support. 

  

We have validated your reported query "SfAccordion collapses all items after the DataSoruce is modified within OnAfterRender()" and let you know that "Datasource" property is deprecated from the version 18.3.35. Alternatively your requirement can be achieved by iterating AccordionItem. Please find the release notes changes for our accordion component. 

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

  

Code snippet:  

@using Syncfusion.Blazor.Navigations 

  

<SfAccordion> 

    <AccordionItems> 

        @for (int i = 0; i < Count; i++) 

        { 

            <AccordionItem Expanded="true" Header="@i.ToString()" Content="@i.ToString()"> 

            </AccordionItem> 

        } 

    </AccordionItems> 

</SfAccordion> 

@code { 

    private int Count = 3; 

    protected override void OnAfterRender(bool firstRender) 

    { 

        if (firstRender) 

        { 

            Count = 5; 

            StateHasChanged(); 

        } 

    } 

} 

  

Also, we have prepared a sample for your reference which can be downloaded from the following link. 

https://www.syncfusion.com/downloads/support/forum/159253/ze/AccordionComponent-1270668502 

  

Kindly try the above sample and get back to us, if you need further assistance. 

 

 

Regards, 

Satheesh Kumar B 

[Tobias Andraschko]

Hi Satheesh Kumar B,

thank you for your reply. I am using Templates for the content of a accordion item.

I found no way to use AccordionItem in combination with ItemTemplate. Do you have any suggestions?

Regards,

Tobias

[Satheesh Kumar Balasubramanian]

Hi Tobias, 

  

Thanks for your update. 

  

We have validated your reported query "use AccordionItem in combination with ItemTemplate" and let you know that it is not possible to use AccordionItem in combination with ItemTemplate since, "Datasource" property is deprecated. Alternatively your requirement can be achieved by using AccordionItem in combination with ContentTemplate. 

  

Code snippet:  

@using Syncfusion.Blazor.Navigations 

  

<SfAccordion> 

    <AccordionItems> 

        @for (int i = 0; i < Count; i++) 

        { 

            int number = i; 

            <AccordionItem Expanded="true"> 

                <HeaderTemplate> 

                    <div>Inputs and Dropdowns @number</div> 

                </HeaderTemplate> 

                <ContentTemplate> 

                    <InputComponents/> 

                    <DropDownComponents/> 

                </ContentTemplate> 

            </AccordionItem> 

        } 

    </AccordionItems> 

</SfAccordion> 

  

@code { 

    private int Count = 3; 

} 

  

Sample: https://www.syncfusion.com/downloads/support/forum/159253/ze/AccordionTemplate2077399146 

  

Kindly try the above sample and get back to us if you need further assistance. 

Regards, 

Satheesh Kumar B