Results 1 to 2 of 2

Thread: Nav Bar not displaying 1 sub menu

  1. #1

    Thread Starter
    Hyperactive Member kuldevbhasin's Avatar
    Join Date
    Mar 2008
    Location
    Mumbai, India
    Posts
    478

    Nav Bar not displaying 1 sub menu

    hi
    i have a side navbar menu which has 5 parent id i am trying to display a data driven menu.
    the 1st, 2nd, 4th and 5th parent id is showing the submenus but the 3rd one is not showing anything. pls. guide.
    below is the code for it.

    html:
    HTML Code:
    <div id="mySidenav" class="sidenav">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
                <div>
            
                <%--<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">
                    
                        <asp:Repeater ID="rptCategories" runat="server" OnItemDataBound="rptMenu_OnItemBound">
                            <ItemTemplate>
                                <li data-toggle="collapse" data-target='#<%#Eval("InnerHtml") %>' class="collapsed"><a
                                    href='<%#Eval("Url") %>' style="font-size: medium" ><i class='<%#Eval("CssFont") %>'></i>
                                    <%#Eval("InnerHtml")%><span class="arrow"></span></a> </li>
                                <asp:Literal ID="ltrlSubMenu" runat="server" ></asp:Literal>
                            </ItemTemplate>
                        </asp:Repeater>
                      
                    
                </div>
            
        </div>
    
        </div>
        <div id="main">
            <span style="font-size: 30px; cursor: pointer" onclick="openNav()"> Open Menu</span>
        </div>
        <script>
            function openNav() {
                document.getElementById("mySidenav").style.width = "250px";
                document.getElementById("main").style.marginLeft = "250px";
            }
    
            function closeNav() {
                document.getElementById("mySidenav").style.width = "0";
                document.getElementById("main").style.marginLeft = "0";
            }
        </script>
        
    Code:
        Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
            If Not Me.IsPostBack Then
                Me.BindMenu()
            End If
        End Sub
    
    
        Protected Sub rptMenu_OnItemBound(sender As Object, e As RepeaterItemEventArgs)
            If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
                If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
                    If Menus IsNot Nothing Then
                        Dim drv As DataRowView = TryCast(e.Item.DataItem, DataRowView)
                        Dim ID As String = drv("MainID").ToString()
                        Dim Title As String = drv("InnerHtml").ToString()
                        Dim rows As DataRow() = Menus.[Select](Convert.ToString("ParentId=") & ID)
                        If rows.Length > 0 Then
    
                            Dim sb As New StringBuilder()
                            sb.Append((Convert.ToString("<ul id='") & Title) + "' class='sub-menu collapse'>")
                            For Each item In rows
                                Dim parentId As String = item("MainID").ToString()
                                Dim parentTitle As String = item("InnerHtml").ToString()
    
                                Dim parentRow As DataRow() = Menus.[Select](Convert.ToString("ParentId=") & parentId)
    
                                If parentRow.Count() > 0 Then
                                    sb.Append((Convert.ToString("<li data-toggle='collapse' data-target='#") & parentTitle) + "' class='collapsed'><a  style='font-size: medium'  href='" + item("Url") + "'>" + item("InnerHtml") + "<span class='arrow'></span></a>")
                                    sb.Append("</li>")
                                Else
                                    sb.Append("<li><a  style='font-size: medium'  href='" + item("Url") + "'>" + item("InnerHtml") + "</a>")
                                    sb.Append("</li>")
                                End If
                                sb = CreateChild(sb, parentId, parentTitle, parentRow)
                            Next
                            sb.Append("</ul>")
                            TryCast(e.Item.FindControl("ltrlSubMenu"), Literal).Text = sb.ToString()
                        End If
                    End If
                End If
            End If
         
        End Sub
    
    
        Private Function CreateChild(sb As StringBuilder, parentId As String, parentTitle As String, parentRows As DataRow()) As StringBuilder
            If parentRows.Length > 0 Then
                sb.Append((Convert.ToString("<ul id='") & parentTitle) + "' class='sub-menu collapse'>")
                For Each item In parentRows
                    Dim childId As String = item("MainID").ToString()
                    Dim childTitle As String = item("InnerHtml").ToString()
                    Dim childRow As DataRow() = Menus.[Select](Convert.ToString("ParentId=") & childId)
    
                    If childRow.Count() > 0 Then
                        sb.Append((Convert.ToString("<li data-toggle='collapse' data-target='#") & childTitle) + "' class='collapsed'><a  style='font-size: medium' href='" + item("Url") + "'>" + item("InnerHtml") + "<span class='arrow'></span></a>")
                        sb.Append("</li>")
                    Else
                        sb.Append("<li><a  style='font-size: medium'  href='" + item("Url") + "'>" + item("InnerHtml") + "</a>")
                        sb.Append("</li>")
                    End If
                    CreateChild(sb, childId, childTitle, childRow)
                Next
    
                sb.Append("</ul>")
            End If
         
    
            Return sb
        End Function
    
    
        Private Sub BindMenu()
            ' Menus = GetData("SELECT [MenuId], [ParentMenuId], [Title], [Description], [Url],[CssFont] FROM [Menus]")
            Menus = GetData("SELECT [MainID], [ParentId], [InnerHtml], [InnerHtml], [Url],[CssFont] FROM [MenuList] WHERE LoginType = 'Admin' Order By MyOrder")
            Dim view As New DataView(Menus)
            view.RowFilter = "ParentId=0"
            Me.rptCategories.DataSource = view
            Me.rptCategories.DataBind()
            'Menus = GetData("SELECT [MenuId], [ParentMenuId], [Title], [Description], [Url],[CssFont] FROM [Menus]")
            'Dim view As New DataView(Menus)
            'view.RowFilter = "ParentMenuId=0"
            'Me.rptCategories.DataSource = view
            'Me.rptCategories.DataBind()
    
        End Sub
    
        Private Function GetData(query As String) As DataTable
            Dim dt As New DataTable()
            Dim constr As String = ConfigurationManager.ConnectionStrings("SqlConnectionString").ConnectionString
            Using con As New SqlConnection(constr)
                Using cmd As New SqlCommand(query)
                    Using sda As New SqlDataAdapter()
                        cmd.CommandType = CommandType.Text
                        cmd.Connection = con
                        sda.SelectCommand = cmd
                        sda.Fill(dt)
                    End Using
                End Using
                Return dt
            End Using
        End Function
    i have checked the datatable all the records are perfect in that. seems i am missing out on some minor point.
    Thanks in advance
    The only time you run out of chances is when you stop taking them.
    The mind is like a parachute.
    It doesnít work unless itís open.

  2. #2
    Lively Member
    Join Date
    Jan 2020
    Posts
    100

    Re: Nav Bar not displaying 1 sub menu

    Hello,@kuldevbhasin

    Please try this code,To nav bar not displaying 1 sub menu

    Code:
    <script src="Scripts/jquery-3.4.1.min.js"></script>
        <script src="Scripts/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
        <link href="Content/bootstrap-reboot.min.css" rel="stylesheet" />
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <script>
            $(function () {
                $('.dropdown-menu a.dropdown-toggle').on('click', function (e) {
                    if (!$(this).next().hasClass('show')) {
                        $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
                    }
                    var $subMenu = $(this).next('.dropdown-menu');
                    $subMenu.toggleClass('show');
    
                    $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function (e) {
                        $('.dropdown-submenu .show').removeClass('show');
                    });
                    return false;
                });
            })
        </script>
    
    
    
     <nav class="navbar navbar-expand-lg navbar-light">
                <a class="navbar-brand" href="#">
                    <img class="img-fluid img-logo" src="image/image6.jpg" alt="Company Name" />
                </a>
                <div class="collapse navbar-collapse" id="navbarNavDropdown">
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="Default.aspx">Home<span class="sr-only"></span></a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true"
                                aria-expanded="false">Links 1
                            </a>
                            <ul class="dropdown-menu text-right">
                                <li>
                                    <a class="dropdown-item" href="#">Link 1</a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="#">Link 2</a>
                                </li>
                                <li class="nav-item dropdown-submenu">
                                    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true"
                                        aria-expanded="false">Sublinks
                                    </a>
                                    <ul class="dropdown-menu text-right">
                                        <li>
                                            <a class="dropdown-item" href="#">Sublink 1</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true"
                                aria-expanded="false">Links 2
                            </a>
                            <div class="dropdown-menu text-right">
                                <a class="dropdown-item" href="#">Link 1</a>
                                <a class="dropdown-item" href="#">Link 2</a>
                                <a class="dropdown-item" href="#">Link 3</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>
    I hope this code will be useful for you.
    Thank you.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width