We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET Web Forms
  4. Menu not working

Menu not working


Dear Sir;

I created a menu like following and added the css.

        <div class="frame">

           <ej:Menu ID="SyncfusionProducts" runat="server" Width="615px">
                 <Items>

                <ej:MenuItem Id="Products" Text="Products">

                </ej:MenuItem>

                <ej:MenuItem Id="Support" Text="Support">

                </ej:MenuItem>

                <ej:MenuItem Id="Purchase" Text="Purchase">

                </ej:MenuItem>

                <ej:MenuItem Id="Downloads" Text="Downloads">

                </ej:MenuItem>

                <ej:MenuItem Id="Resources" Text="Resources">

                </ej:MenuItem>

                <ej:MenuItem Id="Company" Text="Company">

                </ej:MenuItem>

            </Items>

           </ej:Menu>

        </div>

but when i run it shows like a bulleted list


7 Replies
PO Prince Oliver Syncfusion Team July 17, 2017 06:18 AM UTC

Hi Hafizullah,   
  
Thank you for contacting Syncfusion Support.   
  
We have checked the provided code, we were unable to reproduce the issue with that. For your reference, we have prepared a sample, kindly refer to the following link for the sample: http://www.syncfusion.com/downloads/support/forum/131530/ze/MenuSample-1637851567 

We suggest you to ensure whether you have referred the dependent scripts and themes in the layout page. Kindly refer to the following code snippet.  

[SiteMaster] 
<%:Styles.Render("~/Content/bootstrap.min.css") %> 
     <%:Styles.Render("~/Content/Site.css") %> 
     <%:Styles.Render("~/Content/ej/web/default-theme/ej.web.all.min.css") %> 
        
     <!--[if lt IE 9]> 
    <%: Scripts.Render("~/Scripts/jquery-1.11.3.min.js")%> 
    <![endif]--> 
    <!--[if gte IE 9]><!--> 
    <%: Scripts.Render("~/Scripts/jquery-3.1.1.min.js")%> 
    <!--<![endif]--> 
    <%: Scripts.Render("~/Scripts/pivotgrid.datasource.js")%> 
    <%: Scripts.Render("~/Scripts/jsrender.min.js")%> 
    <%: Scripts.Render("~/Scripts/ej/ej.web.all.min.js")%> 
    <%: Scripts.Render("~/Scripts/ej/ej.webform.min.js")%> 
    <%: Scripts.Render("~/Scripts/jsondatachart.js")%> 
    <%: Scripts.Render("~/Scripts/sampleslist.js")%> 
    <%: Scripts.Render("~/Scripts/properties.js")%> 

Also, ensure whether the ScriptManager is added in SiteMaster page. 

[SiteMaster] 
<form runat="server"> 
        <asp:ScriptManager runat="server"> 
             
        </asp:ScriptManager> 
    . . . . . . . . . . . . . . . . . . . . . . .  
</form> 

Regards, 
Prince 


HM Hafizullah Mahmudi July 21, 2017 04:10 PM UTC

Thanks;

Is there a way to hide a menu item programmatic ally. For example, I would like to show/hide some menu items based on users role.

Secondly, how can I change the color or dropdown icon. see following screen. 




PO Prince Oliver Syncfusion Team July 24, 2017 11:27 AM UTC

Hi Hafizullah, 

Thank you for your update. 

Query 1: Is there a way to hide a menu item programmatic ally 

Response: You can disable menu item programmatically using the HtmlAttributes property. you need to provide Id attribute for every menu item you need to hide. Kindly refer to the following code snippet. 

 . . . . . .  
<Items> 
    <ej:MenuItem Id="Home" Text="Home"></ej:MenuItem> 
    . . . . . . .  
 

Now you can access the menu item using the Id attribute in the code behind and you can set HtmlAttributes property for the menu item as “class=e-hidden-item”. This will hide the menu item. Kindly refer to the following code snippet. 

Home.HtmlAttributes = "class=e-hidden-item"; 
 

Query 2: how can I change the color or dropdown icon. 

Response: To change the color of the dropdownlist icon, you need to override the existing color. Kindly refer to the following code snippet. 

<style> 
    .e-menu .e-list>a .e-icon, .e-menu .e-list>span>.e-icon { 
        color: #f00; 
    } 
</style> 
 

We have prepared a sample for your reference, kindly find the sample from the following link: http://www.syncfusion.com/downloads/support/forum/131530/ze/MenuAspSample-615987181 

Regards, 
Prince 


HM Hafizullah Mahmudi July 29, 2017 02:52 PM UTC

Thanks it works great now.I need another help in applying sitemap using Syncfusion. Is there a way to implement a asp.net webform like sitemap navigation style.

PO Prince Oliver Syncfusion Team July 31, 2017 05:10 AM UTC

Hi Hafizullah, 

Most welcome. 

We have already considered Site Map control as feature request at our end and it will be available in any of the upcoming release. 

Regards, 
Prince 


KD Kim Dobranski March 9, 2021 11:11 PM UTC

I could not get this sample to work, and is this a MVC sample? I have a webforms app and getting the same problem. Renders during design just fine but not when ran.



KR Keerthana Rajendran Syncfusion Team March 10, 2021 06:11 AM UTC

Hi Kim, 
 
The previous sample demonstrates rendering Menu control in Asp.Net WebForms platform and it works fine in our end. We have attached the same in the below link for your reference. Make required version changes in web config based on your product version.  
 
 
We suspect that scripts and CSS are not referred correctly in your end. Refer to the following links for more details on getting started with Menu control. 
 
 
 
Please ensure this and get back to us with clear details on your issue for further assistance.  
 
Regards, 
Keerthana.  
 


Loader.
Up arrow icon