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.
Filter.xaml
to your project.
<ContentPage></ContentPage>
tags and inside the <StackLayout></StackLayout>
tags, as shown below.
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> |
.xaml
node and open Filter.xaml.cs
to open the C# code behind.
C# |
Copy Code |
---|---|
InitializeComponent();
this.grid.ItemsSource = App1.Customer.GetCustomerList(50); |