Adding submenu and page to Navigation Drawer

[Isaac]

Hello

I am working on the Navigation Drawer and I try to add sub menu to it, for example like the following code:

  @Html.EJ().NavigationDrawer("navigationPane").Width(300).TargetId("target").ContentTemplate(@<div>

        @Html.EJ().ListView("list").ShowHeader(false).Width(300).Items(items =>

   {

       items.Add().Text("Home").Children(child =>

       {

           child.Add().Text("child01").Children(child1 =>

           {

               child1.Add().Text("child01_01");

           });

       });

       items.Add().Text("Profile");

       items.Add().Text("Photos");

       items.Add().Text("Location");

   });

I can add the sub menu but it is not I really want. So I am wonder that is it possible to:

1. Set the orientation style of the sub menu as the attached file (the part marked "1")
   
2. Add one more page to the navigation drawer as the attached file (the part marked "2")
   

Regards & Thanks,

Isaac

Attachment: Navigation_41eddac9.zip

[Buvana Sathasivam]

Hi Isaac, 

Thanks for using Syncfusion Products. 

We have prepared accordion with navigation drawer sample for achieving your shared screenshot layout.  We have rendered accordion and navigation drawer control.  After rendering accordion control, we have hide the navigation drawer container and content container element using accordion create event.  If you expand or click accordion second item, it will show the navigation drawer and show the container and content container element using accordion beforeActivate event and navigation drawer toggle public method.  Please find the below code. 

NavigationDrawerFeatures.cshtml 

            @Html.EJ().NavigationDrawer("navpane")…………..// Navigation drawer  

  

 

             @Html.EJ().Accordion("iconAccordion").ClientSideEvents(evt => evt.Create("onCreate").BeforeActivate("activate"))   // Accordion control 

 

<script type="text/javascript"> 

       

            function onCreate(args) { // Triggered when accordion was created 

                $("#container").hide(); 

                $("#content_container").hide(); 

            } 

            function activate(args) {  // Triggered before tab item is active in accordion 

                var obj = $("#navpane").data("ejNavigationDrawer") 

                if (args.activeIndex == 1) { 

                    obj.toggle();  // Toggle navigation drawer 

                    $("#container").show(); 

                    $("#content_container").show(); 

                } 

                else { 

                    obj.toggle(); 

                    $("#container").hide(); 

                    $("#content_container").hide(); 

                } 

 

            } 

        </script> 

         

For your convenience, we have prepared a simple sample. Please find the below sample. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/134868/ze/SyncfusionMvcApplication82181058224  

To know more about the ejAccordion component members.  Please refer the below reference.      

API link:  https://help.syncfusion.com/api/js/ejaccordion#events:beforeactivate  

https://help.syncfusion.com/api/js/ejaccordion#events:create  

 

To know more about the ejNavigationDrawer component members.  Please refer the below reference.      

API link: https://help.syncfusion.com/api/js/ejnavigationdrawer#methods:toggle  

 

Your shared information was not cleared, which is not sufficient to analyze your requirement.  Please share detailed information of your requirement.    

Please check the sample and  let us know if we have misunderstood.  If so, provide more exact details (like share your code or reproduce your requirement in attached sample) regarding your requirement so that we can check and provide an appropriate solution.          

  

Regards, 

Buvana S.