TreeView (Checkbox) not showing any data

[Craig Morgan]

Hi, this is my first attempt at using a Syncfusion control and so far I am failing.

I am trying to use a TreeView control with Checkboxes.

I am passing an object of type TreeViewFieldsSettings to the view (based on the example project) which contains a list of objects (the DataSource) with my data.

I can see during debug that the data is getting to the view, but no data is being displayed.

Here is my partial view :-

@using Syncfusion.EJ2.Navigations

@using Syncfusion.EJ2

@model TreeViewFieldsSettings

@{

    Layout = "~/Areas/MNT/Views/Shared/_Layout.cshtml";

}

    <div class="col-lg-8 control-section">

        <div class="control_wrapper">

            @Html.EJS().TreeView("CheckBox").ShowCheckBox(true).Fields(ViewBag.CheckBoxModel).Render()

        </div>

    </div>

    <div class="col-lg-4 property-section">

        <table id="property" title="Properties">

            <tbody>

                <tr>

                    <td style="padding-right: 10px">

                        <div style="padding-left: 0;padding-top: 0">

                            @Html.EJS().CheckBox("select").Checked(true).Label("Auto Check").Change("onChange").Render()

                        </div>

                    </td>

                </tr>

            </tbody>

        </table>

    </div>

    @*custom code start*@

    <style>

        .control_wrapper {

            max-width: 500px;

            margin: auto;

            border: 1px solid #dddddd;

            border-radius: 3px;

        }

        @@media screen and (max-width: 768px) {

            .treeview-control-section {

                margin: 0;

            }

        }

    </style>

    @*custom code end*@

Here is the code from the controller where I am setting the TreeViewFieldsSettings object.

public ActionResult Index()

{

     TreeViewFieldsSettings CheckBoxModel = new TreeViewFieldsSettings();

     // set up a list of sites

     List<naSite> sites = new List<naSite>();

     sites = GetSites(sites).OrderBy(x => x.SiteName).ToList();

     // Use the sites to build a list of type TreeviewModel and use as the DataSource

     CheckBoxModel.DataSource = BuildTreeview(sites);

     CheckBoxModel.HasChildren = "HasChild";

     CheckBoxModel.Expanded = "Expanded";

     CheckBoxModel.Id = "Id";

     CheckBoxModel.ParentID = "PId";

     CheckBoxModel.Text = "Name";

     return View("index", CheckBoxModel);

}

When I run the project I just get a single text box on the page.

Hoping you can see where I am going wrong. Thanks.

[Ashokkumar Balasubramanian]

Hi Craig Morgan, 

 

Good day to you. 

 

We have checked your code snippet and prepared a sample based on the requirement. If you are rendering any Syncfusion components via partial view, you need to include @Html.EJS().ScriptManager() in your partial view page. We have rendered TreeView in partial view using the following code snippet. 

 

<div id="tree"> 

        @Html.Action("DisplayOpenResults1", "Home") 

</div> 

 

public ActionResult DisplayOpenResults1() 

        { 

            var tree = treedata.GetTree(); 

            checkboxfields.DataSource = tree; 

            checkboxfields.HasChildren = "HasChild"; 

            checkboxfields.Expanded = "Expanded"; 

            checkboxfields.Id = "Id"; 

            checkboxfields.ParentID = "PId"; 

            checkboxfields.Text = "Name"; 

            ViewBag.checkboxfields = checkboxfields; 

            return PartialView("PartialPage"); 

        } 

 

 

    <div class="col-lg-8 control-section"> 

        <div class="control_wrapper"> 

@Html.EJS().TreeView("checkbox").ShowCheckBox(true).Fields(ViewBag.checkboxfields).Render() 

        </div> 

 

    </div> 

    <div class="col-lg-4 property-section"> 

        <table id="property" title="Properties"> 

            <tbody> 

                <tr> 

                    <td style="padding-right: 10px"> 

                        <div style="padding-left: 0;padding-top: 10px"> 

                            @Html.EJS().CheckBox("select").Checked(true).Label("Auto Check").Change("onChange").Render() 

                        </div> 

                    </td> 

                </tr> 

            </tbody> 

        </table> 

    </div> 

 

    <script> 

        function onChange(args) { 

            var treeObj = document.getElementById('checkbox').ej2_instances[0]; 

            treeObj.autoCheck = args.checked; 

        } 

    </script> 

 

    @Html.EJS().ScriptManager() 

 

Note: Kindly ensure whether you have mapped TreeView fields properly 

 

Sample: 

 

https://www.syncfusion.com/downloads/support/forum/146642/ze/PartialTree625065695 

 

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

 

Regards, 

Ashokkumar B.