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 working With ModelView

I wonder if Razor TreeVew can Work with ModelView to pass data to control without AJAX POST only with form ajax Submit or maybe

Example I got from your Help

function getCheckedNodes() {
            //create an instance from an existing TreeView.
            // only after control creation you can get treeObj otherwise it throws exception.
            var tree = $("#treeView").data('ejTreeView');
            var obj = $("#treeView").ejTreeView('instance');
            //to get TreeView data
            var data = obj.getTreeData();
            //to get checkednodes
            var checkedNodes = obj.getCheckedNodes();
                url: "@Url.Action("GetCheckedNodes", "Home", null)",
                data: JSON.stringify( { data: checkedNodes }),
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json"

How I'm Working with MVC and ViewModels :

<form id="frmUsuario" class="form-horizontal" asp-controller="Usuario" asp-action="Post" autocomplete="off" data-ajax="true" data-ajax-method="POST"
                      data-ajax-success="fnSuccess(data)" data-ajax-failure="fnFailure()">
                      <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4">
                                    <div class="e-input-group">
                                        <input class="e-input" id="nombre_usuario" asp-for="nombre_usuario" placeholder="Nombre Usuario" type="text">

Thanks in advance for your help I hope there is a way to interact with the Model and the controller, cause I would like to use that with the Grid Too.
waiting for your comments, regards.

1 Reply

CI Christopher Issac Sunder K Syncfusion Team April 10, 2019 01:25 PM UTC

Hi Maria, 

Thank you for contacting Syncfusion support. 

You can pass data to control without AJAX POST, but only with form ajax Submit. We have prepared a sample for your reference. 

// View part 
<form id="frmUsuario" class="form-horizontal" asp-controller="MyCal" asp-action="GetValues" autocomplete="off" data-ajax="true" data-ajax-method="POST" 
      data-ajax-success="fnSuccess(data)" data-ajax-failure="fnFailure()"> 
    <ejs-treeview id="treedata" name="treedata" showCheckBox="true" loadOnDemand="false"> 
        <e-treeview-fields dataSource="Model.DataSource" id="Id" parentId="PId" text="Name" hasChildren="HasChild" expanded="expanded"></e-treeview-fields> 
    <br /> 
    <label for="art"> Enter the node id to be checked: </label> 
    <input id="art" class="e-input" type="text" name="art" /> 
    <br /> 
    <input type="submit" id="button" value="Submit" /> 

// Controller part 
public IActionResult GetValues() 
    string value = HttpContext.Request.Form["art"]; 
    ViewBag.Result = value; 
    return Json(value); 

// After ajax succeeded 
function fnSuccess(data) { 
    data = data.split(",") 
    var treeView = document.getElementById('treedata').ej2_instances[0]; 

In the sample, the node id entered in the textbox will get checked after form submit. 
Note: To view the demo List.cshtml file type in URL ‘http://localhost‌‌‌:[Your Port]/MyCal/Lists’ 

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


Live Chat Icon For mobile
Up arrow icon