telerik

KB Article
Home  Support  Knowledge Base  Category  "Google suggest" style filtering in RadGrid
(ID#696) "Google suggest" style filtering in RadGrid
Rating:
Last Modified: 6/13/2008
 

Article information

Article relates to

RadGrid, RadComboBox
RadGrid AJAX & RadComboBox AJAX (Prometheus)
Telerik.Web.UI 2007.3.1425

Created by

Stephen, Telerik

Last modified by

Veskoni, Telerik

HOW-TO 
Perform "Google suggest" style filtering in RadGrid

DESCRIPTION
In some cases you may whish to display the available options when the user types in filter textbox of grid column and filter the record on item selection/Enter key press. 
 




SOLUTION
This behavior is easily attainable by replacing the default textbox input with RadComboBox instance in "look-up textbox" mode (setting the combobox's ShowToggleImage property to false). Here are the steps you need to undertake in order to configure the grid as mentioned above:

  • extend the default GridBoundColumn to remove the default textbox and embed RadComboBox inside the filtering cell
  • configure the options for the combobox control as per your requirements (the essential parts are to set ShowToggleImage = false, ID for the combobox, EnableLoadOnDemand=true, MarkFirstMatch = true and attach the ItemsRequested/SelectedIndexChanged events). These operation should take place in the overriden SetupFilterControls(TableCell cell) method
  • override the SetCurrentFilterValueToControl(TableCell cell) / GetCurrentFilterValueFromControl(TableCell cell) methods to set/get the user input
  • filter the combobox items in the ItemsRequested handler depending on the UniqueName of the currently filtered column
  • raise command event for the GridFilteringItem calling its FireCommandEvent(commandName, new Pair(filterFunctionName, columnUniqueName)) method 

The example below is expanded by enabling the AJAX mechanism of the grid along with its built-in paging and sorting features. The filtering action will be triggered when you choose item from a look-up textbox or type inside filtering input and press Enter from the keyboard.
In addition, there is Clear filter button on the page which restores the initial grid content.

Note: In our case we search for matches in the default grid source on each filter command. That is why we set each column's CurrentFilterFunction to GridKnownFunction.NoFilter and CurrentFilterValue to String.Empty on filter operation.

You can find a demo project in the Article files section for further reference.
  
Default.aspx

            <radG:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" AllowPaging="True" 
                AllowSorting="True" AllowFilteringByColumn="True" Width="500px" EnableAJAX="True" 
                EnableAJAXLoadingTemplate="True" Skin="Windows">  
                <MasterTableView AllowFilteringByColumn="True" /> 
                <PagerStyle Mode="NumericPages" /> 
            </radG:RadGrid> 
            <br> 
            <asp:Button ID="clrFilters" runat="server" Text="Clear filters"></asp:Button> 

Default.aspx.vb

    Dim ds As DataSet  
    Dim dt As DataTable  
 
    Public Shared ReadOnly Property connectionString() As String 
        Get 
            Dim dbPath As String = System.Web.HttpContext.Current.Server.MapPath("~\Grid\Data\Access\Nwind.mdb")  
            Return ("Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + dbPath)  
        End Get 
    End Property 
 
    Private Sub RadGrid1_NeedDataSource(ByVal source As Object, ByVal e As Telerik.WebControls.GridNeedDataSourceEventArgs) Handles RadGrid1.NeedDataSource  
        dt = GetDataTable("SELECT Country, City, Index FROM Customers")  
        Me.RadGrid1.DataSource = dt  
    End Sub 
 
    Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyBase.Load  
        If Not IsPostBack Then 
            ds = GetDataSet("SELECT Country, City, Index FROM Customers")  
            Me.RadGrid1.MasterTableView.Columns.Clear()  
            For Each dataColumn As DataColumn In ds.Tables(0).Columns  
                Dim gridColumn As RadGrid.MyCustomFilteringColumn = New RadGrid.MyCustomFilteringColumn  
                Me.RadGrid1.MasterTableView.Columns.Add(gridColumn)  
                gridColumn.DataField = dataColumn.ColumnName  
                gridColumn.HeaderText = dataColumn.ColumnName  
            Next 
        End If 
    End Sub 
 
    Private Sub RadGrid1_ColumnCreating(ByVal sender As Object, ByVal e As Telerik.WebControls.GridColumnCreatingEventArgs) Handles RadGrid1.ColumnCreating  
        If (e.ColumnType = GetType(RadGrid.MyCustomFilteringColumn).Name) Then 
            e.Column = New RadGrid.MyCustomFilteringColumn  
        End If 
    End Sub 
 
    Private Sub RadGrid1_ItemCommand(ByVal source As Object, ByVal e As Telerik.WebControls.GridCommandEventArgs) Handles RadGrid1.ItemCommand  
        If (e.CommandName = "Filter") Then 
            For Each column As GridColumn In e.Item.OwnerTableView.Columns  
                column.CurrentFilterValue = String.Empty  
                column.CurrentFilterFunction = GridKnownFunction.NoFilter  
            Next 
        End If 
    End Sub 
 
    Private Sub clrFilters_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles clrFilters.Click  
        For Each column As GridColumn In RadGrid1.MasterTableView.Columns  
            column.CurrentFilterFunction = GridKnownFunction.NoFilter  
            column.CurrentFilterValue = String.Empty  
        Next 
        RadGrid1.MasterTableView.FilterExpression = String.Empty  
        RadGrid1.MasterTableView.Rebind()  
    End Sub 
 
    Public Shared Function GetDataTable(ByVal query As String) As DataTable  
        Dim MyOleDbConnection As OleDbConnection = New OleDbConnection(connectionString)  
        Dim MyOleDbDataAdapter As OleDbDataAdapter = New OleDbDataAdapter  
        MyOleDbDataAdapter.SelectCommand = New OleDbCommand(query, MyOleDbConnection)  
        Dim myDataTable As DataTable = New DataTable  
        MyOleDbConnection.Open()  
        Try 
            MyOleDbDataAdapter.Fill(myDataTable)  
        Finally 
            MyOleDbConnection.Close()  
        End Try 
        Return myDataTable  
    End Function 
 
    Public Shared Function GetDataSet(ByVal query As String) As DataSet  
        Dim MyOleDbConnection As OleDbConnection = New OleDbConnection(connectionString)  
        Dim MyOleDbDataAdapter As OleDbDataAdapter = New OleDbDataAdapter  
        MyOleDbDataAdapter.SelectCommand = New OleDbCommand(query, MyOleDbConnection)  
        Dim myDataSet As DataSet = New DataSet("Customers")  
        MyOleDbConnection.Open()  
        Try 
            MyOleDbDataAdapter.Fill(myDataSet)  
        Finally 
            MyOleDbConnection.Close()  
        End Try 
        Return myDataSet  
    End Function 

Default.aspx.cs