Click here to Skip to main content
Click here to Skip to main content

Treeview style dropdown for address picking and replacing the cascading dropdown

, 3 Jul 2013
Rate this:
Please Sign up or sign in to vote.
Using the mcDropdown plugin for address picking.

Sample Image

Introduction

In this article mcdropdown is used for picking the address in the treeview style.

Background

The idea behind this article is, using a cascading drop down and filtering a dropdowlist based on another.

Using the code

Download the latest plugin from the mcDropdown website or the source of this article containing the plugin.

Do the following. Create the database (MyDB) in MS SQL Server. Create database MyDB:

// create the Province table
use MyDB
create table Province
(
ProvinceID int primary key,
ProvinceName varchar(120)
);

// create the District table
use MyDB
create table District
(
DistrictID int primary key,
DistrictName varchar(120),
ProvinceID int
);

use MyDB
insert into Province values(1,"Nangarhar")
insert into Province values(2,"Balkh")

insert into District values(10,"Jalalabad",1)
insert into District values(11,"Hisarak",1)
insert into District values(20,"Mazar Sharif",2)
insert into District values(21,"Alburz",2)

Add the following code to page.aspx:

<head runat="server">
    <title></title>
    <link href="css/jquery.mcdropdown.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery.bgiframe.js" type="text/javascript"></script>
    <script src="Scripts/jquery.mcdropdown.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {


            $('#<%=txtDistrict.ClientID %>').mcDropdown("#District", { select: function () {
                var abc = $('#txtDistrict').val();
                $('#<%=hdDistrictID.ClientID %>').val(abc);
                $('#<%=TextBox1.ClientID %>').val(abc);
            } 
            });

        });
	
	</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtDistrict" runat="server" Width="80px"></asp:TextBox>
    <asp:Panel ID="pnlDistrict" runat="server" >  
    </asp:Panel>
    <asp:HiddenField ID="hdDistrictID" runat="server" />
       
        <br />
        you selected:
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </div>
    </form>
</body>


/////////////////////  add the following code to your page.aspx.cs
SqlConnection con = 
  new SqlConnection("Data Source=(local);Initial Catalog=MyDB;Integrated Security=SSPI");
protected void Page_Load(object sender, EventArgs e)
{
    //if (!IsPostBack)
    //{
        SqlDataAdapter da = new SqlDataAdapter(
          "Select ProvinceID,ProvinceName from Province", con);
        DataTable dtPro = new DataTable();
        da.Fill(dtPro);
        HtmlGenericControl main = UList("District", "mcdropdown_menu");
        foreach (DataRow row in dtPro.Rows)
        {
            da = new SqlDataAdapter("select DistrictID,DistrictName from " + 
                 "District where ProvinceID=" + row["ProvinceID"].ToString(), con);
            DataTable dtDist = new DataTable();
            da.Fill(dtDist);
            if (dtDist.Rows.Count > 0)
            {
                HtmlGenericControl pro = LIGeneric(row[
                  "ProvinceName"].ToString(), row["ProvinceID"].ToString());
                pro.Attributes.Add("style", "margin-left: 0px; margin-top: 0px; width: 120px;");
                HtmlGenericControl ul = new HtmlGenericControl("ul");
                foreach (DataRow r in dtDist.Rows)
                {
                    ul.Controls.Add(LIGeneric(r[
                      "DistrictName"].ToString(), r["DistrictID"].ToString()));
                }
                pro.Controls.Add(ul);
                main.Controls.Add(pro);
            }
            else
            {
                main.Controls.Add(LIGeneric(row[
                  "ProvinceName"].ToString(), row["ProvinceID"].ToString()));
            }
            
        }

        pnlDistrict.Controls.Add(main);
    //}

}
private HtmlGenericControl UList(string id, string cssClass)
{
    HtmlGenericControl ul = new HtmlGenericControl("ul");
    ul.ID = id;
    ul.Attributes.Add("class", cssClass);
    return ul;
}
private HtmlGenericControl LIGeneric(string innerHtml, string rel)
{
    HtmlGenericControl li = new HtmlGenericControl("li");
    li.Attributes.Add("rel", rel);
    li.InnerHtml = innerHtml;
    return li;
}

protected void Button1_Click(object sender, EventArgs e)
{
    TextBox1.Text = hdDistrictID.Value;
}

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Zafar Safi
Software Developer (Senior)
Afghanistan Afghanistan
i am working in asp.net since 2007. My favorite is c#.
Email: zafar.safi83@gmail.com
skype: zafarali5

Comments and Discussions

 
GeneralMy vote of 5 PinmemberHumayun Kabir Mamun2-Jul-13 23:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140721.1 | Last Updated 3 Jul 2013
Article Copyright 2013 by Zafar Safi
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid