Syncfusion Treeview not rendering in ASP.Net MVC5

Question

I'm trying to add a Syncfusion Treeview control to an ASP.Net MVC5 projectbut I'm not having much luck. (I've tried the Syncfusion forum but no replies yet).

I have lifted the code for the view from Syncfusion's examples, the line to render the Treeview has been simplified to try and get something showing.

I am loading data from a database into a TreeViewFieldsSettings object and passing this to the view. I can see during debug that the data is getting to the view (Model.DataSource is populated) but the control is not being rendered (the rest of the page is). I have no errors in the browser console.

I have the ej2.min.js script referenced in the layout page. The Checkbox (which came in the example I copied from Syncfusion) is rendered, so I'm assuming ej2.min.js is accessible.

I have my licence key set in the controller constructor

Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("licencekey")

I just cannot work out why my data doesn't show. Grateful for any suggestions.

This 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("Index").ShowCheckBox(true).Fields(field => field.Id("Id").Text("Name").DataSource(Model.DataSource)).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 my code to populate the TreeViewFieldsSettings object

    public ActionResult Index()
    {
        TreeViewFieldsSettings CheckBoxModel = new TreeViewFieldsSettings();

        // Loads a list of type naSite
        List<naSite> sites = new List<naSite>();
        sites = GetSites(sites).OrderBy(x => x.SiteName).ToList();

        // Builds the DataSource using the list of naSite
        CheckBoxModel.DataSource = BuildTreeview(sites);
        CheckBoxModel.HasChildren = "HasChild";
        CheckBoxModel.Expanded = "Expanded";
        CheckBoxModel.Id = "Id";
        CheckBoxModel.ParentID = "PId";
        CheckBoxModel.Text = "Name";
        return View("index", CheckBoxModel);
    }

The BuildTreeview method

    public List<TreeviewModel> BuildTreeview(List<naSite> Sites)
    {
        List<TreeviewModel> localData1 = new List<TreeviewModel>();

        var lastParent = "";
        foreach(naSite s in Sites)
        {
            var parent = lastParent;
            localData1.Add(new TreeviewModel { Id = s.SiteID.ToString(), PId = parent, Name = s.SiteName, HasChild = false, Expanded = false });
        }
        return localData1;
    }

Kanagambigai Murugan · Accepted Answer · 2019-08-21 11:33:15Z

From analyzing your query and as you said that the data is getting to the views, I think the problem here might be you missed to include @Html.EJS().ScriptManager() in your partial view page.

    //View part

<div id="tree">@Html.Action("DisplayOpenResults1", "Home")</div>

//Controller part

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");

}

// Partial view page

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

Sample:

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

Collectives™ on Stack Overflow

Syncfusion Treeview not rendering in ASP.Net MVC5

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related