Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Tree-like Dropdownlist

Posted on 2010-08-17
8
597 Views
Last Modified: 2013-11-08
Is there a way in ASP.NET to have a tree like dropdownlist. See example below. The dropdown list control could have data like -

All Products
Drinks
Snacks

But then when the user clicks on 'Drinks', it should then show -

All Products
Drinks
       Coke
       Diet Coke
       .....
Snacks

The above data lives in the database, so also looking for suggestions for data retrieval - do we call a stored proc every time (like when you click 'Drinks' or 'Snacks') . Am using AJAX,/VS2008 so preferably any solution with code would help.  Thanks.
0
Comment
Question by:tapdev72
8 Comments
 
LVL 10

Expert Comment

by:Jini Jose
ID: 33458565
can u please tell what you have to do a treelike drop down list ?
0
 
LVL 4

Expert Comment

by:avarmaavarma
ID: 33458680
There are several 3rd party controls (e.g. Telerik included below) that will let you do this.

http://www.telerik.com/community/forums/aspnet-ajax/treeview/multiselect-treeview-inside-dropdown.aspx

In order to code it yourself inside a WinForms dropdownlist, you can either use a hack - which is to add a succession of spaces to make the string look like it is 'nested'
(http://forums.asp.net/p/1003245/1325999.aspx#1325999)

OR you can combine a textbox with a downarrow (to make it look like a dropdown list) and then use the selection of the textbox to populate an actual treeview control. See this example for how this might be done:

http://technoblizzard.blogspot.com/2007/09/tree-view-in-dropdownlist.html
0
 
LVL 2

Expert Comment

by:larkvale
ID: 33461927

Check out this control from DevComponents

http://devcomponents.com/dotnetbar/ComboBoxTreeControl.aspx


0
Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

 

Author Comment

by:tapdev72
ID: 33462696
Not looking for 3rd party components.
0
 
LVL 14

Accepted Solution

by:
Dhanasekaran Sengodan earned 500 total points
ID: 33464133
Create a Dropdownlist
===================
<asp:DropDownList ID="ddlCategories" runat="server" CssClass="nav_Dashboard" AppendDataBoundItems="true">
<asp:ListItem Text="Select Category" Value="0"></asp:ListItem>
</asp:DropDownList>

the string "strcolor " shows the different root level

The DB design

CategoryID    Category     ParentCategoryID
=================================
1                     Root                            0
2                     SubCat                         1
3                     SubCat2                        1
4                     SubCat11                      2
5                      SubCat22                     2
6                     Root2                           0
7                       SubCat 21                  6
----------------------------------------------------------


public string text = "";
	string[] strcolor = { "color:#006400;", "color:#0000FF;", "color:#8B0000;", "color:#800080;", "color:#D2691E;", "color:#4B0082;", "color:#9932CC;" };
public DataTable dt = null;
 protected void Page_Load(object sender, EventArgs e)
	{   
 if(!IsPostBack)
    {
		dt = // Get the value from DB
		text = "";
		CreateList("0");
    }
}
	private void CreateList(string parentID)
	{
		DataRow[] drCollection = dt.Select("ParentCategoryID='" + parentID + "'");
		foreach (DataRow drRow in drCollection)
		{
			text = "";
			int nodelevel = Convert.ToInt32(drRow["level"].ToString());
			for (int i = 0; i < nodelevel; i++)
			{
				if (parentID == "0")
				{
					text = "";
				}
				else
				{
					text += "--";
				}
			}
			if (text == "")
			{
				ListItem objLI = new ListItem();
				objLI.Text = text + drRow["Category"].ToString();
				objLI.Value = drRow["CategoryID"].ToString();
				objLI.Attributes.Add("Style", strcolor[nodelevel - 1]);
				ddlCategories.Items.Add(objLI);
			}
			else
			{
				ListItem objsubLI = new ListItem();
				objsubLI.Text = "|" + text + drRow["Category"].ToString();
				objsubLI.Value = drRow["CategoryID"].ToString();
				objsubLI.Attributes.Add("Style", strcolor[nodelevel - 1]);
				ddlCategories.Items.Add(objsubLI);
			}
			DataRow[] drChilds = dt.Select("ParentCategoryID='" + drRow["CategoryID"].ToString() + "'");
			if (drChilds.Length > 0)
			{
				CreateList(drRow["CategoryID"].ToString());
			}
		}
	}

Open in new window

0
 
LVL 14

Expert Comment

by:Dhanasekaran Sengodan
ID: 33464182
i forgot to add stored procedure. I added below
Create Procedure [dbo].[GetallCategories]
as

WITH q (categoryid, parentcategoryid, category, level, bc) AS
        (
        SELECT CategoryID, ParentCategoryID, Category, 1, CAST(ROW_NUMBER() OVER (ORDER BY category) AS VARCHAR(MAX))
        FROM SA_FAQCategory WHERE parentcategoryid=0 
        UNION ALL
        SELECT c.CategoryID, c.ParentCategoryID, c.Category, q.level + 1, q.bc + '.' + CAST(ROW_NUMBER() OVER (ORDER BY q.level) AS VARCHAR(MAX))
        FROM q JOIN SA_FAQCategory c ON c.parentcategoryid = q.categoryid
        )
SELECT * FROM q ORDER BY bc

Open in new window

0
 
LVL 14

Expert Comment

by:Dhanasekaran Sengodan
ID: 33464226
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
Email security requires an ever evolving service that stays up to date with counter-evolving threats. The Email Laundry perform Research and Development to ensure their email security service evolves faster than cyber criminals. We apply our Threat…

792 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question