1. Home
  2. Forum
  3. ASP.NET MVC
  4. show submenu under parent rather than side by side.

show submenu under parent rather than side by side.

Hi team,

am want to show menu bar in vertically. 
i achieved my goal with ur exaples. 
     https://mvc.syncfusion.com/demos/web/menu/vertical

but am facing issue, my menu having no of child. few child have sub child.
due to this, when i want to select sub- sub-child of menu ,it side coming to my render page.
let me know how to over come this.

i tried withTreeView, its working nice with using link attribute to change action. But i want to change the look and feel. need to change the default symbol (triangle in prefix of parent).

my goal is to show menu bar, with child menu should not be overlay on render page.
and should not be side by side. its always should under parent menu. if have child have sub child's those should be under previous parent.

please find the attached images, current menu bar- it will represent sub child overlay on render page with EJ Menu.
     i have attached what am trying to design (menu expected result)

Thanks for the advance.

Regards,
J. Sateesh kumar

9 Replies
CI Christopher Issac Sunder K Syncfusion Team February 26, 2019 11:31 AM UTC

Hi Sateesh, 

Thank you for contacting Syncfusion support. 

We checked your requirement from our end. Using menu component, we will not be able to fully achieve your requirement. Also, in case of TreeView your requirement can be achieved but it would require application level customizations in both script side and css side. So instead, we would suggest you use our EJ2 Accordion component which would help you to achieve the requirement. Please check if the below EJ2 Accordion help document sample satisfies your requirement, 

If you need to use EJ1, then please check out our EJ1 Accordion component from below links, 



Please let us know if this information helps you so that if needed we can further help you to customize the component based on your requirement. 

Thanks, 
Christo 


SK sateesh kumar February 27, 2019 05:59 AM UTC

Hi Christo,

Thanks for the responding. 
how can i assign remote data for Accordion.
my data having menu with child and sub child. i need to give the url (redirection for action) for every child.
my goal was reached with using menu,treeview, 
while using EJ menu, getting child items on render page (over lay)
while using EJTreeView, look and feel is not good.(due to the symbol beside of parent element)
how can change the symbol in EJTreeView.


Thanks for advance
J. Sateesh Kumar


CI Christopher Issac Sunder K Syncfusion Team March 1, 2019 04:06 AM UTC

Hi Sateesh, 
 
Please find the below responses for your query, 
 
Query – 1: “Assign remote data for accordion” 
In EJ1 Accordion component, we currently do not provide support for accessing content from remote datasource. However, we do provide method to load content using AJAX. Please find the documentation related to it below, 
 
If your requirement is to access data from remote data source, we suggest you to try our EJ2 Accordion component. It has the support to access data from remote data source. Please find the documentation related to it below, 
 
Query – 2: “Changing the symbol of TreeView expand/collapse icons” 
You can achieve this requirement in css side, by modifying the content of the icons. Please find the details below, 
 
  1. Changing the icon:
 
You can modify the icon contents for expand and collapse as given in below code snippet, 
 
<style> 
//Here #tree1 specifies the id of the TreeView 
#tree1.e-treeview-wrap .e-icon.e-minus:before { 
        //You can specify the type of icon needed here 
        content: '\e833' 
} 
 
#tree1.e-treeview-wrap .e-icon.e-plus:before { 
        //You can specify the type of icon needed here 
        content: '\e834' 
} 
</style> 
 
  1. Removing the icon:
 
For this case, you can set TreeView ExpandOn property to “click” – This expands and collapses the node on single click. 
 
 
@(Html.EJ().TreeView("tree2").TreeViewFields(field => field.Datasource((IEnumerable<LoadData>)ViewBag.datasource).Id("Id").ParentId("Parent").Text("Text")).ExpandOn("click")) 
 
<style> 
#tree1.e-treeview-wrap .e-icon.e-minus:before { 
        //Specifying content as empty string removes the icon 
        content: '' 
} 
 
#tree1.e-treeview-wrap .e-icon.e-plus:before { 
        //Specifying content as empty string removes the icon 
        content: '' 
} 
</style> 
 
 
We have prepared a sample in TreeView based on your requirement. Please find it below, 
 
Sample: 
 
Let us know if you require any further assistance. 

Thanks, 
Christo 


SK sateesh kumar March 1, 2019 03:30 PM UTC

Hi Christo,

It working fine.

Let me know, what are the different types icons and what are the codes for those styles
is there any refernce site, to check all the Ej controls css, actions , events with practically. 
ex https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
there we can change the code and test, after that we can past into project.

and now i want to change the back ground color of tree view, button and  text .
currently my treeview was looks ugly. 

Thanks for the advance.


CI Christopher Issac Sunder K Syncfusion Team March 4, 2019 12:27 PM UTC

Hi Sateesh, 

We suggest you to generate required styles using theme studio. You can also check the appearance of all EJ1 controls based on these theme changes in the below link 

Refer to the below given UG links to know more details on styles and icons 

For ensuring actions and events , you can use Jsplayground sample by editing the JS demo link below 

Click the Edit button on the demo page to edit the sample in Jsplayground. Edit the sample and live output window will display the changes on the right side. 

Please let us know if you require any further assistance. 

Thanks, 
Christo

SK sateesh kumar March 6, 2019 04:55 AM UTC

Thanks very much Christo.

am looking for sample employee attendance with db connection.
with this, i need to provide monthly report employee wise, no of holidays. default holidays (for festivals)
sending leave request from, check login user status of the month and holidays... etc, 

Thanks for the advance.



CI Christopher Issac Sunder K Syncfusion Team March 7, 2019 09:40 AM UTC

Hi Sateesh,  

Thanks for the update.  

We don’t have direct example application for the requirement you have shared. You can go through the below showcase samples which demonstrates the usability of our components, 

Also, find the demo samples for all the components individually, 

Likewise, you can customize our components as per your need. If you want us to develop the entire application for you, we have a separate panel of experts working for developing applications using Syncfusion controls. You can contact [email protected] for further details on this regard. 

Thanks,
Christo

SK sateesh kumar March 13, 2019 01:54 PM UTC

Hi Christo,

am getting different menu symbol for different browsers.
find the attached images

Chrome - 72.0.3626.121 (Official Build) (64-bit)
IE - 11.483.15063.0

Thanks for the Advance.

Attachment: Tree_View_c367f538.7z

CI Christopher Issac Sunder K Syncfusion Team March 14, 2019 11:42 AM UTC

Hi Satheesh, 

We have looked into your expected requirement of showing the child li elements under the parent element rather than showing it as a side menu. For information, this expected requirement is not achievable with the Vertical Menu. Anyhow, you can achieve this using EJ TreeView control. For your reference, we have attached a sample by hiding the default icons available in the TreeView control. 


Unfortunately, we do not find any sample source in your last update for reference. If the attached sample does not meet your requirement. Please, update us with more details to understand your requirement, like sharing demo samples, screenshots, any video file of your expected requirement. 

Please, let us know if you need any further assistance. 

Thanks, 
Christo 


Loader.
Up arrow icon