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. Image for the cookie policy date

How to use a TreeView inside a Splitter

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.

5 Replies

CI Christopher Issac Sunder K Syncfusion Team 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. 


AD Adam 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">
                @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();

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.

CI Christopher Issac Sunder K Syncfusion Team 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. 


AD Adam 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.

AB Ashokkumar Balasubramanian Syncfusion Team 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 }, 
Please check the above sample and get back to us if you need further assistance. 
Ashokkumar B. 

Live Chat Icon For mobile
Up arrow icon