Google-like Filtering Problem

[Daniel]

Hello,

I am working on a project with RadGrid.
I am trying to apply Google-like Filtering on my project.
(http://www.telerik.com/help/aspnet-ajax/grid-google-like-filtering.html)

I have some problems:

1.) After I filter a column, I don’t see any data in my grid.
2.) Is it possible to filter a numeric field that I do not know in advance its name? (data source of  my grid is dynamic and I don’t know in advance the type of each column)

My code so far:
 

001.Public Class Google_Like_Filter2
002.    Inherits System.Web.UI.Page
003.    Dim dd As New DummyData
004.    Dim dt As New DataTable
005.    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
006.        If Not IsPostBack Then
007.            dt = dd.GenTableData2
008.            Me.RadGrid1.MasterTableView.Columns.Clear()
009.
010.            For Each dataColumn As DataColumn In dt.Columns
011.                Dim gridColumn As New MyCustomFilteringColumnVB()
012.                Me.RadGrid1.MasterTableView.Columns.Add(gridColumn)
013.                gridColumn.DataField = dataColumn.ColumnName
014.                gridColumn.HeaderText = dataColumn.ColumnName
015.            Next
016.        End If
017.    End Sub
018.
019.    Private Sub RadGrid1_ColumnCreating(sender As Object, e As Telerik.Web.UI.GridColumnCreatingEventArgs) Handles RadGrid1.ColumnCreating
020.        If (e.ColumnType = GetType(MyCustomFilteringColumnVB).Name) Then
021.            e.Column = New MyCustomFilteringColumnVB()
022.        End If
023.    End Sub
024.
025.    Private Sub RadGrid1_ItemCommand(sender As Object, e As Telerik.Web.UI.GridCommandEventArgs) Handles RadGrid1.ItemCommand
026.        If (e.CommandName = "Filter") Then
027.            For Each column As GridColumn In e.Item.OwnerTableView.Columns
028.                column.CurrentFilterValue = String.Empty
029.                column.CurrentFilterFunction = GridKnownFunction.NoFilter
030.            Next
031.        End If
032.    End Sub
033.
034.    Private Sub RadGrid1_NeedDataSource(sender As Object, e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles RadGrid1.NeedDataSource
035.        RadGrid1.DataSource = dt
036.
037.    End Sub
038.End Class
039.
040.Public Class MyCustomFilteringColumnVB
041.    Inherits GridBoundColumn
042.    Dim dd As New DummyData
043.    'RadGrid will call this method when it initializes the controls inside the filtering item cells
044.    Protected Overloads Overrides Sub SetupFilterControls(ByVal cell As TableCell)
045.        MyBase.SetupFilterControls(cell)
046.        cell.Controls.RemoveAt(0)
047.        Dim combo As New RadComboBox()
048.        combo.ID = ("RadComboBox1" + Me.UniqueName)
049.        combo.ShowToggleImage = False
050.        combo.Skin = "Office2007"
051.        combo.EnableLoadOnDemand = True
052.        combo.AutoPostBack = True
053.        combo.MarkFirstMatch = False
054.        combo.Height = Unit.Pixel(100)
055.        combo.EnableAutomaticLoadOnDemand = False
056.        AddHandler combo.ItemsRequested, AddressOf Me.list_ItemsRequested
057.        AddHandler combo.SelectedIndexChanged, AddressOf Me.list_SelectedIndexChanged
058.        cell.Controls.AddAt(0, combo)
059.        cell.Controls.RemoveAt(1)
060.    End Sub
061.    'RadGrid will cal this method when the value should be set to the filtering input control(s)
062.    Protected Overloads Overrides Sub SetCurrentFilterValueToControl(ByVal cell As TableCell)
063.        MyBase.SetCurrentFilterValueToControl(cell)
064.        Dim combo As RadComboBox = DirectCast(cell.Controls(0), RadComboBox)
065.        If (Me.CurrentFilterValue <> String.Empty) Then
066.            combo.Text = Me.CurrentFilterValue
067.        End If
068.    End Sub
069.    'RadGrid will cal this method when the filtering value should be extracted from the filtering input control(s)
070.    Protected Overloads Overrides Function GetCurrentFilterValueFromControl(ByVal cell As TableCell) As String
071.        Dim combo As RadComboBox = DirectCast(cell.Controls(0), RadComboBox)
072.        Return combo.Text
073.    End Function
074.    Private Sub list_ItemsRequested(ByVal o As Object, ByVal e As RadComboBoxItemsRequestedEventArgs)
075.        Dim dt As DataTable = dd.GenTableData2
076.        CType(o, RadComboBox).DataTextField = Me.DataField
077.        CType(o, RadComboBox).DataValueField = Me.DataField
078.        'If (Me.ColumnType Is GetType(String)) Then
079.
080.        'dt = dt.Select(String.Format(Me.UniqueName + " LIKE '*{0}*'", e.Text)).CopyToDataTable
081.        dt = dt.Select(Me.UniqueName + " LIKE '%" + e.Text + "%'").CopyToDataTable
082.        Dim dv As DataView = New DataView(dt)
083.        dt = dv.ToTable("dt", False, Me.UniqueName)
084.        ''Else
085.        'End If
086.
087.
088.
089.        CType(o, RadComboBox).DataSource = dt
090.
091.        CType(o, RadComboBox).DataBind()
092.    End Sub
093.
094.    Private Sub list_SelectedIndexChanged(ByVal o As Object, ByVal e As RadComboBoxSelectedIndexChangedEventArgs)
095.        Dim filterItem As GridFilteringItem = DirectCast((DirectCast(o, RadComboBox)).NamingContainer, GridFilteringItem)
096.        If (Me.UniqueName = "Index") Then
097.            'If (Me.ColumnType Is GetType(Integer)) Then
098.            'this is filtering for integer column type
099.            filterItem.FireCommandEvent("Filter", New Pair("EqualTo", Me.UniqueName))
100.        End If
101.        'filtering for string column type
102.        filterItem.FireCommandEvent("Filter", New Pair("Contains", Me.UniqueName))
103.    End Sub
104.End Class
105.
106.Public Class DummyData
107. Public Function GenTableData2(Optional records = 30)
108.        Dim dt As New DataTable
109.        dt.Columns.Add("ID", GetType(Integer))
110.        dt.Columns.Add("First", GetType(String))
111.        dt.Columns.Add("Last", GetType(String))
112.        dt.Columns.Add("Birth", GetType(DateTime))
113.
114.
115.        For index = 1 To records
116.            dt.Rows.Add(index, "First" & index, "Last" & index, Date.Now.AddDays(-index))
117.        Next
118.
119.        Return dt
120.    End Function
121.End Class

Thanks,
Daniel.

[Viktor Tachev]

Hi Daniel,

For your convenience I have prepared a sample project where the filtering is implemented. Note that the DataType for a column is set when the column is added to the GridTableView.

Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        dt = GetDataTable("SELECT ShipName, ShipVia, ShipCity FROM Orders")
        Me.RadGrid1.MasterTableView.Columns.Clear()
        For Each dataColumn As DataColumn In dt.Columns
            Dim gridColumn As New MyCustomFilteringColumnCS()
            Me.RadGrid1.MasterTableView.Columns.Add(gridColumn)
            gridColumn.DataField = dataColumn.ColumnName
            gridColumn.HeaderText = dataColumn.ColumnName
            gridColumn.DataType = dataColumn.DataType
        Next
    End If
End Sub

Then, when the Filter Command is fired you can check what is the DataType of the column and set the filter function accordingly.

Private Sub list_SelectedIndexChanged(ByVal o As Object, ByVal e As RadComboBoxSelectedIndexChangedEventArgs)
    Dim filterItem As GridFilteringItem = DirectCast((DirectCast(o, RadComboBox)).NamingContainer, GridFilteringItem)

    If (Me.DataType = GetType(Integer)) Then
        'this is filtering for integer column type
        filterItem.FireCommandEvent("Filter", New Pair("EqualTo", Me.UniqueName))
    End If
    'filtering for string column type
    filterItem.FireCommandEvent("Filter", New Pair("Contains", Me.UniqueName))
End Sub

Try using similar approach to the one illustrated in the attached sample and you should be able to implement the functionality you are looking for.

Regards,
Viktor Tachev
Telerik

 

 

[Daniel]

Hi Viktor Tachev,

Thank you very much for the solution you have provided!
It works great!

Question:
Is it possible to add / change the functionality of the combo-box as follows:
when the user enters a Character in ComboBox, it is highlighted in the drop-down.
Link: http://designshack.net/tutorialexamples/html5-autocomplete-suggestions/
 
Thank you,
Daniel.

[Viktor Tachev]

Hi Daniel,

I am afraid that highlighting the text like illustrated in the provided link is not supported out of the box. If you would like to add such functionality you need to implement custom client-side logic.

You can go through the items in the dropdown and wrap the text that matches the user input in a <strong> or <span> tag. Then you can add custom CSS that applies the appropriate style for that element.

Regards,
Viktor Tachev
Telerik

 

 

[Daniel]

Hi Viktor Tachev,

Thank you for your response.

FYI, someone showed me how to implement such combobox functionality.
In the MyCustomFilteringColumnCS class, add this code in the SetupFilterControls sub: 
combo.Filter = RadComboBoxFilter.Contains
 

Thank you for all your help,
Daniel.