[RESOLVED] Javascript accordionmenu from DataBase

[sarathi125]

Hi All,

I want to build a menu something like shown in the below url.
I need to load the menu items from the DataBase....
Dynamically i want to change it.... Any possiblities...?

http://www.dynamicdrive.com/dynamici...enu-bullet.htm

or any other way to have an accordionmenu from the database....
Please its urgent help me in this.

[danasegarane]

This link uses the Jquery to create accordion menu.
The above is static one. For dynamic content, create a html content using a string builder and then replace the div innerhtml with

div.innerhtml="text to rendered"

[sarathi125]

Hi Danasekar,
Thanks for the Quick reply...
I need the part how we can load the menu from the database,
If my DataTable having 12 rows then I need to load in the menu for 12 submenus...
Help me in this area....



Thanks in advance...

[danasegarane]

<div id="firstpane" class="menu_list">
<p class="menu_head">Header-1</p>
<div class="menu_body">
<a href="#">Link-1</a>
</div>
<p class="menu_head">Header-2</p>
<div class="menu_body">
<a href="#">Link-1</a>
</div>
<p class="menu_head">Header-3</p>
<div class="menu_body">
<a href="#">Link-1</a>
</div>
</div>

The above link uses this code to generate the menu. You need to create this part dynamically

I am not getting this part..

If my DataTable having 12 rows then I need to load in the menu for 12 submenus...

[gep13]

This link uses the Jquery to create accordion menu.
The above is static one. For dynamic content, create a html content using a string builder and then replace the div innerhtml with

div.innerhtml="text to rendered"

Nice link!!

[gep13]

Hi Danasekar,
Thanks for the Quick reply...
I need the part how we can load the menu from the database,
If my DataTable having 12 rows then I need to load in the menu for 12 submenus...
Help me in this area....



Thanks in advance...

Can you show the code that you are currently using to get the information from the database, or is this the part that you are currently stuck on?

Gary

[sarathi125]

Hi Gary,

Its a datatable, I have fill it from my database, then I need to
populate the menu....

[sarathi125]

The above link uses this code to generate the menu. You need to create this part dynamically

I am not getting this part..

Yes, I need like this only...
If a menu having 12 submenus need to load all the 12 submenus under that header only...
then have to move to the next header and watn to load the submenus to them all....

[sarathi125]

Hi,
I'm trying some thing like this...
I'm getting the menus but no action in it...

if (ViewState["Data"] != null)
        {
            dtempty = (DataTable)ViewState["Data"];
            Response.Write("<div class='applemenu' style='height:250px;'>");
            Response.Write("<div class='silverheader' style='height:250px;'>");
            Response.Write("<div class='submenu' style='height:250px;'>");
            Response.Write("<ul>");
            foreach (DataRow dr in dtempty.Rows)
            {
                string str = dr["Column1"].ToString();
                Response.Write("<li>");
                Response.Write(dr["Column1"].ToString());
                Response.Write("</li>");                                
            }
            Response.Write("</ul>");
            Response.Write("</div>");
            Response.Write("</div>");
            Response.Write("</div>");
        }

[gep13]

First of all, unless you absolutely need to, never use a direct Response.Write to output your HTML onto the page. There are numerous reasons for this, but bottom line, it is a bad idea.

Instead, if you are looking to output a bulk load of HTML, place this into a string variable, or a stringbuilder class, and then assign that to the .Text property of a Literal Server Control.

As you are debugging the above, does it loop through the rows as you expect? What is the HTML that is written to the client? Why exactly isn't it working for you?

Gary

[sarathi125]

Hi Gary.
Now the code is working fine,
See the sample

if (ViewState["Data"] != null)
        {
            dtempty = (DataTable)ViewState["Data"];
            Response.Write("<div class='applemenu'>");

            foreach (DataRow dr in dtempty.Rows)
            {
                Response.Write("<div class='silverheader'>");
                Response.Write("<a>");
                Response.Write(dr["Column1"].ToString());
                Response.Write("</a>");
                Response.Write("</div>");
                Response.Write("<div class='submenu'");
                Response.Write("<ul>");
                foreach (DataRow drw in dtempty.Rows)
                {
                    Response.Write("<li>");
                    Response.Write("<a href='Default.aspx'>");
                    Response.Write(drw["Column2"].ToString());
                    Response.Write("</a>");
                    Response.Write("</li>");
                }
                Response.Write("</ul>");

                Response.Write("</div>");
            }

            Response.Write("</div>");
        }

Tell me how to make it use of that string builder with the above code....

[gep13]

As per the documentation here:

http://msdn.microsoft.com/en-us/libr...ngbuilder.aspx

You would do something like this:

StringBuilder myString = new StringBuilder();
if (ViewState["Data"] != null)
        {
            dtempty = (DataTable)ViewState["Data"];
            myString.AppendLine("<div class='applemenu'>");

            foreach (DataRow dr in dtempty.Rows)
            {
                myString.AppendLine("<div class='silverheader'>");
                myString.AppendLine("<a>");
                myString.AppendLine(dr["Column1"].ToString());
                myString.AppendLine("</a>");
                myString.AppendLine("</div>");
                myString.AppendLine("<div class='submenu'");
                myString.AppendLine("<ul>");
                foreach (DataRow drw in dtempty.Rows)
                {
                    myString.AppendLine("<li>");
                    myString.AppendLine("<a href='Default.aspx'>");
                    myString.AppendLine(drw["Column2"].ToString());
                    myString.AppendLine("</a>");
                    myString.AppendLine("</li>");
                }
                myString.AppendLine("</ul>");

                myString.AppendLine("</div>");
            }

            myString.AppendLine("</div>");
        };

this.myLiteralServerControl.Text = myString.ToString();

Please note that the above was created outwith Visual Studio, so I can't guarantee that it is 100&#37; correct, but it should give you an idea.

Gary

[danasegarane]

This is what I did

Design

 <%@ Page Language="VB" AutoEventWireup="false" CodeFile="AccordMenu.aspx.vb" Inherits="AccordMenu" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" src="jquery-1.4.2.min.js" ></script>  
    <style>
    .menu_list {
	width: 150px;
}
.menu_head {
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	margin:1px;
       font-weight:bold;
       background: #eef4d3 url(left.png) center right no-repeat;
}
.menu_body {
	display:none;
}
.menu_body a {
  display:block;
  color:#006699;
  background-color:#EFEFEF;
  padding-left:10px;
  font-weight:bold;
  text-decoration:none;
}
.menu_body a:hover {
  color: #000000;
  text-decoration:underline;
}
    </style>
    
     <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            
                     //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#firstpane p.menu_head").click(function()
{
    
    $(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
    
});
                 
            
            });
            </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <div id="firstpane" class="menu_list" runat="server">  
            
    

            </div>
    </div>
    </form>
</body>
</html>

Code behind

Imports System.Data

Partial Class AccordMenu
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim sb As New StringBuilder
        Dim dt As New DataTable
        dt.Columns.Add("Col1")
        dt.Rows.Add("Item1")
        dt.Rows.Add("Item2")
        dt.Rows.Add("Item3")
        dt.Rows.Add("Item4")

        'Build the menu
        'Add the Main tag
        sb.Append(" <p class=""menu_head"">Header-1</p>")
        sb.Append("<div class=""menu_body"">")
        For Each row As DataRow In dt.Rows
            sb.Append(String.Format("<a href=""#"">{0}</a>", row.Item(0)))
        Next
        sb.Append("</div>")

        'Close the div tags
        firstpane.InnerHtml = sb.ToString
    End Sub
End Class

Output

[sarathi125]

As per the documentation here:

http://msdn.microsoft.com/en-us/libr...ngbuilder.aspx

You would do something like this:

StringBuilder myString = new StringBuilder();
if (ViewState["Data"] != null)
        {
            dtempty = (DataTable)ViewState["Data"];
            myString.AppendLine("<div class='applemenu'>");

            foreach (DataRow dr in dtempty.Rows)
            {
                myString.AppendLine("<div class='silverheader'>");
                myString.AppendLine("<a>");
                myString.AppendLine(dr["Column1"].ToString());
                myString.AppendLine("</a>");
                myString.AppendLine("</div>");
                myString.AppendLine("<div class='submenu'");
                myString.AppendLine("<ul>");
                foreach (DataRow drw in dtempty.Rows)
                {
                    myString.AppendLine("<li>");
                    myString.AppendLine("<a href='Default.aspx'>");
                    myString.AppendLine(drw["Column2"].ToString());
                    myString.AppendLine("</a>");
                    myString.AppendLine("</li>");
                }
                myString.AppendLine("</ul>");

                myString.AppendLine("</div>");
            }

            myString.AppendLine("</div>");
        };

this.myLiteralServerControl.Text = myString.ToString();

Please note that the above was created outwith Visual Studio, so I can't guarantee that it is 100% correct, but it should give you an idea.

Gary

What control it would be???
this.myLiteralServerControl.Text = myString.ToString();

[sarathi125]

This is what I did

Design

 <%@ Page Language="VB" AutoEventWireup="false" CodeFile="AccordMenu.aspx.vb" Inherits="AccordMenu" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" src="jquery-1.4.2.min.js" ></script>  
    <style>
    .menu_list {
	width: 150px;
}
.menu_head {
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	margin:1px;
       font-weight:bold;
       background: #eef4d3 url(left.png) center right no-repeat;
}
.menu_body {
	display:none;
}
.menu_body a {
  display:block;
  color:#006699;
  background-color:#EFEFEF;
  padding-left:10px;
  font-weight:bold;
  text-decoration:none;
}
.menu_body a:hover {
  color: #000000;
  text-decoration:underline;
}
    </style>
    
     <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            
                     //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#firstpane p.menu_head").click(function()
{
    
    $(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
    
});
                 
            
            });
            </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <div id="firstpane" class="menu_list" runat="server">  
            
    

            </div>
    </div>
    </form>
</body>
</html>

Code behind

Imports System.Data

Partial Class AccordMenu
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim sb As New StringBuilder
        Dim dt As New DataTable
        dt.Columns.Add("Col1")
        dt.Rows.Add("Item1")
        dt.Rows.Add("Item2")
        dt.Rows.Add("Item3")
        dt.Rows.Add("Item4")

        'Build the menu
        'Add the Main tag
        sb.Append(" <p class=""menu_head"">Header-1</p>")
        sb.Append("<div class=""menu_body"">")
        For Each row As DataRow In dt.Rows
            sb.Append(String.Format("<a href=""#"">{0}</a>", row.Item(0)))
        Next
        sb.Append("</div>")

        'Close the div tags
        firstpane.InnerHtml = sb.ToString
    End Sub
End Class

Output

Whats the firstpane???
Is it a asp.net panel...?
firstpane.InnerHtml = sb.ToString

[danasegarane]

Litteral control

[gep13]

Litteral control

That's the one

[danasegarane]

Whats the firstpane???
Is it a asp.net panel...?
firstpane.InnerHtml = sb.ToString

 <div id="firstpane" class="menu_list" runat="server">  
            
    

            </div>