Hello,

I am very new in ASP.NET C#. My requirement is that I need to create a page with dynamically expandable list item as follows:

Main Parent

Main Parent Description

• Product1

<div id="MainContent_MainServiceList_UpdatePanel1_1"> <div id="MainContent_MainServiceList_pHeader_1" class="cpHeader">

• Product2

</div> </div> <div id="MainContent_MainServiceList_UpdatePanel1_2"> <div id="MainContent_MainServiceList_pHeader_2" class="cpHeader">

• Product3

The bullets would be Expandable with right hand arrow style. When the bullet of Product1 would be clicked, the bullet style would change to down arrow style and the Product 1 description would be shown along with all its child items(if any). Same would happen for other bullets as well. So something like this:

Main Parent

Main Parent Description

• Product1

          Product 1 Description</div> <div class="cpHeader"> <div id="MainContent_MainServiceList_UpdatePanel1_1"> <div id="MainContent_MainServiceList_pHeader_1" class="cpHeader">

• Product 1 Child 1
• Product 1 Child 2 etc.          
• Product2

</div> </div> <div id="MainContent_MainServiceList_UpdatePanel1_2"> <div id="MainContent_MainServiceList_pHeader_2" class="cpHeader">

• Product3

Again if Product 1 Child 1 is clicked, the children of it would be shown in the same manner and so on.  I am not able to show the changing style of the arrows here, but I hope you would understand from the description as above. I  have managed to create the layer upto expanding the Product 1, product 2 etc to show the corresponding child using the Ajax Toolkit and ASP:UpdatePanel but I need something that would enable me to create the same thing again and again until we have reached the last level and now I am stuck as I dont know how to do that. I have put my code as follows:

</div> </div> </div> </div>

ASPX Page Code:<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DocLeaf._Default" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxControlToolkit" %><asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"><div style="float: left; margin-top: 10px; vertical-align: bottom;"><h1><asp:Label ID="MainSevice" runat="server"></asp:Label></h1><asp:Label ID="MainServiceDesc" runat="server"></asp:Label><asp:Repeater ID="MainServiceList" runat="server"><ItemTemplate><asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate><asp:Panel ID="pHeader" runat="server" CssClass="cpHeader"><ul style="list-style-image: url('/Images/rh.gif')"><li><a href="<%# Eval("pf_id","Default.aspx?pf_id={0}") %>" target="_blank"><%# Eval("HEADER") %></a></li></ul></asp:Panel><asp:Panel ID="pBody" runat="server" CssClass="cpBody"><%# Eval("DESCRIPTION") %><%# GetServiceDetails(Convert.ToInt32(Eval("pf_id"))) %></asp:Panel><AjaxControlToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
                            TargetControlID="pBody" CollapseControlID="pHeader" ExpandControlID="pHeader"
                            Collapsed="true" CollapsedSize="0"></AjaxControlToolkit:CollapsiblePanelExtender></ContentTemplate></asp:UpdatePanel></ItemTemplate></asp:Repeater><br /><asp:Button ID="Create" runat="server" Text="Create New Service" Style="margin-left: 121px;" PostBackUrl="~/AddNewService.aspx" /></div></asp:Content>


C# Code-Behind Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.IO;
using System.Text;

namespace DocLeaf
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            int pf_id = Int32.Parse(string.IsNullOrEmpty(Request.QueryString["pf_id"]) ?"0" : Request.QueryString["pf_id"]);
            GetService(pf_id);
        }

        //get the list of services for the main page        
        public void GetService(int pf_id_param)
        {
            DatabaseInteractor dbInteractor = new DatabaseInteractor();
            String selectstmt = "SELECT * FROM (SELECT 1 hierarchy,m.parent_pf_id,m.child_no,s.* " +"FROM test_cr_map m,test_cr s " +"WHERE m.pf_id = s.pf_id AND m.parent_pf_id =" + pf_id_param + " " +"UNION " +"SELECT 0,NULL,NULL,test_cr.* " +"FROM test_cr " +"WHERE pf_id = " + pf_id_param + ") " +"ORDER BY hierarchy,child_no";


            DataSet result = new DataSet();
            result = dbInteractor.GetDataSet(selectstmt);

            DataTable myDataTable = result.Tables[0];
            for (int i = 0; i < myDataTable.Rows.Count; i++)
            {
                String link = myDataTable.Rows[i]["hierarchy"].ToString();

                if (Convert.ToInt32(myDataTable.Rows[i]["pf_id"]) == pf_id_param)
                {
                    MainSevice.Text = myDataTable.Rows[i]["HEADER"].ToString();
                    MainServiceDesc.Text = myDataTable.Rows[i]["DESCRIPTION"].ToString();
                    myDataTable.Rows[i].Delete();
                }
            }
            //BulletedServiceList.DataSource = myDataTable;
            //ServiceBulletedList.DataBind();
            //BulletedServiceList.DataTextField = "header";
            //BulletedServiceList.DataValueField = "link";
            //BulletedServiceList.DataBind();

            MainServiceList.DataSource = myDataTable;
            MainServiceList.DataBind();
        }

        //get the list of detailed services        
        public String GetServiceDetails(int pf_id)
        {
            DatabaseInteractor dbInteractor = new DatabaseInteractor();
            String selectstmt = "SELECT * FROM (SELECT m.parent_pf_id,m.child_no,s.* " +"FROM test_cr_map m,test_cr s " +"WHERE m.pf_id = s.pf_id AND m.parent_pf_id =" + pf_id + ") " +"ORDER BY child_no";
            DataSet result = new DataSet();
            result = dbInteractor.GetDataSet(selectstmt);

            DataTable myDataTable = result.Tables[0];

            //BulletedServiceList.DataSource = myDataTable;
            //ServiceBulletedList.DataBind();
            //BulletedServiceList.DataTextField = "header";
            //BulletedServiceList.DataValueField = "link";
            //BulletedServiceList.DataBind();
            Repeater Repeater1 = new Repeater();
            Repeater1.DataSource = myDataTable;
            Repeater1.DataBind();

            //StringWriter stringWriter = new StringWriter();
            //HtmlTextWriter writer = new HtmlTextWriter(stringWriter);
            foreach (RepeaterItem repeatItem in Repeater1.Items)
            {
                // Add ItemTemplate DataItems Dynamically
                RepeaterItem repeaterItem = new RepeaterItem(repeatItem.ItemIndex, ListItemType.Item);
                Label lbl = new Label();
                //lbl.Text = string.Format("{0} {1} <br />", myDataTable.Rows[repeatItem.ItemIndex]["pf_id"], myDataTable.Rows[repeatItem.ItemIndex]["HEADER"]);
                //lbl.Text = string.Format("{0} {1} <br />","test","test");
                lbl.Text = "<li style=\"list-style-image: url('/Images/rh.gif')\">" + string.Format("{0} <br />", myDataTable.Rows[repeatItem.ItemIndex]["HEADER"]) + "</li>";
                repeatItem.Controls.Add(lbl);

                // Add SeparatorTemplate Dynamically
                //repeaterItem = new RepeaterItem(repeatItem.ItemIndex, ListItemType.Separator);
                //LiteralControl ltrlHR = new LiteralControl();
                //ltrlHR.Text = "<hr />";
                //repeatItem.Controls.Add(ltrlHR);
            }

            // Add Repeater Control as Child Control
            // of Panel Control
            //Panel childPanel = new Panel();
            //childPanel.Controls.Add(Repeater1);
            //return childPanel;
            //return Repeater1;

            StringBuilder sb = new StringBuilder();
            Repeater1.RenderControl(new HtmlTextWriter(new StringWriter(sb)));
            String Text = sb.ToString();
            return Text;
        }


    }
}

Your help would be much appreciated. 

Kind Regards,

Chitra