[Solved] MultiLevel Bootstrap (Responsive) Vertical Menu using C# in ASP.Net

Waghmare

SOLVED CLOSED ACTIVE ANSWERED
User: Waghmare
Posted: on Dec 20, 2017 11:28 PM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 20226
Sample Code: Download

Hiii,

http://www.aspforums.net/Threads/108804/Database-Driven-N-Level-MultiLevel-BootstrapResponsive-Vertical-Menu-using-C-and-jQuery-in-ASPNet/

with reference to above code i have developed example but in it only open first li with its child items.

But other items are not opens.

Only first li collapsed others not collapsed.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <style type="text/css">
        .nav-side-menu {
            overflow: auto;
            font-family: verdana;
            font-size: 12px;
            font-weight: 200;
            background-color: #2e353d;
            position: fixed;
            top: 0px;
            width: 300px;
            height: 100%;
            color: #e1ffff;
        }

            .nav-side-menu .brand {
                background-color: #23282e;
                line-height: 50px;
                display: block;
                text-align: center;
                font-size: 14px;
            }

            .nav-side-menu .toggle-btn {
                display: none;
            }

            .nav-side-menu ul, .nav-side-menu li {
                list-style: none;
                padding: 0px;
                margin: 0px;
                line-height: 35px;
                cursor: pointer; /*   
.collapsed{
.arrow:before{
            font-family: FontAwesome;
            content: "\f053";
            display: inline-block;
            padding-left:10px;
            padding-right: 10px;
            vertical-align: middle;
            float:right;
    }
}
*/
            }

                .nav-side-menu ul :not(collapsed) .arrow:before, .nav-side-menu li :not(collapsed) .arrow:before {
                    font-family: FontAwesome;
                    content: "\f078";
                    display: inline-block;
                    padding-left: 10px;
                    padding-right: 10px;
                    vertical-align: middle;
                    float: right;
                }

                .nav-side-menu ul .active, .nav-side-menu li .active {
                    border-left: 3px solid #d19b3d;
                    background-color: #4f5b69;
                }

                .nav-side-menu ul .sub-menu li.active, .nav-side-menu li .sub-menu li.active {
                    color: #d19b3d;
                }

                    .nav-side-menu ul .sub-menu li.active a, .nav-side-menu li .sub-menu li.active a {
                        color: #d19b3d;
                    }

                .nav-side-menu ul .sub-menu li, .nav-side-menu li .sub-menu li {
                    background-color: #181c20;
                    border: none;
                    line-height: 28px;
                    border-bottom: 1px solid #23282e;
                    margin-left: 0px;
                }

                    .nav-side-menu ul .sub-menu li:hover, .nav-side-menu li .sub-menu li:hover {
                        background-color: Orange;
                    }

                    .nav-side-menu ul .sub-menu li:before, .nav-side-menu li .sub-menu li:before {
                        font-family: FontAwesome;
                        content: "\f105";
                        display: inline-block;
                        padding-left: 10px;
                        padding-right: 10px;
                        vertical-align: middle;
                    }

            .nav-side-menu li {
                padding-left: 0px;
                border-left: 3px solid #2e353d;
                border-bottom: 1px solid #23282e;
            }

                .nav-side-menu li a {
                    text-decoration: none;
                    color: #e1ffff;
                }

                    .nav-side-menu li a i {
                        padding-left: 10px;
                        width: 20px;
                        padding-right: 20px;
                    }

                .nav-side-menu li:hover {
                    border-left: 3px solid #d19b3d;
                    background-color: #4f5b69;
                    -webkit-transition: all 1s ease;
                    -moz-transition: all 1s ease;
                    -o-transition: all 1s ease;
                    -ms-transition: all 1s ease;
                    transition: all 1s ease;
                }

        @media (max-width: 767px) {
            .nav-side-menu {
                position: relative;
                width: 100%;
                margin-bottom: 10px;
            }

                .nav-side-menu .toggle-btn {
                    display: block;
                    cursor: pointer;
                    position: absolute;
                    right: 10px;
                    top: 10px;
                    z-index: 10 !important;
                    padding: 3px;
                    background-color: #ffffff;
                    color: #000;
                    width: 40px;
                    text-align: center;
                }

            .brand {
                text-align: left !important;
                font-size: 22px;
                padding-left: 20px;
                line-height: 50px !important;
            }
        }

        @media (min-width: 767px) {
            .nav-side-menu .menu-list .menu-content {
                display: block;
            }
        }

        body {
            margin: 0px;
            padding: 0px;
        }
    </style>

    <script src="../js/1.12.0-jquery.min.js"></script>
    <script src="../js/3.3.6-js-bootstrap.min.js"></script>
    <link href="../css/3.3.6_bootstrap.min.css" rel="stylesheet" />
    <link href="../css/font-awesome.min.css" rel="stylesheet" />

    <%--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />--%>

    <script type="text/javascript">
        $(function () {
            $('li[data-toggle="collapse"]').each(function () {
                if ($(this).next('ul').length == 0) {
                    $(this).removeAttr('data-toggle').removeAttr('data-target').removeClass('collapsed');
                    $(this).find('span.arrow').remove();
                }
            });
            $('ul#menu-content > ul').on('show.bs.collapse', function (e, obj) {
                $("ul#menu-content > ul").not(this).removeClass("in");
                var currentHead = $(this).prev("li");
                $("ul#menu-content > li").not(currentHead).removeClass("active");
                $(currentHead).addClass("active");
            })
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="nav-side-menu">
            <div class="brand">
                AspSnippets
            </div>
            <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
            <div class="menu-list">
                <ul id="menu-content" class="menu-content collapse out">
                    <asp:Repeater ID="rptCategories" runat="server" OnItemDataBound="rptMenu_OnItemBound">
                        <ItemTemplate>
                            <li data-toggle="collapse" data-target='#<%#Eval("Menu_Desc") %>' class="collapsed">
                                <a href='<%#Eval("Navigate_Url") %>'><i class='<%#Eval("CssFont") %>'></i>
                                    <%#Eval("Menu_Desc") %><span class="arrow"></span></a> </li>
                            <asp:Literal ID="ltrlSubMenu" runat="server"></asp:Literal>
                        </ItemTemplate>
                    </asp:Repeater>
                </ul>
            </div>
        </div>

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

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

namespace Visitor_Managment_Design_1.Test
{
    public partial class VerticleMenu : System.Web.UI.Page
    {
        OleDbConnection VMScon = new OleDbConnection(ConfigurationManager.ConnectionStrings["VMSConnectionString"].ConnectionString);
        DataTable Menus = new DataTable();

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                this.BindMenu();
            }
        }

        protected void rptMenu_OnItemBound(object sender, RepeaterItemEventArgs e)
        {
            if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
            {
                if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
                {
                    if (Menus != null)
                    {
                        DataRowView drv = e.Item.DataItem as DataRowView;
                        string ID = drv["Menu_Id"].ToString();
                        string Title = drv["Menu_Desc"].ToString();
                        DataRow[] rows = Menus.Select("Parent_Menu_Id=" + ID);
                        if (rows.Length > 0)
                        {

                            StringBuilder sb = new StringBuilder();
                            sb.Append("<ul id='" + Title + "' class='sub-menu collapse'>");
                            foreach (var item in rows)
                            {
                                string parentId = item["Menu_Id"].ToString();
                                string parentTitle = item["Menu_Desc"].ToString();

                                DataRow[] parentRow = Menus.Select("Parent_Menu_Id=" + parentId);

                                if (parentRow.Count() > 0)
                                {
                                    sb.Append("<li data-toggle='collapse' data-target='#" + parentTitle + "' class='collapsed'><a href='" + item["Navigate_Url"] + "'>" + item["Menu_Desc"] + "<span class='arrow'></span></a>");
                                    sb.Append("</li>");
                                }
                                else
                                {
                                    sb.Append("<li><a href='" + item["Navigate_Url"] + "'>" + item["Menu_Desc"] + "</a>");
                                    sb.Append("</li>");
                                }
                                sb = CreateChild(sb, parentId, parentTitle, parentRow);
                            }
                            sb.Append("</ul>");
                            (e.Item.FindControl("ltrlSubMenu") as Literal).Text = sb.ToString();
                        }
                    }
                }
            }
        }

        private StringBuilder CreateChild(StringBuilder sb, string parentId, string parentTitle, DataRow[] parentRows)
        {
            if (parentRows.Length > 0)
            {
                sb.Append("<ul id='" + parentTitle + "' class='sub-menu collapse'>");
                foreach (var item in parentRows)
                {
                    string childId = item["Menu_Id"].ToString();
                    string childTitle = item["Menu_Desc"].ToString();
                    DataRow[] childRow = Menus.Select("Parent_Menu_Id=" + childId);

                    if (childRow.Count() > 0)
                    {
                        sb.Append("<li data-toggle='collapse' data-target='#" + childTitle + "' class='collapsed'><a href='" + item["Navigate_Url"] + "'>" + item["Menu_Desc"] + "<span class='arrow'></span></a>");
                        sb.Append("</li>");
                    }
                    else
                    {
                        sb.Append("<li><a href='" + item["Navigate_Url"] + "'>" + item["Menu_Desc"] + "</a>");
                        sb.Append("</li>");
                    }
                    CreateChild(sb, childId, childTitle, childRow);
                }
                sb.Append("</ul>");

            }
            return sb;
        }

        private void BindMenu()
        {
            Menus = GetData("Select Menu_ID,Parent_Menu_Id,Menu_Desc,Navigate_Url,CssFont from Mst_menu");
            DataView view = new DataView(Menus);
            view.RowFilter = "Parent_Menu_ID=0";
            this.rptCategories.DataSource = view;
            this.rptCategories.DataBind();
        }

        private DataTable GetData(string query)
        {
            DataTable dt = new DataTable();
            string constr = ConfigurationManager.ConnectionStrings["VMSConnectionString"].ConnectionString;
            using (OleDbConnection con = new OleDbConnection(constr))
            {
                using (OleDbCommand cmd = new OleDbCommand(query))
                {
                    using (OleDbDataAdapter sda = new OleDbDataAdapter())
                    {
                        cmd.CommandType = CommandType.Text;
                        cmd.Connection = con;
                        sda.SelectCommand = cmd;
                        sda.Fill(dt);
                    }
                }
                return dt;
            }
        }

    }
}

create table Mst_Menu
(
	Menu_ID NUMBER(2) NOT NULL,
	Menu_Desc varchar2(50),	
   	Parent_Menu_ID NUMBER(3) NOT NULL,
        Navigate_Url NVARCHAR2(300),
        CssFont NVARCHAR2(100),
        Menu_Status Number(1) Not Null,
	CONSTRAINT Mst_Menu_Pk PRIMARY KEY (Menu_ID)	
);

Download FREE API for Word, Excel and PDF in ASP.Net

kalpesh

0 3

Reply
ANSWER
User: kalpesh
Replied: on Dec 21, 2017 05:01 AM
Modified: on Dec 21, 2017 06:40 AM
Report

There is problem in your database design and value assigning to data-target attribute at its value come with space (Vehicle Masters,Material Masters) that’s why it’s not work properly.

For this place same Menu_Desc column for data-target value without space also add one more column Name as Description where you can add the description for the menu and in code you just need to replace Description column name value to the hyperlink Text. Then it will work fine.

Refer the below sample code for your reference and implement it as per your code logic.

SQL

CREATE TABLE [Mst_Menu]
(
	[Menu_ID] [int] NOT NULL,
	[Parent_Menu_Id] [int] NOT NULL,
	[Menu_Desc] [varchar](100) NULL,
	[Description] [varchar](100) NULL,
	[Navigate_Url] [nvarchar](100) NOT NULL,
	[CssFont] [varchar](100) NULL,
	[Menu_Status] [int] NULL
) ON [PRIMARY]
GO

INSERT INTO [Mst_Menu] ([Menu_ID],[Parent_Menu_Id] ,[Menu_Desc],[Description] ,[Navigate_Url] ,[CssFont] ,[Menu_Status])
SELECT 1,0,'Masters','Masters','javascript:;','glyphicon glyphicon-list',0
UNION ALL
SELECT 2,0,'VehicleMasters','Vehicle Masters','javascript:;','glyphicon glyphicon-list',0
UNION ALL
SELECT 3,0,'MaterialMasters','Material Masters','javascript:;','glyphicon glyphicon-list',0
UNION ALL
SELECT 4,1,'Country','Country','../Common_Forms/Country.aspx',NULL,0
UNION ALL
SELECT 5,1,'City','City','../Common_Forms/City.aspx',NULL,0
UNION ALL
SELECT 6,2,'VehicleType','Vehicle Type','../Common_Forms/VehicleType.aspx',NULL,0
UNION ALL
SELECT 7,3,'MaterialCategory','Material Category','../Common_Forms/MaterialCategory.aspx',NULL,0
UNION ALL
SELECT 8,3,'MaterialType','Material Type','../Common_Forms/MaterialType.aspx',NULL,0
UNION ALL
SELECT 9,3,'MaterialParameter','Material Parameter','../Common_Forms/MaterialParameter.aspx',NULL,0
UNION ALL
SELECT 10,0,'Book Visit','Book Visit','../Common_Users_Forms/BookVisit.aspx',NULL,0
GO

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        .nav-side-menu
        {
            overflow: auto;
            font-family: verdana;
            font-size: 12px;
            font-weight: 200;
            background-color: #2e353d;
            position: fixed;
            top: 0px;
            width: 300px;
            height: 100%;
            color: #e1ffff;
        }
        
        .nav-side-menu .brand
        {
            background-color: #23282e;
            line-height: 50px;
            display: block;
            text-align: center;
            font-size: 14px;
        }
        
        .nav-side-menu .toggle-btn
        {
            display: none;
        }
        
        .nav-side-menu ul, .nav-side-menu li
        {
            list-style: none;
            padding: 0px;
            margin: 0px;
            line-height: 35px;
            cursor: pointer; 
        }
        
        .nav-side-menu ul :not(collapsed) .arrow:before, .nav-side-menu li :not(collapsed) .arrow:before
        {
            font-family: FontAwesome;
            content: "\f078";
            display: inline-block;
            padding-left: 10px;
            padding-right: 10px;
            vertical-align: middle;
            float: right;
        }
        
        .nav-side-menu ul .active, .nav-side-menu li .active
        {
            border-left: 3px solid #d19b3d;
            background-color: #4f5b69;
        }
        
        .nav-side-menu ul .sub-menu li.active, .nav-side-menu li .sub-menu li.active
        {
            color: #d19b3d;
        }
        
        .nav-side-menu ul .sub-menu li.active a, .nav-side-menu li .sub-menu li.active a
        {
            color: #d19b3d;
        }
        
        .nav-side-menu ul .sub-menu li, .nav-side-menu li .sub-menu li
        {
            background-color: #181c20;
            border: none;
            line-height: 28px;
            border-bottom: 1px solid #23282e;
            margin-left: 0px;
        }
        
        .nav-side-menu ul .sub-menu li:hover, .nav-side-menu li .sub-menu li:hover
        {
            background-color: Orange;
        }
        
        .nav-side-menu ul .sub-menu li:before, .nav-side-menu li .sub-menu li:before
        {
            font-family: FontAwesome;
            content: "\f105";
            display: inline-block;
            padding-left: 10px;
            padding-right: 10px;
            vertical-align: middle;
        }
        
        .nav-side-menu li
        {
            padding-left: 0px;
            border-left: 3px solid #2e353d;
            border-bottom: 1px solid #23282e;
        }
        
        .nav-side-menu li a
        {
            text-decoration: none;
            color: #e1ffff;
        }
        
        .nav-side-menu li a i
        {
            padding-left: 10px;
            width: 20px;
            padding-right: 20px;
        }
        
        .nav-side-menu li:hover
        {
            border-left: 3px solid #d19b3d;
            background-color: #4f5b69;
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -o-transition: all 1s ease;
            -ms-transition: all 1s ease;
            transition: all 1s ease;
        }
        
        @media (max-width: 767px)
        {
            .nav-side-menu
            {
                position: relative;
                width: 100%;
                margin-bottom: 10px;
            }
        
            .nav-side-menu .toggle-btn
            {
                display: block;
                cursor: pointer;
                position: absolute;
                right: 10px;
                top: 10px;
                z-index: 10 !important;
                padding: 3px;
                background-color: #ffffff;
                color: #000;
                width: 40px;
                text-align: center;
            }
        
            .brand
            {
                text-align: left !important;
                font-size: 22px;
                padding-left: 20px;
                line-height: 50px !important;
            }
        }
        
        @media (min-width: 767px)
        {
            .nav-side-menu .menu-list .menu-content
            {
                display: block;
            }
        }
        
        body
        {
            margin: 0px;
            padding: 0px;
        }
    </style>
<%--    <script src="../js/1.12.0-jquery.min.js"></script>
    <script src="../js/3.3.6-js-bootstrap.min.js"></script>
    <link href="../css/3.3.6_bootstrap.min.css" rel="stylesheet" />
    <link href="../css/font-awesome.min.css" rel="stylesheet" />--%>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
    <script type="text/javascript">
        $(function () {        
        $('li[data-toggle="collapse"]').each(function () {            
                if ($(this).next('ul').length == 0) {
                    $(this).removeAttr('data-toggle').removeAttr('data-target').removeClass('collapsed');
                    $(this).find('span.arrow').remove();
                }
            });
            $('ul#menu-content > ul').on('show.bs.collapse', function (e, obj) {               
                $("ul#menu-content > ul").not(this).removeClass("in");
                var currentHead = $(this).prev("li");
                $("ul#menu-content > li").not(currentHead).removeClass("active");
                $(currentHead).addClass("active");
            })
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="nav-side-menu">
        <div class="brand">
            AspSnippets
        </div>
        <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content">
        </i>
        <div class="menu-list">
            <ul id="menu-content" class="menu-content collapse out">
                <asp:Repeater ID="rptCategories" runat="server" OnItemDataBound="rptMenu_OnItemBound">
                    <ItemTemplate>
                        <li data-toggle="collapse" data-target='#<%#Eval("Menu_Desc") %>' class="collapsed">
                            <a href='<%#Eval("Navigate_Url") %>'><i class='<%#Eval("CssFont") %>'></i>
                                <%#Eval("Description") %><span class="arrow"></span></a> </li>
                        <asp:Literal ID="ltrlSubMenu" runat="server"></asp:Literal>
                    </ItemTemplate>
                </asp:Repeater>
            </ul>
        </div>
    </div>
    </form>
</body>
</html>

DataTable Menus = new DataTable();
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindMenu();
    }
}

protected void rptMenu_OnItemBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            if (Menus != null)
            {
                DataRowView drv = e.Item.DataItem as DataRowView;
                string ID = drv["Menu_Id"].ToString();
                string Title = drv["Menu_Desc"].ToString();
                DataRow[] rows = Menus.Select("Parent_Menu_Id=" + ID);
                if (rows.Length > 0)
                {

                    StringBuilder sb = new StringBuilder();
                    sb.Append("<ul id='" + Title + "' class='sub-menu collapse'>");
                    foreach (var item in rows)
                    {
                        string parentId = item["Menu_Id"].ToString();
                        string parentTitle = item["Menu_Desc"].ToString();

                        DataRow[] parentRow = Menus.Select("Parent_Menu_Id=" + parentId);

                        if (parentRow.Count() > 0)
                        {
                            sb.Append("<li data-toggle='collapse' data-target='#" + parentTitle + "' class='collapsed'><a href='" + item["Navigate_Url"] + "'>" + item["Description"] + "<span class='arrow'></span></a>");
                            sb.Append("</li>");
                        }
                        else
                        {
                            sb.Append("<li><a href='" + item["Navigate_Url"] + "'>" + item["Description"] + "</a>");
                            sb.Append("</li>");
                        }
                        sb = CreateChild(sb, parentId, parentTitle, parentRow);
                    }
                    sb.Append("</ul>");
                    (e.Item.FindControl("ltrlSubMenu") as Literal).Text = sb.ToString();
                }
            }
        }
    }
}

private StringBuilder CreateChild(StringBuilder sb, string parentId, string parentTitle, DataRow[] parentRows)
{
    if (parentRows.Length > 0)
    {
        sb.Append("<ul id='" + parentTitle + "' class='sub-menu collapse'>");
        foreach (var item in parentRows)
        {
            string childId = item["Menu_Id"].ToString();
            string childTitle = item["Menu_Desc"].ToString();
            DataRow[] childRow = Menus.Select("Parent_Menu_Id=" + childId);

            if (childRow.Count() > 0)
            {
                sb.Append("<li data-toggle='collapse' data-target='#" + childTitle + "' class='collapsed'><a href='" + item["Navigate_Url"] + "'>" + item["Description"] + "<span class='arrow'></span></a>");
                sb.Append("</li>");
            }
            else
            {
                sb.Append("<li><a href='" + item["Navigate_Url"] + "'>" + item["Description"] + "</a>");
                sb.Append("</li>");
            }
            CreateChild(sb, childId, childTitle, childRow);
        }
        sb.Append("</ul>");

    }
    return sb;
}

private void BindMenu()
{
    Menus = GetData("Select Menu_ID,Parent_Menu_Id,Menu_Desc,Description,Navigate_Url,CssFont from [Mst_Menu]");
    DataView view = new DataView(Menus);
    view.RowFilter = "Parent_Menu_ID = 0";
    this.rptCategories.DataSource = view;
    this.rptCategories.DataBind();
}

private DataTable GetData(string query)
{
    DataTable dt = new DataTable();
    string constr = ConfigurationManager.ConnectionStrings["ConStr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {

        using (SqlCommand cmd = new SqlCommand(query))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                sda.Fill(dt);
            }
        }
        return dt;
    }
}

Screenshot

NonResponsive

Responsive

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

[Solved] MultiLevel Bootstrap (Responsive) Vertical Menu using C# in ASP.Net

Company

Explore

Follow us

Contact Us