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.

Grid_Search

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.

MainPage.xaml
MainPage.xaml.cs

<?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);
        }
    }
}

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback