Permanent editor in a filter cell

Environment

Product Version	2018.1 220
Product	RadGridView for WinForms

Description

By design, RadGridView uses editing mechanism. Thus, only one cell can be edited at a moment. A common scenario is to display a permanent editor in the filter cells in order to indicate better to the user that there are several options to choose.

Solution

At the end of this solution the illustrated result in the following video will be achieved:

Follow the detailed steps in order to create a custom filter cell and embed a permanent RadDropDownListElement to manage filtering.

1. Create a derivative of GridFilterCellElement.

• In its CreateChildElements method you can add a RadDropDownListElement which holds the distinct column values, a LightVisualElement which displays the filter operator and a StackLayoutPanel which is the host container.

• Subscribe to the RadDropDownListElement.SelectedIndexChanged event where the respective FilterDescriptor will be added/deleted according to the currently selected drop down item.

• Override the SetContentCore method where to bind the RadDropDownList and synchronize its selection. Since RadGridView uses data virtualization and cell elements are being reused during operations like scrolling, the RowInfo.Tag property will store the currently selected index.

• In the UpdateFilterButtonVisibility method the default filter button is collapsed.

• The IsCompatible method indicates with which columns and data rows the custom cell element is compatible during the cells reuse. Since this filter cell will be used only for e specific column and the filtering row, the returned Boolean result is true only in this case.

Custom GridFilterCellElement

• C#
• VB.NET

public class DropDownGridFilterCellElement : GridFilterCellElement
{
    RadDropDownListElement dropDown;
    LightVisualElement operatorElement;
    StackLayoutPanel container; 
    BindingList<string> filterValues = new BindingList<string>();

    public DropDownGridFilterCellElement(GridViewDataColumn column, GridRowElement row) : base(column, row)
    {
    }

    BindingContext bc = new BindingContext();

    protected override void CreateChildElements()
    {
        base.CreateChildElements();
        operatorElement = new LightVisualElement();
        container = new StackLayoutPanel();
        dropDown = new RadDropDownListElement();

        dropDown.BindingContext = bc;
        dropDown.DropDownStyle = RadDropDownStyle.DropDownList; 
        dropDown.SelectedIndexChanged += dropDown_SelectedIndexChanged;

        this.Children.Add(container);
        container.Children.Add(operatorElement);
        container.Children.Add(dropDown);
    }

    private void dropDown_SelectedIndexChanged(object sender, Telerik.WinControls.UI.Data.PositionChangedEventArgs e)
    {
        GridViewDataColumn dataColumn = this.ColumnInfo as GridViewDataColumn;

        if (dataColumn.FilterDescriptor == null)
        {
            dataColumn.FilterDescriptor = new Telerik.WinControls.Data.FilterDescriptor(this.ColumnInfo.Name, Telerik.WinControls.Data.FilterOperator.Contains, null);
            dataColumn.FilterDescriptor.IsFilterEditor = true;
        }
        if (e.Position > -1)
        {
            this.Value = dropDown.Items[e.Position].Text;
            this.RowInfo.Tag = e.Position;
            dataColumn.FilterDescriptor.Value = this.Value;
        }
        if (e.Position == 0)
        {
            dataColumn.FilterDescriptor = null;
        }
    }

    public override void Detach()
    {
        dropDown.SelectedIndexChanged -= dropDown_SelectedIndexChanged;
        base.Detach();
    }

    protected override void SetContentCore(object value)
    {
        base.SetContentCore(value);

        GridViewDataColumn dataColumn = this.ColumnInfo as GridViewDataColumn;
        if (dropDown.DataSource == null)
        {
            filterValues.Add("No filter");
            foreach (string distinctValue in dataColumn.DistinctValues)
            {
                filterValues.Add(distinctValue);
            }
            dropDown.SelectedIndexChanged -= dropDown_SelectedIndexChanged;
            dropDown.DataSource = filterValues;

            dropDown.SelectedIndex = 0;
            dropDown.SelectedIndexChanged += dropDown_SelectedIndexChanged;
        }
        this.DrawText = false;
        this.ForeColor = Color.Transparent;
        operatorElement.ForeColor = Color.Black; 

        if (this.RowInfo.Tag != null && this.RowInfo.Tag.ToString() != dropDown.SelectedIndex.ToString())
        {
            dropDown.SelectedIndexChanged -= dropDown_SelectedIndexChanged;
            //synchronize the selected option
            dropDown.SelectedIndex = (int)this.RowInfo.Tag;
            dropDown.SelectedIndexChanged += dropDown_SelectedIndexChanged;
        }

        if (dataColumn != null && dataColumn.FilterDescriptor != null)
        {
            //synchronize the filter operator
            this.operatorElement.Text = dataColumn.FilterDescriptor.Operator.ToString();
        }
        else
        {
            dropDown.SelectedIndexChanged -= dropDown_SelectedIndexChanged;
            dropDown.SelectedIndex = 0;
            dropDown.SelectedIndexChanged += dropDown_SelectedIndexChanged;
        }
    }

    //hide the default filter button
    protected override void UpdateFilterButtonVisibility(bool enabled)
    {
        enabled = false;
        base.UpdateFilterButtonVisibility(enabled);
    }

    public override bool IsCompatible(GridViewColumn data, object context)
    {
        return data is CustomColumn && context is GridViewFilteringRowInfo;
    }
}

Public Class DropDownGridFilterCellElement
    Inherits GridFilterCellElement
    Private dropDown As RadDropDownListElement
    Private operatorElement As LightVisualElement
    Private container As StackLayoutPanel
    Private filterValues As BindingList(Of String)
    Private bc As BindingContext
    Public Sub New(column As GridViewDataColumn, row As GridRowElement)
        MyBase.New(column, row)
    End Sub
    Protected Overrides Sub CreateChildElements()
        MyBase.CreateChildElements()
        filterValues = New BindingList(Of String)()
        bc = New Windows.Forms.BindingContext()
        operatorElement = New LightVisualElement()
        container = New StackLayoutPanel()
        dropDown = New RadDropDownListElement()
        dropDown.BindingContext = bc
        dropDown.DropDownStyle = RadDropDownStyle.DropDownList
        AddHandler dropDown.SelectedIndexChanged, AddressOf dropDown_SelectedIndexChanged
        Me.Children.Add(container)
        container.Children.Add(operatorElement)
        container.Children.Add(dropDown)
    End Sub
    Private Sub dropDown_SelectedIndexChanged(ByVal sender As Object, ByVal e As Telerik.WinControls.UI.Data.PositionChangedEventArgs)
        Dim dataColumn As GridViewDataColumn = TryCast(Me.ColumnInfo, GridViewDataColumn)
        If dataColumn.FilterDescriptor Is Nothing Then
            dataColumn.FilterDescriptor = New Telerik.WinControls.Data.FilterDescriptor(Me.ColumnInfo.Name, Telerik.WinControls.Data.FilterOperator.Contains, Nothing)
            dataColumn.FilterDescriptor.IsFilterEditor = True
        End If
        If e.Position > -1 Then
            Me.Value = dropDown.Items(e.Position).Text
            Me.RowInfo.Tag = e.Position
            dataColumn.FilterDescriptor.Value = Me.Value
        End If
        If e.Position = 0 Then
            dataColumn.FilterDescriptor = Nothing
        End If
    End Sub
    Public Overrides Sub Detach()
        RemoveHandler dropDown.SelectedIndexChanged, AddressOf dropDown_SelectedIndexChanged
        MyBase.Detach()
    End Sub
    Protected Overrides Sub SetContentCore(ByVal value As Object)
        MyBase.SetContentCore(value)
        Dim dataColumn As GridViewDataColumn = TryCast(Me.ColumnInfo, GridViewDataColumn)
        If dropDown.DataSource Is Nothing Then
            filterValues.Add("No filter")
            For Each distinctValue As String In dataColumn.DistinctValues
                filterValues.Add(distinctValue)
            Next
            RemoveHandler dropDown.SelectedIndexChanged, AddressOf dropDown_SelectedIndexChanged
            dropDown.DataSource = filterValues
            dropDown.SelectedIndex = 0
            AddHandler dropDown.SelectedIndexChanged, AddressOf dropDown_SelectedIndexChanged
        End If
        Me.DrawText = False
        Me.ForeColor = Color.Transparent
        operatorElement.ForeColor = Color.Black
        If Me.RowInfo.Tag IsNot Nothing AndAlso Me.RowInfo.Tag.ToString() <> dropDown.SelectedIndex.ToString() Then
            RemoveHandler dropDown.SelectedIndexChanged, AddressOf dropDown_SelectedIndexChanged
            dropDown.SelectedIndex = CInt(Me.RowInfo.Tag)
            AddHandler dropDown.SelectedIndexChanged, AddressOf dropDown_SelectedIndexChanged
        End If
        If dataColumn IsNot Nothing AndAlso dataColumn.FilterDescriptor IsNot Nothing Then
            Me.operatorElement.Text = dataColumn.FilterDescriptor.[Operator].ToString()
        Else
            RemoveHandler dropDown.SelectedIndexChanged, AddressOf dropDown_SelectedIndexChanged
            dropDown.SelectedIndex = 0
            AddHandler dropDown.SelectedIndexChanged, AddressOf dropDown_SelectedIndexChanged
        End If
    End Sub
    Protected Overrides Sub UpdateFilterButtonVisibility(ByVal enabled As Boolean)
        enabled = False
        MyBase.UpdateFilterButtonVisibility(enabled)
    End Sub
    Public Overrides Function IsCompatible(ByVal data As GridViewColumn, ByVal context As Object) As Boolean
        Return TypeOf data Is CustomColumn AndAlso TypeOf context Is GridViewFilteringRowInfo
    End Function
End Class

2. Create a custom column which will use the newly implemented filter cell element.

• Create a derivative of GridViewTextBoxColumn.

• Override its GetCellType method. Thus, you can return the type of the custom filter cell for the GridViewFilteringRowInfo.

Custom column

• C#
• VB.NET

public class CustomColumn : GridViewTextBoxColumn
{
    public override Type GetCellType(GridViewRowInfo row)
    {
        if (row is GridViewFilteringRowInfo)
        {
            return typeof(DropDownGridFilterCellElement);
        }
        return base.GetCellType(row);
    }
}

Public Class CustomColumn
    Inherits GridViewTextBoxColumn
    Public Overrides Function GetCellType(ByVal row As GridViewRowInfo) As Type
        If TypeOf row Is GridViewFilteringRowInfo Then
            Return GetType(DropDownGridFilterCellElement)
        End If
        Return MyBase.GetCellType(row)
    End Function
End Class

3. Next, add the custom column to RadGridView and fill the grid with data:

Fill data and add the custom column

• C#
• VB.NET

DataTable dt = new DataTable();
dt.Columns.Add("Id", typeof(int));
dt.Columns.Add("IssueTitle", typeof(string));
dt.Columns.Add("Priority", typeof(string));
for (int i = 1; i < 20; i++)
{
    if (i % 2 == 0)
    {
        dt.Rows.Add(i, "Issue#" + i, "Low");
    }
    else
    {
        dt.Rows.Add(i, "Issue#" + i, "High");
    }
}

this.radGridView1.AutoGenerateColumns = false;

GridViewDecimalColumn idColumn = new GridViewDecimalColumn("Id");
this.radGridView1.Columns.Add(idColumn);
GridViewTextBoxColumn titleColumn = new GridViewTextBoxColumn("IssueTitle");
this.radGridView1.Columns.Add(titleColumn);
CustomColumn myColumn = new CustomColumn();
myColumn.FieldName = myColumn.Name = myColumn.HeaderText = "Priority";
this.radGridView1.Columns.Add(myColumn);

this.radGridView1.DataSource = dt;
this.radGridView1.BestFitColumns(BestFitColumnMode.AllCells);
this.radGridView1.EnableFiltering = true;

Dim dt As DataTable = New DataTable()
dt.Columns.Add("Id", GetType(Integer))
dt.Columns.Add("IssueTitle", GetType(String))
dt.Columns.Add("Priority", GetType(String))
For i As Integer = 1 To 20 - 1
    If i Mod 2 = 0 Then
        dt.Rows.Add(i, "Issue#" & i, "Low")
    Else
        dt.Rows.Add(i, "Issue#" & i, "High")
    End If
Next
Me.radGridView1.AutoGenerateColumns = False
Dim idColumn As GridViewDecimalColumn = New GridViewDecimalColumn("Id")
Me.radGridView1.Columns.Add(idColumn)
Dim titleColumn As GridViewTextBoxColumn = New GridViewTextBoxColumn("IssueTitle")
Me.radGridView1.Columns.Add(titleColumn)
Dim myColumn As CustomColumn = New CustomColumn()
myColumn.FieldName = "Priority"
myColumn.Name = "Priority"
myColumn.HeaderText = "Priority"
Me.radGridView1.Columns.Add(myColumn)
Me.radGridView1.DataSource = dt
Me.radGridView1.BestFitColumns(BestFitColumnMode.AllCells)
Me.radGridView1.EnableFiltering = True

4. The last thing we need to do is to prevent entering edit mode for the filter cell since there is a permanent editor now. For this purpose, it is necessary to cancel the CellBeginEdit event:

Fill data and add the custom column

• C#
• VB.NET

private void radGridView1_CellBeginEdit(object sender, GridViewCellCancelEventArgs e)
{
    if (e.Row is GridViewFilteringRowInfo && e.Column.Name == "Priority")
    {
        e.Cancel = true;
    }
}

Private Sub radGridView1_CellBeginEdit(ByVal sender As Object, ByVal e As GridViewCellCancelEventArgs)
    If TypeOf e.Row Is GridViewFilteringRowInfo AndAlso e.Column.Name = "Priority" Then
        e.Cancel = True
    End If
End Sub

A complete solution providing a C# and VB.NET project is available here.