.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> ASP.NET >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Using DataList to List Category/Subcategory with expand - collapse facility via javascript

Posted By:Mihir Soni       Posted Date: February 06, 2011    Points: 75    Category: ASP.NET    URL: http://www.dotnetspark.com  

In this article, we'll cover how to use the DataList ASP.NET Control for listing your menu with category / subcategory. It will also allow you to expand and collapse your category / subcategory using JavaScript. I am going to explain you how to use DataListView inside ItemTemplate of DataList.
 


   As I have searched on the internet, developers are facing many difficulties and one can't find any example which explains the same. So, I thought this article will be helpful to everyone who are facing such difficulties.

Here, I will use a simple table with following attributes:

Cat_id (int),
Cat_name (varchar),
Sub_cat_id (int) 	

Now, in this case, I am using a single table. You can also use two tables called category and sub_category. I'll put null entry in sub_cat_id column for main category and rest of them will be filled up by their main category.

For implementing above, create a new website as follows:

Visual Studio >> File >> New >> Website >>ASP.NET Website


Then we are supposed to add new database from solution explorer in our website and after that add new table as following screenshot.

After successful creation of new table just makes some data entry as following screenshot.

Now add new WebForm from solution explorer name it menu.aspx as follow.


Now drag and drop control from toolbox under DATA tab then go to source of page it will look as below.


 

Now we will bind our main category, for that add following code inside the itemtemplate of datalist control






In above code Label control is used to store the id of main category which is visible false to the user so he/she will not be able to see id. I have set text property using Eval functionality of asp.net. In Hyperlink I set navigatUrl property to "#" because we do not need to redirect page on main category click.

So now we'll add another datalist control of asp.net inside itemtemplate for displaying subcategory of main category. We are also going to collapse and expand the main category so make sure you put another datalist in tag as follow: 

 
 										

Inside itemtemplate of second datalist I have put linkbutton and set two property one is text another is postbackurl to redirect user for their respective category. We are passing the categoryid using querystring functionality of asp.net so on another page you can use this category id from query string. After this phase your .aspx code and design will look like as follow.

Now we are going to write our C# code. First of all, add following code on page load event which get all the main categories. 

SqlConnection con = new SqlConnection();
SqlCommand cmd = new SqlCommand();
SqlDataReader dr;
con.ConnectionString =@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True";
con.Open();
cmd.CommandText = "select * from category where sub_cat_id is Null";
cmd.Connection = con;
dr = cmd.ExecuteReader();
DataList1.DataSource = dr;
DataList1.DataBind(); 

Now run your website and you'll able to see your main category in the browser.

To display a subcategory we are supposed to bind our second datalist control which we had put inside itemtemplate of the first datalist. For this we would be writing our code in ItemDataBound event of first datalist. So paste below mentioned code inside the ItemdataBound event.

Panel p = (Panel)e.Item.FindControl("panelsubcat"); //Find panel
HyperLink l = (HyperLink)e.Item.FindControl("MainCat"); //Get Main category
l.Attributes.Add("onclick", "showsubmenu('" + p.ClientID + "')");
Label id=(Label)e.Item.FindControl("ID"); //Find main category id
int catid = Convert.ToInt16(id.Text.ToString());
SqlConnection con = new SqlConnection();
SqlCommand cmd = new SqlCommand();
SqlDataReader dr;
con.ConnectionString = @"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True";
con.Open();
cmd.CommandText = "select * from category where sub_cat_id="+catid;
cmd.Connection = con;
dr = cmd.ExecuteReader();
DataList d = (DataList)e.Item.FindControl("subcat"); //Find another gridview
d.DataSource = dr;//Set datasorue
d.DataBind();

In above code we are binding our subcategory datalist control. Explanation for above code line by line

1)     Find panel from the first datalist itemtemplate

Panel p = (Panel)e.Item.FindControl("panelsubcat"); //Find panel
                                  

2)     Find Main category hyperlink to perform collapse and expand facilities

HyperLink l = (HyperLink)e.Item.FindControl("MainCat"); //Get Main category

3) Add javascript function to each and every Main category link. In argument we are passing client id of panel which contains subcategory datalist

l.Attributes.Add("onclick", "showsubmenu('" + p.ClientID + "')");

4) Get main category id to find subcategory by following code

Label id=(Label)e.Item.FindControl("ID"); //Find main category id
int catid = Convert.ToInt16(id.Text.ToString()); 

5) Finally fire sql query and bind second datalist.

Now we are done with displaying category and subcategory, our goal now is to achieve collapse and expand facility and for this we will use javascript. Go to .aspx page and add following javascript function In tag.



Final output of above example is as follow



Left side of image is showing Main category when you click any of them you can expand subcategory of respective Main category.


 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend