How to use a TreeView inside a Splitter

[Adam]

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]

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' }, 

        ] 

    } 

} 

Sample: https://stackblitz.com/edit/ueesq6-gc1lgk?file=index.ts 

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

Thanks, 

Christo 

[Adam]

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]

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.  

Sample: http://www.syncfusion.com/downloads/support/forum/144627/ze/treview-1509948366 

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

Thanks,
Christo 

[Adam]

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]

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') 

} 

 

Sample: http://www.syncfusion.com/downloads/support/forum/144627/ze/treview-40087623 

 

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

 

Regards, 

Ashokkumar B.