Create Tree View menu using Nested Data List

Today will see how to create Tree View menu using Nested Data List in asp.net


eg: out put

1 Step: Here first we need to create database

2 Step: create procedure 

 

CREATE procedure [dbo].[usp_GetAllProductCategory]  

as  

begin  

  

select * from Tbl_ProductCategory  order BY ProdCategoryID  

  

select * from Tbl_ProductSubCategory  order BY ProdCategoryID  

  

end

3 Step: In visual studio add default.aspx page 

<div class="wi" style="margin-top: 0px">

              <table  cellpadding="0" cellspacing="0" border="0">

            <tr><td class="select-categary-final">

            Select Category

            </td></tr>

                <tr>

                    <div id='wrap'>

                    <td class="style2">

                   

                        <ul style="margin-left: 22px;">

                       

      <asp:DataList ID="dtListofCategory" runat="server"  DataKeyField="ProdCategoryID">

                 <ItemTemplate>

                                <li id="liCat">

                                       <asp:Label ID="Label1" Text='<%# Eval("ProductCategoryName")%>' CssClass="inside-menu-final-text" runat="server" />

                                   

                                </li>

                                <ul id="ulSubCat" style="margin-left: 33px;">

                                    <asp:DataList ID="dlSubCategory" runat="server" >                                    

                                        <ItemTemplate>

                                        <li >

                                               <asp:LinkButton CssClass="inside-menu-final-text" runat="server" ID="lnkMenu1"                                                      

                                                     

                                                        Text='<%# Eval("ProductSubCategoryName")%>'></asp:LinkButton>

                                              

                                        </li>

                                       

                                        </ItemTemplate>

                                    </asp:DataList>

                                </ul>

                            </ItemTemplate>

                        </asp:DataList>

                        </ul>

                        

                    </td>

                    </div>

                </tr>

            </table>

              </div>

default.aspx.cs page 

void GetAllProductCategory()

    {

        try

        {

            

        // here check dataset rows count

            if (DsResultSet.Tables[0].Rows.Count > 0)

            {

                //here assign datasource to categorydatalist

                dtListofCategory.DataSource = DsResultSet.Tables[0];

                dtListofCategory.DataBind();

            //here assigning datasource to subcategory datalist

                foreach (DataListItem Item in dtListofCategory.Items)

                {

                    int CategoryID = Convert.ToInt32(dtListofCategory.DataKeys[Item.ItemIndex]);

                    DataView dv = new DataView(DsResultSet.Tables[1]);

                    dv.RowFilter = "ProdCategoryID= " + CategoryID;

 DataList nestedDataList =   (DataList)dtListofCategory.Items[Item.ItemIndex].FindControl("dlSubCategory");

                    nestedDataList.DataSource = dv;

                    nestedDataList.DataBind();

                }

            }

            else

            {

                dtListofCategory.DataSource = null;

                dtListofCategory.DataBind();

            }

        }

        catch (Exception ex)

        {

            

        }

    }