Archive
Monthly
Go
|
|
DNN Blog
Aug
7
Posted by:
Michael Washington
8/7/2006
The DNNTextSuggest control is actually a very complex control. You can go to the example website at: http://webcontrols.dotnetnuke.com where you can test out all the DNN web controls (you can download the source here). The control allows you to type in text and provides matching items from a data source (for example a database). This provides the same functionality as Google Suggests.
This is an amazingly complex control and you are advised to read the extensive documentation that is provided to fully explore it's features. This is a brief introduction to the control to show how easy it is to get it up and running.
Here are the steps to implement this web control in your own modules. This works with the full version of Visual Studio 2005 and also Visual Web Developer Express.
If you haven't already performed this step, you will want to add the DNN web controls to your Visual Studio toolbox:
- Right-Click on the Toolbox in Visual Studio and select Choose Items...
- Use the Browse button to browse to DotNetNuke.WebControls.dll (in the /bin folder of your DotNetNuke installation) and click the OK button.
- The DotNetNuke web controls will now appear in your toolbox:
- Drag the DNNTextSuggest control from the toolbox and drop it on to your DotNetNuke User Control (See my tutorial Creating a Super-Simple DotNetNuke module for information on how to create a DotNetNuke Web User Control) .
- In the properties for the DNNTextSuggest control, click on the yellow lazerbolt to show the events for the control
- We see that there are events that we can wireup a method to. Type "MyDNNTextSuggest_PopulateOnDemand" for the PopulateOnDemand event and click away from the box.
- Visual Studio switches to code view and your method is all ready for your custom code. Add "PopulateList(e.Nodes, e.Text)" to the method so it appears like this:
Protected Sub MyDNNTextSuggest_PopulateOnDemand(ByVal source As Object, ByVal e As DotNetNuke.UI.WebControls.DNNTextSuggestEventArgs) Handles MyDNNTextSuggest.PopulateOnDemand
PopulateList(e.Nodes, e.Text)
End Sub
- Ensure that your User Control has this line toward the top: Inherits Entities.Modules.PortalModuleBase
- Enter this additional code:
Private Sub PopulateList(ByVal objNodes As DNNNodeCollection, ByVal strText As String)
Dim o As DNNNode
Dim dt As DataTable = GetData()
'strip out troublesome chars for Select below
strText = strText.Replace("[", "").Replace("]", "").Replace("'", "''")
dt.CaseSensitive = Me.MyDNNTextSuggest.CaseSensitive
Dim drs() As DataRow = dt.Select("name like '" & strText & "%'")
Dim dr As DataRow
For Each dr In drs
If Me.MyDNNTextSuggest.MaxSuggestRows = 0 _
OrElse objNodes.Count < (Me.MyDNNTextSuggest.MaxSuggestRows + 1) Then
o = New DNNNode(CStr(dr("name")))
o.ID = CStr(dr("id"))
objNodes.Add(o)
End If
Next
End Sub
Private Function GetData() As DataTable
Dim dt As DataTable = New DataTable
dt.Columns.Add(New DataColumn("id", GetType(String)))
dt.Columns.Add(New DataColumn("name", GetType(String)))
AddRow(1, "name1", dt)
AddRow(2, "name12", dt)
AddRow(3, "name123", dt)
AddRow(4, "name1234", dt)
AddRow(5, "name12345", dt)
Return dt
End Function
Private Sub AddRow(ByVal ID As Integer, ByVal Name As String, ByVal dt As DataTable)
Dim dr As DataRow = dt.NewRow()
dr("id") = ID
dr("name") = Name
dt.Rows.Add(dr)
End Sub
- Save the page and Build the page. When you type "name" in the text box it will show you matching items.
- You can download the code here.
This example is so simple it really does not do the control justice. However, you can see that the control is just as easy to use as a Microsoft Atlas control. In addition, all of the web controls work with ASP.NET 1.1 and DotNetNuke 3.
Jon Henning continuously develops web controls and provides excellent documentation on the DotNetNuke site. I hope to introduce you to this incredible resource and demonstrate yet another reason why web development is faster and easier when you use the DotNetNuke Framework.
10 comment(s) so far...
Re: Using the DNN Text Suggest Control
Great Tutorial. Thank you!
I note that in your example, you can select one of the "dropdown" list, and the other items in the list remain visible. In the "official" webcontrols demo the list vanishes once you select one. I cannot currently see how to achieve this by setting properties of the control. Any clues anyone?
By JohnStodd on
11/22/2006
|
Re: Using the DNN Text Suggest Control
The controls do evolve so things change :) If you make a post to the ClientAPI forum Jon is very good about helping people out. However, I do know he will be away for the Holiday.
By AdefWebserver on
11/22/2006
|
Re: Using the DNN Text Suggest Control
How to perform the same operation for a field in database
By manjulajegan on
9/18/2007
|
Re: Using the DNN Text Suggest Control
Is there a way to use this control for multiple words within the search?
For example
DotNetNuke Modules
DotNetNuke Skins
DotNetNuke Development
And then if you were to search for Modules, Skins, for Development it would return the three phrases because they are in the 2nd word in the phrase?
By ChadNash on
6/2/2008
|
Re: Using the DNN Text Suggest Control
In my code, I'm finding that the "dropdown" part of the DNNTextSuggest control has a transparent background, and generally appears at the left margin of the page rather than under the textbox portion of the DNNTextSuggest control. Is this behavior by design? Can it be changed? Why does NodeClick never fire? Is DNNTextSuggest documented? I found a PDF that uses DNNTextSuggest as an example to demonstrate writing new controls, but it happens that I'm not writing a new control. Instead, I'm trying to use DNNTextSuggest in a web application; was that particular edge case not anticipated by the designer? Thanks in advance.
By Darth Vader on
6/16/2009
|
Re: Using the DNN Text Suggest Control
OK, in Chrome, the dropdown fails more often than not. Seems to work in IE. Haven't tried Firefox.
The issue would be fixable at my end, but the div element for the dropdown has no ID attribute.
By Darth Vader on
6/16/2009
|
Re: Using the DNN Text Suggest Control
Anyone has a C# example ? Or who could help me translate 'PopulateOnDemand event' vb code to C#?
" Protected Sub MyDNNTextSuggest_PopulateOnDemand(ByVal source As Object, ByVal e As DotNetNuke.UI.WebControls.DNNTextSuggestEventArgs) Handles MyDNNTextSuggest.PopulateOnDemand
PopulateList(e.Nodes, e.Text)
End Sub "
By Nic on
10/19/2009
|
Re: Using the DNN Text Suggest Control
Hi how are you i need to know how can i increase the text suggestion box width because it working fine but the width will be so small when it arrive like 10% of the text box can you please inform how can i handle it
By rishi on
1/7/2010
|
Re: Using the DNN Text Suggest Control
@Nic: How about this? (I know it's been a year, but it's better later than never)
protected void MyDNNTextSuggest_PopulateOnDemand(object source, DotNetNuke.UI.WebControls.DNNTextSuggestEventArgs e)
{
PopulateList(e.Nodes, e.Text);
}
By Val Lusis on
11/4/2010
|
Re: Using the DNN Text Suggest Control
Is there any way I can get a sample of this in C# full source. I am unable to get DotNetNuke.UI.WebControls.DNNTextSuggestEventArgs to get resolved.
By Wagid Sheikh on
1/28/2012
|
|