How to apply search in collection view with portion loaded data?

Kaouthar GR AOUICHAOUI 80 Reputation points
2024-06-24T16:24:32.32+00:00

i want to display filtred product in collectionview defined as:

<CollectionView
Grid.Row="0"

Grid.ColumnSpan="3"

IsVisible="{Binding IsNoResult, Converter={StaticResource InverseBooleanConverter}}"

ItemsSource="{Binding Produitsview}"

RemainingItemsThreshold="5"

RemainingItemsThresholdReachedCommand="{Binding LoadMoreCommand}">

<CollectionView.ItemsLayout>

    <GridItemsLayout Orientation="Vertical" Span="{Binding Columns, Source={StaticResource DynamicGrid}}" />

</CollectionView.ItemsLayout>

<CollectionView.ItemTemplate>

 <DataTemplate>
   <Grid Padding="10" Background="White">


   <Grid.RowDefinitions>

    <RowDefinition Height="Auto" />

    <RowDefinition Height="Auto" />

    <RowDefinition Height="Auto" />

    <RowDefinition Height="Auto" />

    <RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

    <ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>

<!--<Grid Grid.Row="0">

    <Grid.ColumnDefinitions>

        <ColumnDefinition Width="200" />

        <ColumnDefinition Width="*" />

    </Grid.ColumnDefinitions>-->

<Image

    Grid.Row="0"

    Margin="0,2,0,0"

    HeightRequest="100"

    HorizontalOptions="Center"

    Source="shampo.jpg"

    VerticalOptions="Start"

    WidthRequest="100" />

<Label

    Grid.Row="1"

    BackgroundColor="Black"

    FontFamily="Roboto-Medium"

    FontSize="16"

    HorizontalOptions="Start"

    Text="{Binding sousfamillelibelle}"

    TextColor="White"

    VerticalOptions="Start" />

<Label

    Grid.Row="1"

    FontAttributes="Bold"

    FontFamily="Roboto-Medium"

    FontSize="16"

    HorizontalOptions="End"

    Text="{Binding reference}"

    TextColor="Black"

    VerticalOptions="Start" />

<Label

    Grid.Row="2"

    FontFamily="Roboto-Regular"

    HorizontalOptions="Center"

    TextColor="Black"

    VerticalOptions="Start">

    <Label.FormattedText>

        <FormattedString>

            <Span Text="{Binding produitlibelle}" />

            <Span Text=" - " />

            <!--  Separator between libelle and reference  -->

            <Span FontSize="12" Text="{Binding reference}" />

        </FormattedString>

    </Label.FormattedText>

</Label>
</Grid>


    </DataTemplate>

    </CollectionView.ItemTemplate>
</CollectionView>

when i try to search products ,filtered products are added in the top of the collection view and the collection view continue loading paginated products .

this is my functions to get paginated products and apply advanced search by reference or libel etc...

 private async Task LoadPagedProduits(int pageNumber, int pageSize)

 {


 try

 {

     if (IsLoading || isSearching) return;

     IsLoading = true;

     var response = await produitservice.GetPagedProduits(pageNumber, pageSize);

     var newProducts = JsonConvert.DeserializeObject<ObservableCollection<produitsview>>(response.Content.ToString());

     if (response.IsSuccess && newProducts.Any())

     {

         foreach (var product in newProducts)

         {

             Produitsview.Add(product);

         }

         currentPage++;

     }

     IsLoading = false;

 }

 catch (Exception ex)

 {

     var innerException = ex.InnerException != null ? ex.InnerException.Message : "No inner exception";

     await Application.Current.MainPage.DisplayAlert("Error", $"Exception in Load More Products: {ex.Message}, Inner Exception: {innerException}", "OK");

 }
 }

 private async Task ApplyAdvancedSearch()

 {


 IsSearchPopupOpen = false; // Close the popup

 currentPage = 1; // Reset pagination

 Produitsview.Clear(); // Clear the existing products

 isSearching = true; // Indiquer qu'une recherche est en cours

 try

 {

     // Ensure ReferenceText, LibelleText, and SelectedSearchSousFamille are properly checked for null

     string lowerReferenceText = ReferenceText?.ToLower() ?? string.Empty;

     string lowerLibelleText = LibelleText?.ToLower() ?? string.Empty;

     string lowerSousFamilleLibelle = SelectedSearchSousFamille?.sousfamillelibelle?.ToLower() ?? string.Empty;

     var filter = new produitfilters

     {

         familleid = SelectedFamille != null && SelectedFamille.famillelibelle != "Tous" ? (int?)SelectedFamille.familleid : null,

         sousfamilleid = SelectedSousFamille != null && SelectedSousFamille.sousfamillelibelle != "Tous" ? (int?)SelectedSousFamille.sousfamilleid : null,

         reference = lowerReferenceText, //string.IsNullOrWhiteSpace(ReferenceText) ? null : ReferenceText,

         libelle = lowerLibelleText, 

         sousfamillelibelle = lowerSousFamilleLibelle 

     };

     var response = await produitservice.GetFilteredProduits(filter);

     var newProducts = JsonConvert.DeserializeObject<ObservableCollection<produitsview>>(response.Content.ToString());

     if (response.IsSuccess && newProducts.Any())

     {

         foreach (var product in newProducts)

         {

             Produitsview.Add(product);

         }

     }

     IsNoResult = !Produitsview.Any();

 }

 catch (Exception ex)

 {

     var innerException = ex.InnerException != null ? ex.InnerException.Message : "No inner exception";

     await Application.Current.MainPage.DisplayAlert("Error", $"Exception in Apply Advanced Search: {ex.Message}, Inner Exception: {innerException}", "OK");

 }

 finally

 {

     isSearching = false; // Réinitialiser l'indicateur de recherche

 }
 }

please can some one help me to solve this problem?

Thank you

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,578 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,995 questions
XAML
XAML
A language based on Extensible Markup Language (XML) that enables developers to specify a hierarchy of objects with a set of properties and logic.
814 questions
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.