Solved

Tree-like Dropdownlist

Posted on 2010-08-17
8
598 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
[X]
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
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
How to Install VMware Tools in Red Hat Enterprise Linux 6.4 (RHEL 6.4) Step-by-Step Tutorial

733 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