[November-06]

I've done a lot of searches about this topic and it seems that there are a lot of people beside me who has the same problem. There are some third party controls and some dlls that can be downloaded to solve this problem but I do not want such things. I want to learn to create the control myself but I would really appreciate if someone could help and guide me.

I created a Web User Control with a textbox, a gridview and a dropdownlist extender. This became my multi-column dropdownlist. What I lack is the autocomplete functionality. I want the first gridviewrow with a matching content to be focused as the user types some characters on the textbox. Now the match doesn't have to e from one column only. Any column that matches the keyword should be read.

Here is what I've started so far...

Design

<asp:UpdatePanel ID="updDropDownSelection" runat="server">
    <ContentTemplate>
        <asp:HiddenField ID="hfDropDownSelectedIndex" runat="server" />
        <asp:HiddenField ID="hfDropDownSelectedValue" runat="server" />
        <asp:HiddenField ID="hfDropDownSelectedText" runat="server" />
        <asp:TextBox ID="txtDropDownSelection" runat="server" ReadOnly="false" style="width:96%"></asp:TextBox>
        <asp:Panel ID="pnlDropDownSelection" runat="server" style="display:none;background-color:#FFFFFF;">
            <asp:GridView ID="gvwDropDownSelection" runat="server" AutoGenerateColumns="false"></asp:GridView>
        </asp:Panel>
        <ajaxToolkit:DropDownExtender ID="ddeDropDownSelection" runat="server" TargetControlID="txtDropDownSelection" DropDownControlID="pnlDropDownSelection"></ajaxToolkit:DropDownExtender>
    </ContentTemplate>
</asp:UpdatePanel>

Code Behind

Imports SS.Utilities
Imports SS.Utilities.Controls

Partial Public Class MultiColumnDropDownList
    Inherits System.Web.UI.UserControl

    Public Sub New()
        _DropDownListHeight = 150
        _HoverBackColor = "#0000FF"
        _HoverForeColor = "#FFFFFF"
        _DataValueField = "0"
        _DataTextField = "1"
    End Sub

#Region "Properties"
    Private _DataSource As Object
    Public Property DataSource() As Object
        Get
            Return _DataSource
        End Get
        Set(ByVal value As Object)
            _DataSource = value
        End Set
    End Property

    Private _DropDownListHeight As Integer
    Public Property DropDownListHeight() As Integer
        Get
            Return _DropDownListHeight
        End Get
        Set(ByVal value As Integer)
            _DropDownListHeight = value
        End Set
    End Property

    Private _HoverBackColor As String
    Public Property HoverBackColor() As String
        Get
            Return _HoverBackColor
        End Get
        Set(ByVal value As String)
            _HoverBackColor = value
        End Set
    End Property

    Private _HoverForeColor As String
    Public Property HoverForeColor() As String
        Get
            Return _HoverForeColor
        End Get
        Set(ByVal value As String)
            _HoverForeColor = value
        End Set
    End Property

    Private _Columns As ControlUtility.DropDownColumns
    <PersistenceMode(PersistenceMode.InnerProperty)> _
    <TemplateContainer(GetType(MultiColumnDropDownList))> _
    <TemplateInstance(TemplateInstance.Multiple)> _
    Public Property Columns() As ControlUtility.DropDownColumns
        Get
            Return _Columns
        End Get
        Set(ByVal value As ControlUtility.DropDownColumns)
            _Columns = value
        End Set
    End Property

    Public Property SelectedIndex() As Integer
        Get
            Return IIf(IsNumeric(hfDropDownSelectedIndex.Value.Trim()), hfDropDownSelectedIndex.Value.Trim(), -1)
        End Get
        Set(ByVal value As Integer)
            hfDropDownSelectedIndex.Value = value
        End Set
    End Property

    Public Property SelectedValue() As String
        Get
            Return hfDropDownSelectedValue.Value.Trim()
        End Get
        Set(ByVal value As String)
            hfDropDownSelectedValue.Value = value
        End Set
    End Property

    Public Property SelectedText() As String
        Get
            Return hfDropDownSelectedText.Value.Trim()
        End Get
        Set(ByVal value As String)
            hfDropDownSelectedText.Value = value
            txtDropDownSelection.Text = value
        End Set
    End Property

    Private _DataValueField As String
    Public Property DataValueField() As String
        Get
            Return _DataValueField
        End Get
        Set(ByVal value As String)
            _DataValueField = value
        End Set
    End Property

    Private _DataTextField As String
    Public Property DataTextField() As String
        Get
            Return _DataTextField
        End Get
        Set(ByVal value As String)
            _DataTextField = value
        End Set
    End Property

#End Region

#Region "Properties And Functions"
    Private Function GetDataItem(ByVal gvr As GridViewRow, ByVal strField As String) As String
        If IsNumeric(strField) Then
            Return gvr.DataItem(CInt(strField))
        Else
            Return gvr.DataItem(strField)
        End If
    End Function

    Public Overloads Sub DataBind()
        If TypeOf (_DataSource) Is DataTable Then
            If Not Me.Columns Is Nothing Then
                gvwDropDownSelection.AutoGenerateColumns = False
                For i = 0 To Me.Columns.Count - 1
                    Dim bfield As New BoundField()
                    bfield.DataField = Me.Columns.Item(i).DataField
                    bfield.HeaderText = Me.Columns.Item(i).HeaderText
                    gvwDropDownSelection.Columns.Add(bfield)
                Next
            Else
                gvwDropDownSelection.AutoGenerateColumns = True
            End If
        End If

        gvwDropDownSelection.DataSource = _DataSource
        gvwDropDownSelection.DataBind()
        pnlDropDownSelection.Style("height") = "auto"
        pnlDropDownSelection.Style("max-height") = DropDownListHeight.ToString() & "px"
        pnlDropDownSelection.Style("overflow-y") = "scroll"
    End Sub
#End Region

    Private Sub gvwDropDownSelection_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvwDropDownSelection.RowDataBound
        If e.Row.RowType = DataControlRowType.DataRow Then
            ClientMethods.AddHoverEffects(e.Row, HoverBackColor, HoverForeColor)

            Dim strb As New StringBuilder
            strb.Append(ClientMethods.SetValue(hfDropDownSelectedIndex.ClientID, e.Row.RowIndex))
            strb.Append(ClientMethods.SetValue(hfDropDownSelectedValue.ClientID, GetDataItem(e.Row, DataValueField)))
            strb.Append(ClientMethods.SetValue(hfDropDownSelectedText.ClientID, GetDataItem(e.Row, DataTextField)))
            strb.Append(ClientMethods.SetValue(txtDropDownSelection.ClientID, GetDataItem(e.Row, DataTextField)))
            e.Row.Attributes.Add("onclick", strb.ToString()) 'Add functionality to get selected text and value on click
        End If
    End Sub
End Class

To summarize my problem, how can I add the autocomplete functionality to my multi-column dropdownlist?