Incremental Search

• Apr 01, 2021
• 5 minutes to read

GridControl supports the incremental search feature.

Incremental search allows end-users to quickly locate records without using the search panel: the GridControl highlights matching values in real time as a user types search criteria.

From the end-user perspective, incremental search functions in the following manner.

• A user focuses an element within the grid (e.g., a cell or row).
• The user begins to type search criteria.
• The GridControl highlights records that start with the search criteria.
• The GridControl focuses the first record that starts with the search criteria.

Note

An end-user can initiate incremental search if none of the grid control’s cells are in edit mode.

The following animation demonstrates the incremental search feature.

A user can modify criteria in a short amount of time that is called the incremental search delay. After the delay time has elapsed, additional input is treated as new criteria.

Note

Incremental search is case-insensitive.

The following keyboard shortcuts allow end-users to navigate search results.

Keyboard shortcut	Action
Ctrl + Down Arrow	Move focus to the next cell that contains a matching value.
Ctrl + Up Arrow	Move focus to the previous cell that contains a matching value.
Esc	End incremental search.

Note

Limitation Incremental search is not supported in Server mode.

Incremental Search Configuration

To enable the incremental search, set the DataViewBase.IncrementalSearchMode property to Enabled.

Note

If the detail view‘s DataViewBase.IncrementalSearchMode property is set to Default, the incremental search functionality will be enabled in the detail view if this functionality is enabled in the master view.

You can configure the range of columns in which the incremental search will be performed and specify a custom incremental search delay.

The following table lists API that allows you to configure the incremental search.

API	Description
ColumnBase.AllowIncrementalSearch	To exclude a specific column from the search, set its ColumnBase.AllowIncrementalSearch property to false.
DataViewBase.UseOnlyCurrentColumnInIncrementalSearch	To search against the currently selected column only, set the DataViewBase.UseOnlyCurrentColumnInIncrementalSearch property to true.
DataViewBase.IncrementalSearchClearDelay	Specifies the incremental search delay time.
DataViewBase.IncrementalSearchStart	Starts the incremental search with the specified search string.

The following example demonstrates GridControl with incremental search enabled for the selected column only. The incremental search delay is set to 1 second.

XAML

<Window ...
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid">
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
    <Grid>
        <dxg:GridControl Grid.Row="1" ItemsSource="{Binding Data}">
            <dxg:GridControl.View>
                <dxg:TableView Name="tV" IncrementalSearchMode="Enabled" UseOnlyCurrentColumnInIncrementalSearch="True" IncrementalSearchClearDelay="1000" />
            </dxg:GridControl.View>
            <dxg:GridColumn FieldName="Name" />
            <dxg:GridColumn FieldName="City" />
            <dxg:GridColumn FieldName="Visits" />
            <!-- Incremental search is disabled for the Birthday column -->
            <dxg:GridColumn FieldName="Birthday" AllowIncrementalSearch="False"/>
        </dxg:GridControl>
    </Grid>
</Window>

C#

public class ViewModel {
    public List<Customer> Data { get; set; }
    public ViewModel() {
        Data = Customer.GetCustomers();
    }
}

public class Customer {
    public string Name { get; set; }
    public string City { get; set; }
    public int Visits { get; set; }
    public DateTime Birthday { get; set; }

    public static List<Customer> GetCustomers() {
        List<Customer> people = new List<Customer>();
        people.Add(new Customer() { Name = "Gregory S. Price", City = "Huntington", Visits = 4, Birthday = new DateTime(1980, 1, 1) });
        people.Add(new Customer() { Name = "Irma R. Marshall", City = "Hong Kong", Visits = 2, Birthday = new DateTime(1966, 4, 15) });
        people.Add(new Customer() { Name = "John C. Powell", City = "Luogosano", Visits = 6, Birthday = new DateTime(1982, 3, 11) });
        people.Add(new Customer() { Name = "Christian P. Laclair", City = "Clifton", Visits = 11, Birthday = new DateTime(1977, 12, 5) });
        people.Add(new Customer() { Name = "Karen J. Kelly", City = "Madrid", Visits = 8, Birthday = new DateTime(1956, 9, 5) });
        people.Add(new Customer() { Name = "Brian C. Cowling", City = "Los Angeles", Visits = 5, Birthday = new DateTime(1990, 2, 27) });
        people.Add(new Customer() { Name = "Thomas C. Dawson", City = "Rio de Janeiro", Visits = 21, Birthday = new DateTime(1965, 5, 5) });
        people.Add(new Customer() { Name = "Angel M. Wilson", City = "Selent", Visits = 8, Birthday = new DateTime(1987, 11, 9) });
        people.Add(new Customer() { Name = "Winston C. Smith", City = "London", Visits = 1, Birthday = new DateTime(1949, 6, 18) });
        people.Add(new Customer() { Name = "Harold S. Brandes", City = "Bangkok", Visits = 2, Birthday = new DateTime(1989, 1, 8) });
        people.Add(new Customer() { Name = "Michael S. Blevins", City = "Harmstorf", Visits = 4, Birthday = new DateTime(1972, 9, 14) });
        people.Add(new Customer() { Name = "Jan K. Sisk", City = "Naples", Visits = 6, Birthday = new DateTime(1989, 5, 7) });
        people.Add(new Customer() { Name = "Sidney L. Holder", City = "Watauga", Visits = 19, Birthday = new DateTime(1971, 10, 3) });
        people.Add(new Customer() { Name = "James T. Kirk", City = "Los Angeles", Visits = 4, Birthday = new DateTime(1966, 9, 8) });
        people.Add(new Customer() { Name = "William T.G. Morton", City = "Watauga", Visits = 4, Birthday = new DateTime(1969, 8, 9) });
        return people;
    }
}

Navigating Search Results Programmatically

Incremental search results can be navigated programmatically.

This may be useful if you want to create a dedicated incremental search UI as an alternative to default keyboard shortcuts.

The following table lists methods and commands that you can call to navigate search results or end the incremental search.

Metod	Command	Descriprion
DataViewBase.IncrementalSearchMoveNext	DataViewCommandsBase.IncrementalSearchMoveNext	Moves focus to the next cell that contains a matching value.
DataViewBase.IncrementalSearchMovePrev	DataViewCommandsBase.IncrementalSearchMovePrev	Moves focus to the previous cell that contains a matching value.
DataViewBase.IncrementalSearchEnd	DataViewCommandsBase.IncrementalSearchEnd	Ends the incremental search.

The following example demonstrates a dedicated toolbar that allows an end-user to navigate the incremental search results.

XAML

<Window ...
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid">
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>
        <dxg:GridControl x:Name="gC" Grid.Row="0" ItemsSource="{Binding Data}" AutoGenerateColumns="AddNew">
            <dxg:GridControl.View>
                <dxg:TableView Name="tV" IncrementalSearchMode="Enabled"/>
            </dxg:GridControl.View>
        </dxg:GridControl>
        <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center">
            <!-- Ends the search and removes the highlighting -->
            <Button Width="Auto" Margin="5" Content="End Search" Click="Button_Click"/>
            <!-- Moves focus to the previous match -->
            <Button Width="Auto" Margin="5" Content="Previous Match" Command="{Binding ElementName=tV, Path=Commands.IncrementalSearchMovePrev}"/>
            <!-- Moves focus to the next match -->
            <Button Width="Auto" Margin="5" Content="Next Match" Command="{Binding ElementName=tV, Path=Commands.IncrementalSearchMoveNext}"/>
        </StackPanel>
    </Grid>
</Window>

C#

private void Button_Click(object sender, RoutedEventArgs e) {
        tV.IncrementalSearchEnd();
    }