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. Image for the cookie policy date
close icon

Change

How can I change the visual state of the Accordion headers in a list of options I have set up to reflect whether or not they are enabled and can be clicked on?
<layout:SfAccordion SelectionMode="ZeroOrOne">
                    <layout:SfAccordion.HeaderTemplate>
                        <DataTemplate>
                            <TextBlock x:Name="HeaderText" Text="{Binding}">
                            </TextBlock>
                        </DataTemplate>
                    </layout:SfAccordion.HeaderTemplate>
 
                    <layout:SfAccordionItem Header="Home" IsEnabled="{Binding OptionsLevel, Converter={StaticResource IsEnabledConverter}}">

                    </layout:SfAccordionItem>

                    <layout:SfAccordionItem Header="Setup" IsEnabled="{Binding OptionsLevel, Converter={StaticResource IsEnabledConverter}}">
                    </layout:SfAccordionItem>
</layout:SfAccordion >

5 Replies

SM Sugapriya Mariappan Syncfusion Team March 31, 2016 01:10 PM UTC

Hi Joseph,

Thank you for contacting Syncfusion Support

Could you please provide more information like whether you need to Expand or Collapse based on the IsEnabled property of SfAccordionItem? This would help us to proceed further on this

Regards,
M.Sugapriya


JF Joseph Fradley March 31, 2016 06:10 PM UTC

For items which are disabled I don't want them to be able to expand, and they should visually indicate (by being greyed out and not having the arrow present) that they are not intractable.

Those which are enabled should have the regular look and be able to expand if they have any content to display.


SM Sugapriya Mariappan Syncfusion Team April 1, 2016 12:15 PM UTC

Hi Joseph,

We have prepared a sample which tries to meet your requirement. In this sample, we have edited the template of the Accordion Button to collapse the visibility of the arrow. We have also changed the appearance of the Accordion Item by applying two visual states “CollapsedAppearance” and “ExpandedAppearance” for the Accordion Button via Button Click

Please download the sample from the below link
Sample link : SfAccordioncontrolSample

Regards,
M.Sugapriya


JF Joseph Fradley April 5, 2016 08:03 PM UTC

That seems to be what I'm looking for, thanks for the feedback. 


SM Sugapriya Mariappan Syncfusion Team April 6, 2016 05:05 AM UTC

Hi Joseph,

Thank you for your update.

Please let us know if you need any other assistance

Regards,
M.Sugapriya

Loader.
Live Chat Icon For mobile
Up arrow icon