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

TreeView (Checkbox) not showing any data

Thread ID:

Created:

Updated:

Platform:

Replies:

146642 Aug 12,2019 01:42 PM UTC Aug 13,2019 11:50 AM UTC ASP.NET MVC - EJ 2 1
loading
Tags: Treeview
Craig Morgan
Asked On August 12, 2019 01:42 PM UTC

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 [Syncfusion]
Replied On August 13, 2019 11:50 AM UTC

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. 


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