Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Bind or add tooltip for dropdownlist items in asp.net | Handle Long text problem in dropdownlist using asp.net

Dec 19, 2011
Introduction:

In this article I will explain how to add tooltip for dropdownlist item in asp.net.

Description:
  
In Previous article I explained clearly how to bind images to dropdownlist. Now I will explain how to add tooltips for dropdownlist item in asp.net. In many situations we will use dropdownlists in our application if it contain less length of data then it will display the data correctly otherwise if it contains more length of data then user will not be able to see entire data that would be like this 



To solve this problem if we add tooltip for dropdownlist items then users have a chance to see entire data.

To implement this concept first design table in your database and enter data as shown below
Column Name
Data Type
Allow Nulls
UserId
int(set identity property=true)
No
UserName
varchar(50)
Yes

After completion of table creation enter some dummy data in table and design your aspx page like this


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Bind Tooltips for Dropdownlist</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlDetails" runat="server" ondatabound="ddlDetails_DataBound"/>
</div>
</form>
</body>
</html>
After completion of aspx page design add following namespaces in code behind

C#.NET Code

using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI.WebControls;
After add namespaces write the following code

 protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
BindDropdown();
}
}
protected void BindDropdown()
{
SqlConnection con =new SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true");
con.Open();
SqlCommand cmd = new SqlCommand("select UserId,UserName from UserInformation", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
ddlDetails.DataTextField = "UserName";
ddlDetails.DataValueField = "UserId";
ddlDetails.DataSource = ds;
ddlDetails.DataBind();
}
protected void ddlDetails_DataBound(object sender, EventArgs e)
{
DropDownList ddl = sender as DropDownList;
if(ddl!=null)
{
foreach (ListItem li in ddl.Items)
{
li.Attributes["title"] = li.Text;
}
}
}

VB.NET Code

Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.UI.WebControls

Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
BindDropdown()
End If
End Sub
Protected Sub BindDropdown()
Dim con As New SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true")
con.Open()
Dim cmd As New SqlCommand("select UserId,UserName from UserInformation", con)
Dim da As New SqlDataAdapter(cmd)
Dim ds As New DataSet()
da.Fill(ds)
ddlDetails.DataTextField = "UserName"
ddlDetails.DataValueField = "UserId"
ddlDetails.DataSource = ds
ddlDetails.DataBind()
End Sub
Protected Sub ddlDetails_DataBound(ByVal sender As Object, ByVal e As EventArgs)
Dim ddl As DropDownList = TryCast(sender, DropDownList)
If ddl IsNot Nothing Then
For Each li As ListItem In ddl.Items
li.Attributes("title") = li.Text
Next
End If
End Sub
End Class
Now run your application and check how your dropdownlist will be 

Demo


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

12 comments :

kedar said...

I can't understand the second part "ddlDetails_DataBound" and the [key] used in attributes. Please make me clear.

Suresh Dasari said...

@kedar,
ddlDetails_DataBound condition is used to iterate through all the items of dropdownlist and bind the tooltip for each item in dropdownlist.
Attributes["title"] this attribute help us to add tooltip for particular element

sathwik said...

excellent work :)

Unknown said...

I am using exactly the same code mentioned above . When i debug i can see the values of dropdownlist in listitem but can't see the value on dropdown on mouseover. I am uisng IE7.

Help said...

I have one requirement
Drop down list to choose types: NFC/RFID reader
when user choose reader show description in Label

Description for RFID Reader : Reading range 6-12 Meteres.

Description for NFC Reader : Reading Range 3-5 mm.
give me the source code

Anonymous said...

Thanks,

a fine solution.

AlexW

Anonymous said...

Hi, If the control is inside the update panel, this functionality not working.

Rajaprabhu.net@gmail.com

Unknown said...

I need to maxmize font size and change to background color . Is it possible for this scenario.

Anonymous said...

Not working in IE

Unknown said...

how to read Tooltip value of selected item in dropdownlist?????

Unknown said...

how to read Tooltip value of selected item in dropdownlist?????

Anonymous said...

how to read Tooltip value of selected item in dropdownlist?????

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.