syncfusionexamples/accordion-listview-filter-xamarin

This repository contains sample about how to search both Accordion (SfAccordion) and ListView (SflistView) in Xamarin.Forms

How to search both Accordion (SfAccordion) and ListView (SflistView) in Xamarin.Forms

You can search for both SfAccordion and SfListView loaded inside AccordionItem.Content in Xamarin.Forms. To load the SfListView inside Accordion , refer to the article from here.

You can also refer the following article.

https://www.syncfusion.com/kb/11954/how-to-search-both-accordion-sfaccordion-and-listview-sflistview-in-xamarin-forms

XAML

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:AccordionXamarin"
             xmlns:syncfusion="clr-namespace:Syncfusion.XForms.Accordion;assembly=Syncfusion.Expander.XForms"
             xmlns:sfListView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             xmlns:converter="clr-namespace:AccordionXamarin.Converter"
             xmlns:helper="clr-namespace:AccordionXamarin.Helper"
             x:Class="AccordionXamarin.MainPage" Padding="{OnPlatform iOS='0,40,0,0'}">
...
    <ContentPage.Content>
        <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"> 
            <SearchBar x:Name="searchBar" HeightRequest="50"/>
            <syncfusion:SfAccordion x:Name="OuterAccordion" ExpandMode="SingleOrNone" Margin="5" BindableLayout.ItemsSource="{Binding Info}">
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <syncfusion:AccordionItem x:Name="AccordionItem">
                            <syncfusion:AccordionItem.Header>
                                <Grid HeightRequest="50" RowSpacing="0">
                                    <Label Text="{Binding Name}" VerticalOptions="Center" HorizontalOptions="StartAndExpand"/>
                                </Grid>
                            </syncfusion:AccordionItem.Header>
                            <syncfusion:AccordionItem.Content>
                                <sfListView:SfListView x:Name="listView" SelectedItem="{Binding SelectedItem}" HeightRequest="{Binding Varieties, Converter={StaticResource HeightConverter}, ConverterParameter={x:Reference listView}}" ItemSize="50" ItemsSource="{Binding Varieties}" ItemSpacing="1">
                                    <sfListView:SfListView.ItemTemplate>
                                        <DataTemplate>
                                            ...
                                        </DataTemplate>
                                    </sfListView:SfListView.ItemTemplate>
                                </sfListView:SfListView>
                            </syncfusion:AccordionItem.Content>
                        </syncfusion:AccordionItem>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </syncfusion:SfAccordion>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

C#

In the SearchBar.TextChanged event, filter items based on the NewTextValue property of TextChangedEventArgs. You can filter items based on the collection bound to both the Accordion and the ListView. Filtered items set to Accordion using the BindableLayout.SetItemsSource method. You can expand the AccordionItem to show the searched ListViewItem by setting the IsExpanded property to true.

namespace AccordionXamarin.Helper
{
    public class Behavior : Behavior<ContentPage>
    {
        SfAccordion Accordion;
        SearchBar SearchBar;

        protected override void OnAttachedTo(ContentPage bindable)
        {
            Accordion = bindable.FindByName<SfAccordion>("OuterAccordion");
            SearchBar = bindable.FindByName<SearchBar>("searchBar");
            SearchBar.TextChanged += SearchBar_TextChanged;
            
            base.OnAttachedTo(bindable);
        }

        private void SearchBar_TextChanged(object sender, TextChangedEventArgs e)
        {
            var viewModel = new ItemInfoRepository(); 
            var accordionItems = viewModel.Info;
            if (string.IsNullOrEmpty(e.NewTextValue))
            {
                BindableLayout.SetItemsSource(Accordion, accordionItems);
                return;
            }

            var filteredSource = accordionItems.Where(x => (x.Name.ToLower()).StartsWith(e.NewTextValue.ToLower())).ToList<ItemInfo>();
            if(filteredSource.Count == 0)
            {
                List<Variety> listfilteredSource = null;
                for (int i = 0; i < accordionItems.Count; i++)
                {
                    var item = accordionItems[i];
                    listfilteredSource = item.Varieties.Where(x => (x.Name.ToLower()).StartsWith(e.NewTextValue.ToLower())).ToList<Variety>();
                    if (listfilteredSource.Count > 0)
                    {
                        var list = accordionItems.Where(x => x.Name.Contains(item.Name.ToString()));
                        BindableLayout.SetItemsSource(Accordion, list);
                        if (!Accordion.Items[0].IsExpanded)
                            Accordion.Items[0].IsExpanded = true;
                        return;
                    }
                }
            }
            BindableLayout.SetItemsSource(Accordion, filteredSource);
        }
    }
}

Output

accordion-listview-filter-xamarin's Issues

Binding Failed if Big data

Thank you for the sharing before. I find some issue when i m loading some big data, like maybe more than 15 lines, the plugin is crashed and said binding failed in UWP. But it is good when i run in Android.
Can you please enlighten me with solution?