How to: Implement the Search Functionality
This example demonstrates how to implement searching against grid columns - an end-user types in text in a search bar and all cells containing the entered string are highlighted on the fly.

To implement this functionality, follow the steps below.
- Place the SearchBar Xamarin.Forms standard view above the GridControl on the page.
- Subscribe to the SearchBar.TextChanged event that is raised each time the text in the search bar is changed. In this event handler, get the currently entered search string and call the GridControl.Redraw method to recalculate the graphical information of the grid.
- Before grid cells are repainted, the GridControl.CustomizeCell event is raised. Handle this event to apply the ICellCustomizer.HighlightColor color to cells containing the string currently entered in the search bar.
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GridSearchTextSample.MainPage"
xmlns:dxg="clr-namespace:DevExpress.Mobile.DataGrid;assembly=DevExpress.Mobile.Grid.v15.1">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0" />
</ContentPage.Padding>
<ContentPage.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<SearchBar Grid.Row="0" Grid.Column="0" x:Name="searchBar"
Placeholder="Enter a value for search"
TextChanged="OnSearchTextChanged"/>
<dxg:GridControl Grid.Row="1" Grid.Column="0" x:Name="grid"
ItemsSource="{Binding Orders}"
CustomizeCell="OnCustomizeCell">
<dxg:GridControl.Columns>
<dxg:TextColumn FieldName="Product.Name" Caption="Product" Width="170"/>
<dxg:NumberColumn FieldName="Product.UnitPrice" Caption="Price" DisplayFormat="C0"/>
<dxg:NumberColumn FieldName="Quantity"/>
<dxg:NumberColumn FieldName="Total"
UnboundType="Integer" UnboundExpression="[Quantity] * [Product.UnitPrice]"
DisplayFormat="C0" IsReadOnly="True"/>
<dxg:TextColumn FieldName="Customer.Name" Caption="Customer"/>
</dxg:GridControl.Columns>
</dxg:GridControl>
</Grid>
</ContentPage.Content>
</ContentPage>
using System;
using System.Collections.Generic;
using Xamarin.Forms;
using DevExpress.Mobile.DataGrid;
using DevExpress.Mobile.DataGrid.Theme;
namespace GridSearchTextSample {
public partial class MainPage : ContentPage {
string searchText;
public MainPage () {
InitializeComponent ();
TestOrdersRepository model = new TestOrdersRepository ();
BindingContext = model;
searchText = string.Empty;
}
void OnCustomizeCell(CustomizeCellEventArgs e) {
if (string.IsNullOrEmpty(searchText))
return;
string cellText = e.DisplayText.ToUpper();
if (cellText.Contains(searchText.ToUpper()) && !e.IsSelected) {
e.BackgroundColor = ThemeManager.Theme.CellCustomizer.HighlightColor;
e.ForeColor = Color.Black;
e.Handled = true;
}
}
void OnSearchTextChanged(object sender, EventArgs args) {
SearchBar searchBar = (SearchBar)sender;
searchText = searchBar.Text;
grid.Redraw(false);
}
}
}
We are updating the DevExpress product documentation website and this page is part of our new experience. During this transition period, product documentation remains available in our previous format at documentation.devexpress.com. Learn More...