Sunday 20 January 2013

ToolTip in dropdown in asp.net using c#.


In this post I will explain how to show tooltip in dropdown in asp.net using c#.

Description:-

In dropdown when the user name or something is too long ,so that we cannot read or see it properly in dropdown we use tooltip to see the full name. When cursor is on that item in dropdown it will show the full name or path. It’s better to see the example.

First make a design page ,on this take one dropdownlist and bind with table .

Default.aspx:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div align="center">
        <asp:DropDownList ID="DropDownList1" runat="server"
            ondatabound="DropDownList1_DataBound">
        </asp:DropDownList>
    </div>
    </form>
</body>
</html>

Code behind page:-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;

public partial class dropdown_ToolTipInDropDown : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindDropDown();
        }
    }
    public void BindDropDown()
    {
        SqlConnection con = new SqlConnection(@"Data Source=SUSHIL-PC;Initial Catalog=modi;Integrated Security=True");
        SqlCommand com = new SqlCommand("Select EmpId , EmpName From EmpDetails",con);
        SqlDataAdapter da = new SqlDataAdapter(com);
        DataSet ds = new DataSet();
        con.Open();
        da.Fill(ds);
        con.Close();
        DropDownList1.DataTextField = "EmpName";
        DropDownList1.DataValueField = "EmpId";
        DropDownList1.DataSource = ds;
        DropDownList1.DataBind();
    }
    protected void DropDownList1_DataBound(object sender, EventArgs e)
    {
        DropDownList ddl = sender as DropDownList;
        if (ddl != null)
        {
            foreach (ListItem li in ddl.Items)
            {
                li.Attributes["title"]=li.Text;
            }
        }
    }
}

Output :-

No comments:

Post a Comment

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