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

TreeView (Checkbox) not showing any data

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.





1 Reply

AB Ashokkumar Balasubramanian Syncfusion Team August 13, 2019 03:50 AM

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: 
 
 
Please check the above sample and get back to us if you need any further assistance. 
 
Regards, 
Ashokkumar B. 


Loader.
Live Chat Icon For mobile
Up arrow icon