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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to use a TreeView inside a Splitter

Thread ID:

Created:

Updated:

Platform:

Replies:

144627 May 15,2019 02:22 AM UTC May 20,2019 09:55 AM UTC JavaScript - EJ 2 5
loading
Tags: TreeView
Adam
Asked On May 15, 2019 02:22 AM UTC

How can I load a Tree View in one Splitter pane and a Grid in the other? I can't seem to get another control to render inside the Splitter. Ultimately I want to have a Treeview that loads the grid based on the selection made. I can't find any sample code for this.

Christopher Issac Sunder K [Syncfusion]
Replied On May 15, 2019 01:03 PM UTC

Hi Adam, 

Greetings from Syncfusion support. 

We have prepared a sample to render the treeview and grid inside splitter. Here we have dynamically changed the datasource of the grid in the nodeSelected event of treeview . Please find the code block 

function onSelect(args) { 
    let ID: string = args.nodeData.id; 
    if (ID === "2" || ID === "4" || ID === "9" || ID === "13") { 
        let data1 = new DataManager(employeeData as JSON[]).executeLocal(new Query().take(15)); 
        grid.dataSource = data1; 
        grid.columns = [ 
            { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right' }, 
            { field: 'FirstName', headerText: 'Name' }, 
            { field: 'Title', headerText: 'Title' }, 
        ] 
    } 
} 


Please check the sample and get back to us if you need any further assistance. 

Thanks, 
Christo 


Adam
Replied On May 16, 2019 01:49 AM UTC

Thank you for the quick response. I will see if this helps. It is different from what I am trying to do. I am creating an MVC application and so my code so far for the splitter is as follows:

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
    <div class="col-lg-12 control-section" style="height: 580px;">
        <div id="target">
            <div>
                @Html.EJS().Splitter("splitter").Width("1200px").Height("800px").PaneSettings(item =>
           {
               item.Size("300px").Content("<div><div class='content'><div id='tree'>@Html.EJS().TreeView('hierarchical').Fields(ViewBag.hierarchicalFields).Render()</div></div></div>").Add();
               item.Size("900px").Content("<div><div class='content'><div id='docGrid'>Grid goes here</div></div></div>").Add();
           }).Render()
            </div>
        </div>
    </div>
}


So, I am using the html helper for the splitter and was trying to use another html helper for the tree view inside the left splitter pane. But when it renders it jusr displays the actual code for the tree view instead of the tree view. I would like to populate the tree view from a database call binding it with ViewBag and do the same for a grid in the right side of the splitter, the grid would then update based on the node of the tree view being selected. Any further examples you could provide would be greatly appreciated.

Christopher Issac Sunder K [Syncfusion]
Replied On May 16, 2019 01:27 PM UTC

Hi Adam, 

Thanks for the details. 

We can understand your requirement. We have prepared the sample based on your requirement. We have dynamically bind the grid and treeview in onCreate event of splitter.  


Please check the sample and get back to us if you need any further assistance. 

Thanks,
Christo 


Adam
Replied On May 19, 2019 02:52 AM UTC

Thank you very much for the new example. I have it mostly working, I was able to get the TreeView to populate from the ViewBag created in the controller. I have not tried to get the grid to populate from controller yet, but, just using the javascript. But the onSelectcis not working.

Ashokkumar Balasubramanian [Syncfusion]
Replied On May 20, 2019 09:55 AM UTC

Hi Adam, 
 
We regret for the inconvenience. 
 
The reported problem is due to unable to access the grid instance in nodeSelected event, so we can globally specify the grid instance to access gridObj in nodeSelected event. Please find the below modified code block and sample. 
 
var gridObj; 
function onCreate(args) { 
 
    gridObj = new ej.grids.Grid({ 
        dataSource: employeeData, 
        columns: [ 
            { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 125 }, 
            { field: 'FirstName', headerText: 'Name', width: 125 }, 
            { field: 'Title', headerText: 'Title', width: 180 }, 
        ] 
    }); 
    gridObj.appendTo('#grid') 
} 
 
 
Please check the above sample and get back to us if you need further assistance. 
 
Regards, 
Ashokkumar B. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon