Treeview style dropdown for address picking and replacing the cascading dropdown

Zafar A khan

Rate me:

4.33/5 (2 votes)

3 Jul 2013CPOL

11.7K

237

Using the mcDropdown plugin for address picking.

Download source - 161 KB

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:

SQL

// 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:

XML

<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)

Written By

Zafar A khan

Software Developer (Senior)

Pakistan

i am working in asp.net since 2007. My favorite is c#.
Email: zafar.kust@gmail.com
skype: zafarali5

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

Treeview style dropdown for address picking and replacing the cascading dropdown

Introduction

Background

Using the code

License

Comments and Discussions