Xuni Product Documentation - Xamarin.Forms
Search Box Filtering

FlexGrid provides you flexibility to use a search box to filter out data. Users can add the filter search box and set its attributes, including its height, width, color, text, filtering pattern as per their requirements. This example demonstrates a simple grey text box that lets you type the value you want to search in the grid. For example, when you type Be in the Filter text box, the collection view interface filters the grid data to display all the values containing Be.

The following code example demonstrates how to apply Filtering in FlexGrid in C# and XAML. The example uses the data source, Customer.cs created in the Quick Start section.

  1. Add a new Forms XAML Page, Filter.xaml to your project.
  2. To initialize a FlexGrid control and add filtering in XAML, modify the markup between the <ContentPage></ContentPage> tags and inside the <StackLayout></StackLayout> tags, as shown below.

    In XAML

    XAML
    Copy Code
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="App1.Filter"
                 xmlns:xuni="clr-namespace:Xuni.Forms.FlexGrid;assembly=Xuni.Forms.FlexGrid">
    <StackLayout Orientation="Vertical">
        <Entry x:Name="filterEntry" Placeholder="Filter Text" ></Entry>
        <xuni:FlexGrid x:Name="grid" AutoGenerateColumns="True" VerticalOptions="FillAndExpand">
          <xuni:FlexGrid.Behaviors>
            <xuni:FullTextFilterBehavior FilterEntry="{x:Reference Name=filterEntry}"
    
     Mode="WhileTyping" MatchNumbers="True" TreatSpacesAsAndOperator="True" />
          </xuni:FlexGrid.Behaviors>
        </xuni:FlexGrid>
    </StackLayout>
    </ContentPage>

  3. In the Solution Explorer, expand the Filter.xaml node and open Filter.xaml.cs to open the C# code behind.
  4. Add the following code in the Filter class constructor to initialize the FlexGrid control and add data to it:

    In Code

    C#
    Copy Code
    InitializeComponent();
    this.grid.ItemsSource = App1.Customer.GetCustomerList(50);

 

 


Copyright © GrapeCity, inc. All rights reserved.

Product Support Forum  |  Documentation Feedback