Skip to the guide
All guides

Filter rows and choose columns in the data grid

Filter MxDataGrid with the filter row, with conditions in code, or with the filter builder. Let users hide and show columns with the field chooser.

app Mordex Components 6.0.0checked reading 5 minutes

On this page

The data grid shows only the rows that match its filter. Users can type a filter in the filter row, or build one with MxFilterBuilder. Code can set a filter at any time.

The examples use a grid that is already bound. The data grid guide shows how to bind it.

Show the filter row

The filter row sits under the column headers. Users type a value in a cell, and the grid shows only the rows that match. Turn it on with FilterMode.

C#
using Mordex.Windows.DataGrid;

grid.FilterMode = FilterMode.Automatic;
ValueWhat happens
NoneNo filter row. This is the default.
AutomaticThe filter row shows, and the grid filters the rows itself.
ManualThe filter row shows, but the grid does not filter. Read the values from grid.FilterRow and filter in your own code.
Values of FilterMode

Choose when the filter row applies

FilterRowUpdateMode sets when a typed value takes effect.

  • WhenValueChanges filters while the user types. FilterRowUpdateDelay adds a wait in milliseconds, so the grid does not filter after every key.
  • WhenReturnKeyIsPressed filters when the user presses Enter.
C#
grid.FilterRowUpdateMode = FilterRowUpdateMode.WhenValueChanges;
grid.FilterRowUpdateDelay = 300;

Choose how each cell compares

DefaultFilterRowComparison on the grid sets the comparison for every cell of the filter row, for example Contains or BeginsWith. DefaultFilterRowComparison on a column overrides it for that column.

FilterRowButtonStyle sets the button in each filter cell. ClearButton, the default, clears the cell. ConditionOperatorDropDown lets users pick the comparison. None shows no button.

C#
grid.DefaultFilterRowComparison = FilterConditionOperator.Contains;
grid.FilterRowButtonStyle = FilterRowButtonStyle.ConditionOperatorDropDown;

FilterEditType on a column picks the editor of its filter cell. The default, SameAsEditType, uses the same editor as the normal cells. Other values include TextBox, Combo, DropDownList, CalendarDropDown and CheckBox.

Set a filter in code

A GridFilterCondition compares one column with a value. Join more conditions with AddCondition and a LogicalOperator. Then set it as FilterCondition of the table.

C#
GridColumnCollection columns = grid.RootTable.Columns;

GridFilterCondition filter = new GridFilterCondition(
    columns["Department"], ConditionOperator.Equal, "Engineering");
filter.AddCondition(LogicalOperator.And,
    new GridFilterCondition(columns["Salary"], ConditionOperator.GreaterThanOrEqualTo, 90000m));

grid.RootTable.FilterCondition = filter;

grid.RootTable.ApplyFilter(filter) does the same thing.

The operators include Equal, NotEqual, GreaterThan, LessThan, Between, Contains, BeginsWith, EndsWith, IsNull, IsEmpty and In. Between takes two values: use the constructor with value1 and value2.

LogicalOperator has And, Or and Xor.

Clear the filter

grid.RemoveFilters() clears the filter row and the filter of every table. grid.RootTable.RemoveFilter() clears only the filter of the top table.

C#
grid.RemoveFilters();

React to a filter

The grid raises ApplyingFilter before it filters. Set e.Cancel to true to stop it. After the filter, the grid raises FilterApplied. RecordCount gives the number of rows that are left.

C#
grid.FilterApplied += (sender, e) =>
{
    statusLabel.Text = grid.RecordCount + " rows shown";
};

Build filters with the filter builder

MxFilterBuilder is a separate control in the Mordex.Windows.FilterBuilder namespace. Users build a tree of AND and OR conditions in it. Point SourceControl at the grid, and the builder reads the columns and the current filter of the grid.

C#
using System.Windows.Forms;
using Mordex.Windows.DataGrid;
using Mordex.Windows.FilterBuilder;

MxFilterBuilder builder = new MxFilterBuilder
{
    Dock = DockStyle.Bottom,
    Height = 160,
    SourceControl = grid,
    AutoApply = true
};
Controls.Add(builder);

With AutoApply set to true, each change in the builder filters the grid at once. With false, the default, call builder.ApplyFilter() when the user is ready.

When code changes the filter of the grid, call builder.Reload() so the builder shows the new conditions.

C#
grid.RootTable.FilterCondition = filter;
builder.Reload();

Other settings of the builder:

  • ShowChildTables lets users pick a field from a child table.
  • AvailableConditionOperators and AvailableLogicalOperators limit the operators users can pick.
  • DefaultConditionOperator sets the operator of a new condition.
  • FilterConditionChanged is raised when the filter condition of the builder changes.

Show the filter builder in a dialog

Put the builder in a form with AutoApply = false. Apply the filter only when the user clicks the OK button.

C#
using (Form dialog = new Form { Text = "Filter", Width = 720, Height = 420 })
{
    MxFilterBuilder dialogBuilder = new MxFilterBuilder
    {
        Dock = DockStyle.Fill,
        SourceControl = grid,
        AutoApply = false
    };
    Button ok = new Button { Text = "Apply", DialogResult = DialogResult.OK, Dock = DockStyle.Bottom };
    dialog.Controls.Add(dialogBuilder);
    dialog.Controls.Add(ok);
    dialog.AcceptButton = ok;

    if (dialog.ShowDialog(this) == DialogResult.OK)
    {
        dialogBuilder.ApplyFilter();
    }
}

Hide and show columns with the field chooser

The field chooser lists the columns that are hidden. Users drag a column header onto the chooser to hide the column. They drag a field from the chooser back to the headers to show it again.

Open the chooser in a window

ShowFieldChooser opens the chooser in a small window and returns it as a FieldChooserForm. Pass the owner form and a caption.

C#
FieldChooserForm chooser = grid.ShowFieldChooser(this, "Fields");

HideFieldChooser closes the window. The chooser works only in the table view. In a card view, ShowFieldChooser throws an InvalidOperationException.

Place the chooser on a form

MxFieldChooser is the same list as a control. Set its DataGrid property and place it where you like.

C#
MxFieldChooser fieldChooser = new MxFieldChooser
{
    Dock = DockStyle.Right,
    Width = 230,
    DataGrid = grid
};
Controls.Add(fieldChooser);

Set ShowInFieldChooser to false on a column to keep it out of the chooser.