[Solved] Grid / Google Like Filtering doesn't work

[Jadesada]

Hi, I'm try to create project like "Google like filtering" and I'm using code same this demo (http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandcombo/defaultvb.aspx?product=grid)

But when I type words on RadComboBox it's doesn't auto complete I don't know how to solve it please help me

My Code
"TemplateGoogleSuggestPage.aspx"

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="TemplateGoogleSuggestPage.aspx.vb" Inherits="Template_Web_TemplateGoogleSuggestPage" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolderHeader" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div id="main-content">
        <div class="headName">
            TemplateGoogleSuggestPage
        </div>
        <div class="divGrid" runat="server">
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="rg_Task">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl LoadingPanelID="RadAjaxLoadingPanel1" ControlID="rg_Task" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>

            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server"
                Skin="Telerik">
            </telerik:RadAjaxLoadingPanel>

            <telerik:RadGrid ID="rg_Task" runat="server" AutoGenerateColumns="False">
            </telerik:RadGrid>

            <asp:Button ID="bt_Confirm" runat="server" Text="ตกลง" />
            <asp:Button ID="bt_Cancel" runat="server" Text="ยกเลิก" />

        </div>
    </div>
</asp:Content>

"TemplateGoogleSuggestPage.aspx.vb"

Imports Telerik.Web.UI
Imports TimesheetConnector.Command.TEST
Imports TimesheetEntities.Entities.TS
Imports System.Data
Imports System.Web.Services

Partial Class Template_Web_TemplateGoogleSuggestPage
    Inherits System.Web.UI.Page

    Dim DbConn As TEST001

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Try
            If Not IsPostBack Then
                DbConn = New TEST001
                ViewState("Data") = DbConn.GetFirstData
                ViewState("SqlCommand") = New List(Of String)
                Me.rg_Task.MasterTableView.Columns.Clear()

                'RadGrid Properties
                With rg_Task
                    'General properties
                    .AutoGenerateColumns = False

                    'Paging style
                    .AllowPaging = True
                    .PagerStyle.Mode = GridPagerMode.NextPrevAndNumeric
                    .MasterTableView.PageSize = 10
                    .PagerStyle.AlwaysVisible = True
                    .Width = Unit.Pixel(560)
                    .AllowFilteringByColumn = True
                    .MasterTableView.EditMode = GridEditMode.InPlace
                    .MasterTableView.DataKeyNames = {"taskID"}
                    .MasterTableView.CommandItemDisplay = GridCommandItemDisplay.Bottom
                    .MasterTableView.CommandItemSettings.AddNewRecordText = "เพิ่ม"
                    .MasterTableView.CommandItemSettings.ShowRefreshButton = False

                    'Drag/Drop
                    .ClientSettings.AllowDragToGroup = False
                End With

                Dim column1 As New MyCustomFilteringColumnVB(DirectCast(ViewState("Data"), Data.DataTable))
                rg_Task.MasterTableView.Columns.Add(column1)
                column1.ItemStyle.Width = Unit.Percentage(1)
                column1.DataField = "TaskID"
                column1.HeaderText = "รหัสงาน"
                column1.Visible = False

                Dim column2 As New MyCustomFilteringColumnVB(DirectCast(ViewState("Data"), Data.DataTable))
                rg_Task.MasterTableView.Columns.Add(column2)
                column2.ItemStyle.Width = Unit.Percentage(5)
                column2.DataField = "TaskName"
                column2.HeaderText = "ชื่องาน"

                Dim column3 As New GridEditCommandColumn
                rg_Task.MasterTableView.Columns.Add(column3)
                column3.ItemStyle.Width = Unit.Percentage(1)

                Dim column4 As New GridButtonColumn
                rg_Task.MasterTableView.Columns.Add(column4)
                column4.ItemStyle.Width = Unit.Percentage(1)
                column4.CommandName = "Delete"
                column4.ConfirmText = "คุณต้องการลบข้อมูลชุดนี้หรือไม่?"
                column4.ConfirmTitle = "คำเตือน!"
                column4.Text = "ลบ"
                column4.UniqueName = "DeleteColumn"

            Else
                rg_Task.MasterTableView.Columns(0).ItemStyle.Width = Unit.Percentage(1)
                rg_Task.MasterTableView.Columns(1).ItemStyle.Width = Unit.Percentage(5)
            End If

            'Add ajax trigger
            'Me.RadAjaxManager1.AjaxSettings.AddAjaxSetting(rg_Task, rg_Task)

            Me.RadAjaxLoadingPanel1.Transparency = 30

            rg_Task.DataSource = DirectCast(ViewState("Data"), Data.DataTable)
        Catch ex As Exception

        End Try

        bt_Confirm.OnClientClick() = "javascript:confirm('คุณต้องการ ""บันทึก"" ข้อมูลหรือไม่?')"
    End Sub

    Protected Sub rg_Task_ColumnCreating(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridColumnCreatingEventArgs) Handles rg_Task.ColumnCreating
        If e.ColumnType = GetType(MyCustomFilteringColumnVB).Name Then
            e.Column = New MyCustomFilteringColumnVB(DirectCast(ViewState("Data"), DataTable))
        End If
    End Sub

    Protected Sub rg_Task_ItemCommand(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles rg_Task.ItemCommand
        If (e.CommandName = RadGrid.InitInsertCommandName) Then
            rg_Task.MasterTableView.ClearEditItems()
        End If

        If e.CommandName = RadGrid.EditCommandName Then
            e.Item.OwnerTableView.IsItemInserted = False
        End If

        If (e.CommandName = RadGrid.FilterCommandName) Then
            For Each column As GridColumn In e.Item.OwnerTableView.Columns
                column.CurrentFilterValue = String.Empty
                column.CurrentFilterFunction = GridKnownFunction.NoFilter
            Next
        End If
    End Sub

    Protected Sub rg_Task_UpdateCommand(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles rg_Task.UpdateCommand
        Dim editedItem As GridEditableItem = TryCast(e.Item, GridEditableItem)

        Dim TaskID As String = editedItem.OwnerTableView.DataKeyValues(editedItem.ItemIndex)("taskID").ToString

        Dim TaskName As String = (TryCast(editedItem("TaskName").Controls(0), TextBox)).Text

        'เก็บ data ที่ยังไม่ confirm ลงใน DataTable
        Dim dt As DataTable = ViewState("Data")
        dt.Rows(editedItem.ItemIndex).Item("TaskName") = TaskName
        ViewState("Data") = dt
        rg_Task.DataSource = ViewState("Data")
        rg_Task.DataBind()

        'เก็บ sql command ลงใน List Of String
        DbConn = New TEST001
        Dim lstSQL As List(Of String) = TryCast(ViewState("SqlCommand"), List(Of String))
        lstSQL.Add(DbConn.SqlCmd_UpdateTask(TaskID, TaskName))
        ViewState("SqlCommand") = lstSQL
    End Sub

    Protected Sub rg_Task_InsertCommand(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles rg_Task.InsertCommand
        Dim insertedItem As GridEditableItem = DirectCast(e.Item, GridEditableItem)

        Dim TaskName As String = (TryCast(insertedItem("TaskName").Controls(0), TextBox)).Text

        'เก็บ data ที่ยังไม่ confirm ลงใน DataTable
        Dim dt As DataTable = ViewState("Data")
        Dim lastTaskID As Integer = GetLastTaskID(dt)
        Dim dr As DataRow = dt.NewRow
        dr.Item("TaskName") = TaskName
        dr.Item("TaskID") = lastTaskID
        dt.Rows.Add(dr)
        ViewState("Data") = dt
        rg_Task.DataSource = ViewState("Data")
        rg_Task.DataBind()

        'เก็บ sql command ลงใน List Of String
        DbConn = New TEST001
        Dim lstSQL As List(Of String) = TryCast(ViewState("SqlCommand"), List(Of String))
        lstSQL.Add(DbConn.SqlCmd_InsertTask(lastTaskID, TaskName))
        ViewState("SqlCommand") = lstSQL
    End Sub

    Protected Sub rg_Task_DeleteCommand(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles rg_Task.DeleteCommand
        Dim item As GridDataItem = DirectCast(e.Item, GridDataItem)

        Dim TaskID As String = item.OwnerTableView.DataKeyValues(item.ItemIndex)("taskID").ToString

        'Delete data ที่ยังไม่ confirm ลงใน DataTable
        Dim dt As DataTable = ViewState("Data")
        dt.Rows.RemoveAt(e.Item.DataSetIndex)
        ViewState("Data") = dt
        rg_Task.DataSource = ViewState("Data")
        rg_Task.DataBind()

        'เก็บ sql command ลงใน List Of String
        DbConn = New TEST001
        Dim lstSQL As List(Of String) = TryCast(ViewState("SqlCommand"), List(Of String))
        lstSQL.Add(DbConn.SqlCmd_DeleteTask(TaskID))
        ViewState("SqlCommand") = lstSQL
    End Sub

    Protected Sub bt_Confirm_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles bt_Confirm.Click
        DbConn = New TEST001
        DbConn.CustomExcecuteNonQuery(TryCast(ViewState("SqlCommand"), List(Of String)))

        ViewState("Data") = DbConn.GetTask
        ViewState("SqlCommand") = New List(Of String)
        rg_Task.DataSource = ViewState("Data")
        rg_Task.DataBind()
    End Sub

    Protected Sub bt_Cancel_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles bt_Cancel.Click
        DbConn = New TEST001

        ViewState("Data") = DbConn.GetTask
        ViewState("SqlCommand") = New List(Of String)
        rg_Task.DataSource = ViewState("Data")
        rg_Task.DataBind()
    End Sub

    Protected Function GetLastTaskID(ByVal dataTable As DataTable) As Integer
        Dim lastID As Integer = -1

        If dataTable.Rows.Count <> 0 Then
            For Each dr As DataRow In dataTable.Rows
                If lastID < CInt(dr.Item("TaskID")) Then
                    lastID = CInt(dr.Item("TaskID"))
                End If
            Next
        End If

        Return lastID + 1
    End Function
End Class

"MyCustomFilteringColumnVB.vb"

Imports Microsoft.VisualBasic
Imports Telerik.Web.UI
Imports System.Data

Public Class MyCustomFilteringColumnVB
    Inherits GridBoundColumn

    Dim dtSource As DataTable
    Dim sName As String

    Sub New(ByVal dataTable As DataTable)
        ' TODO: Complete member initialization
        dtSource = dataTable
    End Sub

    Protected Overrides Sub SetupFilterControls(ByVal cell As TableCell)
        MyBase.SetupFilterControls(cell)
        cell.Controls.RemoveAt(0)

        Dim rcbb_GoogleLikeFilter As New RadComboBox()

        'Set combobox properties
        With rcbb_GoogleLikeFilter
            .ID = Me.UniqueName
            .ShowToggleImage = False 'Default = False
            .Skin = "Office2007"
            .EnableLoadOnDemand = True 'Default = True
            .AutoPostBack = True
            .MarkFirstMatch = True 'Default = True
            .Width = Unit.Pixel(150)
            .EmptyMessage = "Search items"
            .MaxHeight = Unit.Pixel(150)
        End With

        'Event Handling
        AddHandler rcbb_GoogleLikeFilter.ItemsRequested, AddressOf Me.list_ItemRequested
        AddHandler rcbb_GoogleLikeFilter.SelectedIndexChanged, AddressOf Me.list_SelectedIndexChanged

        'Add ComboBox Filter
        cell.Controls.AddAt(0, rcbb_GoogleLikeFilter)
        cell.Controls.RemoveAt(1)
    End Sub

    Protected Overrides Sub SetCurrentFilterValueToControl(ByVal CustomCell As TableCell)
        MyBase.SetCurrentFilterValueToControl(CustomCell)

        Dim rcbb_GoogleLikeFilter As RadComboBox = DirectCast(CustomCell.Controls(0), RadComboBox)

        If (Me.CurrentFilterValue <> String.Empty) Then
            rcbb_GoogleLikeFilter.Text = Me.CurrentFilterValue
        End If
    End Sub

    Protected Overrides Function GetCurrentFilterValueFromControl(ByVal CustomCell As TableCell) As String
        Dim rcbb_GoogleLikeFilter As RadComboBox = DirectCast(CustomCell.Controls(0), RadComboBox)
        Return rcbb_GoogleLikeFilter.Text
    End Function

#Region "--- Event Handling ---"
    Private Sub list_ItemRequested(ByVal o As Object, ByVal e As RadComboBoxItemsRequestedEventArgs)
        DirectCast(o, RadComboBox).DataTextField = Me.DataField
        DirectCast(o, RadComboBox).DataValueField = Me.DataField
        DirectCast(o, RadComboBox).DataSource = dtSource
        DirectCast(o, RadComboBox).DataBind()
    End Sub

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

        If (Me.UniqueName = "Index") Then
            giFilterItem.FireCommandEvent("Filter", New Pair("EqualTo", Me.UniqueName))
        End If

        giFilterItem.FireCommandEvent("Filter", New Pair("Contains", Me.UniqueName))
    End Sub
#End Region

End Class

[Genti]

Hello Jadesada,

Consider this example that I am attaching.

Hope this helps.

Best wishes,
Genti
the Telerik team

[rajesh]

Jadesada,

This solutions works great.
My requirement is to create google like filtering but the Filtering RadCombox needs to have checkbox with it so that user can select multiple value for a filtering.
Will be suggest how best this can be handled.

My datagrid is created dynamically using dynamic linq expression.
My code is working great however I am unable to create the  RadCombobox using template  to include checkbox for multiple selections.

Any help will be very helpful.

Thanks

[Mira]

Hello Rajesh,

You can see how the desired functionality can be implemented in the Multi-Selection RadComboBox for filtering grid code library.
Working with a templates is a general programming knowledge. You can find information on creating templates programmatically in the corresponding MSDN article.

I hope this helps.

All the best,
Mira
the Telerik team