1. Home
  2. Forum
  3. ASP.NET Core
  4. TreeGrid control not working in Navigation Drawer

TreeGrid control not working in Navigation Drawer

Hi,
 i have put the control TreeGrid in a section (div) of Navigation Drawer, i have activate on Treegrid, scrolling,CRUD ... ; but in Nav Drawer nothing of this run. 
How i can do?

Thank for help!

Regards, 
Kalai Sirajeddine.


5 Replies
AP Arun Palaniyandi Syncfusion Team January 11, 2018 10:59 AM UTC

Hi Kalai Sirajeddine,    
    
Thanks for contacting Syncfusion support.    
   
We can replicate the issue. In order to resolve this issue, you need to render the TreeGrid or any components as client side scripts inside the Navigation Drawer using ready event in listviewSettings.  This issue is because, other components are rendered before rendering Navigation Drawer component. So, it’s not accessible inside Navigation Drawer. Hence you can use the ready event for rendering the other components inside our Navigation Drawer. Please refer to the following code example:    
    
<div id="home" class="subpage">   
   
<div id="TreeGridContainer" style="height:350px;width:100%;"></div>   
   
</div>   
<div id="people" class="subpage">   
<input id="datePicker" />   
<br />   
<br />   
<div id="Grid"></div>   
   
                        </div <ej-navigation-drawer id="navpane"direction="@NavigationDrawerDirection.Left" type="@NavigationDrawerType.Overlay"enable-list-view="true" target-id="butdrawer" content-id="content_container">   
                        <e-list-view-settings width="300" selected-item-index="0" show-header="false" mouse-up="headChange" ready="onReady" persist-selection="true" />   
                        <e-content-template>   
                            <ul>   
                                <li data-ej-imageurl="../Images/navigationdrawer/home.png" data-ej-text="TreeGrid" data-ej-rel='nofollow' href="#home"   
                                    id="navhome"></li>   
                                <li data-ej-imageurl="../Images/navigationdrawer/people.png" data-ej-text="Grid" data-ej-rel='nofollow' href="#people"   
                                    id="navpeople"></li>   
                                <li data-ej-imageurl="../Images/navigationdrawer/profile.png" data-ej-text="Profile" data-ej-rel='nofollow' href="#profile"   
                                    id="navprofile"></li>   
                                <li data-ej-imageurl="../Images/navigationdrawer/photo.png" data-ej-text="Photos" data-ej-rel='nofollow' href="#photos"   
                                    id="navphotos"></li>   
                            </ul>   
                        </e-content-template>   
                    </ej-navigation-drawer>    
<script type="text/javascript">   
function onReady(e) {   
        var dateFormat = "{0:" + ej.preferredCulture()["calendars"]["standard"]["patterns"]["d"] + "}",   
            columnWidth = 45;   
   
        $("#TreeGridContainer").ejTreeGrid({ //render treegrid component here   
            dataSource: sampleData,   
            childMapping: "subtasks",   
            treeColumnIndex: 1,   
            allowColumnResize: true,   
            isResponsive: true,   
            rowHeight:  36,              
            columns: [   
                { field: "taskID", headerText: "Task Id", width: columnWidth },   
                { field: "taskName", headerText: "Task Name" },   
                { field: "startDate", headerText: "Start Date", format: dateFormat },   
                { field: "endDate", headerText: "End Date", format: dateFormat },   
                { field: "duration", headerText: "Duration" },   
                { field: "progress", headerText: "Progress" }   
            ]   
        })   
         
        var shipDetails = [{ Name: 'Hanari Carnes', City: 'Brazil' },   
        { Name: 'Split Rail Beer & Ale', City: 'USA' },   
        { Name: 'Ricardo Adocicados', City: 'Brazil' }];   
        $("#datePicker").ejDatePicker();//render component here   
        $('#Grid').ejGrid({//render component here   
            dataSource: shipDetails   
        });   
    }   
   
</script>   
    
Refer to the following sample:   
    
Regards,    
    
Arun P.    


KS Kalai Sirajeddine January 11, 2018 02:49 PM UTC

Hi Arun Palaniyandi,
Thanks for the answer i get what was the problem now and thanks for the sample its helping me for my current project.
However I found this method a bit complicated for that simple task ,would have been easier if the solution was integrated in the Navigation Drawer control right? Thanks for answer.

Regards,
Kalai Sirajeddine

BS Buvana Sathasivam Syncfusion Team January 12, 2018 06:55 AM UTC

Hi Kalai,   
  
Thanks for your update.   
  
Query: “However I found this method a bit complicated for that simple task, would have been easier if the solution was integrated in the Navigation Drawer control right?”   
  
In our navigation drawer control, content is rendered based on script template.  In this current implementation we couldn’t render other controls directly in NavigationDrawer.  So that, we suggest to use client side event “ready” into ListViewSettings for rendering other controls inside the navigation drawer.  This support is provided in the navigation drawer control from Volume 2, 2016.  Please find the below release notes link.   
  
  
Please let us know if you have any further queries.  We will be happy to help you.   


  
Regards,   
Buvana S.   
 


PR Przemo March 9, 2018 09:30 AM UTC

Hi !

There is another solution than that ajax ?

AP Arun Palaniyandi Syncfusion Team March 13, 2018 10:54 AM UTC

Hi Przemo,    
   
Thanks for your interest in Syncfusion products.    
   
Query:”There is another solution than that ajax ?” 
 
As per our EJ1 Navigation Drawer current implementation, it not feasible to render other controls directly as wrappers. But this case is possible in our EJ2 Sidebar component and hence we suggest you to use EJ2 Side bar for rendering MVC Wrapper components directly.  
Please find the below UG documentation for more references. 
 
Release notes: 

 
 
 
We have also modified the previous shared sample with EJ2 sidebar along with TreeGrid and other components below:  
 
 
Please check he shared details, sample and let us know if you have any further queries.  
 
Regards,    
Arun P. 


Loader.
Up arrow icon