show submenu under parent rather than side by side.

[sateesh kumar]

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

[Christopher Issac Sunder K]

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, 

Sample: https://ej2.syncfusion.com/documentation/menu/use-case-scenarios/#hamburger-menu  

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

Documentation: https://help.syncfusion.com/aspnetmvc/accordion/getting-started  

Samples: https://mvc.syncfusion.com/demos/web/accordion/nestedaccordion  

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 

[sateesh kumar]

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

[Christopher Issac Sunder K]

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, 

Documentation: https://help.syncfusion.com/aspnetmvc/accordion/ajax-settings  

 

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, 

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/accordion/how-to/load-accordion-with-data-source/  

 

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> 

 

2. 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: 

http://www.syncfusion.com/downloads/support/forum/142921/ze/Icon_modifications-736127257 

 

Let us know if you require any further assistance. 

Thanks, 

Christo 

[sateesh kumar]

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.

[Christopher Issac Sunder K]

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 

https://js.syncfusion.com/themestudio/ 

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

https://help.syncfusion.com/js/theme-studio 

https://help.syncfusion.com/js/icon/ej-icons 

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

https://js.syncfusion.com/demos/web/&#35;&#33;/bootstrap/treeview/defaultfunctionalities 

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

[sateesh kumar]

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.

[Christopher Issac Sunder K]

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, 

Showcase samples – https://ej2.syncfusion.com/home/aspnetmvc.html 

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

Demos – https://ej2.syncfusion.com/aspnetmvc/ 

Documentation - https://ej2.syncfusion.com/aspnetmvc/documentation/ 

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 [e-mail] for further details on this regard. 

Thanks,
Christo

[sateesh kumar]

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

[Christopher Issac Sunder K]

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. 

Sample: https://jsplayground.syncfusion.com/nttfkg2y 

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