Create custom web control (FilterDropDown)

Create custom web control (FilterDropDown)

In this article we will have a look at implementing a custom web control. This web control will inherit from the Textbox web control and List Box Control, It working as like Dropdown List Box. But Filter feature also added and you Type your Own Text also.

Suppose you have city Dropdown box. It has 1000 Cities. User City is Not there in you Dropdown, then you provide “Other” Option also, and you want add one more Text Box

But Here if City is there in you Drop down you can select that and user need New city they can enter it.

• Copy Following Code.



• Paste it on FilterDropDown .vb file



• Build and Get Dll .



• Add in your application as a control

Imports System.Web.UI.WebControls
Imports System.Web.UI
Imports System.Web
Imports System.Data
Imports System
Imports System.Xml

Public Class FilterDropDown
Inherits System.Web.UI.WebControls.WebControl
Implements INamingContainer

Private Shared DropDown As New TextBox()
Private Shared DropList As New ListBox()

Public Sub New()
MyBase.New()
Me.Width = (Unit).Pixel(200)
Me.BorderWidth = (Unit).Pixel(1)
End Sub

Private Shared Ds As New DataTable()
Private Shared Dt As String
Private Shared m_width As Integer = 200
Public Property dataSource() As DataTable
Get
Return Ds
End Get
Set(ByVal value As DataTable)
Ds = value
End Set
End Property

Public Property dataTextField() As String
Get
Return Dt
End Get
Set(ByVal value As String)
Dt = value
End Set
End Property
Public Property FWidth() As Integer
Get
Return m_width
End Get
Set(ByVal value As Integer)
m_width = value
End Set
End Property


Protected Overloads Overrides Sub CreateChildCOntrols()
DropList.ID = Me.ID & "txt"
DropDown.ID = Me.ID & "List"

' Data Source Assign
DropList.DataSource = Ds
DropList.DataTextField = Dt
DropList.DataBind()

'Properties
DropList.Style.Add("position", "absolute")
DropList.Style.Add("display", "none")
DropList.Width = (Unit).Pixel(m_width)
DropList.Height = (Unit).Pixel(200)
DropDown.Width = (Unit).Pixel(m_width)

Dim CTxtID As String = Me.ID & "_" & DropDown.ID
Dim CListId As String = Me.ID & "_" & DropList.ID

'Script
Dim LoadScript As String = " <script language='javascript' type='text/javascript'> var myList" & CListId & " = new Array(); for(var i=0; i<document.getElementById('" & CListId & "').options.length;i++) { myList" & CListId & "[i]=document.getElementById('" & CListId & "').options[i].innerText; }</script> "
Me.Page.ClientScript.RegisterStartupScript([GetType](), "Load", LoadScript)

Dim FocusScript As String = "<script language='javascript' type='text/javascript'> function " & CListId & "show(oObject,ListID){var len = oObject.value;oObject.value='';var oTextRange = document.selection.createRange();if (oTextRange != null){var left = (oTextRange.boundingLeft-5);var Top = oTextRange.boundingTop + 17;}document.getElementById(ListID).style.top=Top;document.getElementById(ListID).style.left=left;oObject.value=len ;}</script> "
Me.Page.ClientScript.RegisterStartupScript([GetType](), "Focus", FocusScript)
DropDown.Attributes.Add("onfocus", "document.getElementById('" & CListId & "').style.display='block';" & CListId & "show(this,'" & CListId & "');")
DropDown.Attributes.Add("onblur", "document.getElementById('" & CListId & "').style.display='none'")
DropDown.Attributes.Add("onkeyup", CListId & "MyList(this,'" & CListId & "'); ")

Me.Page.ClientScript.RegisterStartupScript([GetType](), "MyList", "<script language='javascript' type='text/javascript'>function " & CListId & "MyList(txtid,listid) { var txt = txtid.value;var tot=document.getElementById(listid).options.length;for(i=0; i<tot;i++) { document.getElementById(listid).remove(0);}var j =0;for(i=0; i<myList" & CListId & ".length;i++) {if( (myList" & CListId & "[i].toUpperCase()).indexOf(txt.toUpperCase())==0) { var elOptNew = document.createElement('option'); elOptNew.text = myList" & CListId & "[i]; document.getElementById(listid).add(elOptNew,j);j++; } } }</script>")

DropList.Attributes.Add("onChange", "document.getElementById('" & CTxtID & "').value=this.options[this.selectedIndex].innerText")

Controls.Add(DropDown)
Controls.Add(DropList)

End Sub



Public Property result() As String
Get
Try
Return DropDown.Text
Catch ex As Exception
Return ""
End Try
End Get
Set(ByVal value As String)
DropDown.Text = value
End Set
End Property

End Class

Output:

After Type Any text