Solved

Tree-like Dropdownlist

Posted on 2010-08-17
8
585 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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …
This video demonstrates how to create an example email signature rule for a department in a company using CodeTwo Exchange Rules. The signature will be inserted beneath users' latest emails in conversations and will be displayed in users' Sent Items…

708 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now