TreeView working With ModelView

[Maria Heredia Sandoval]

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

            $.ajax({

                url: "@Url.Action("GetCheckedNodes", "Home", null)",

                data: JSON.stringify( { data: checkedNodes }),

                type: "POST",

                contentType: "application/json; charset=utf-8",

                dataType: "json"

            });

            console.log(checkedNodes);

        }

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">
                                    </div>
                       </div>

.....

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.

[Christopher Issac Sunder K]

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> 

    </ejs-treeview> 

    <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" /> 

</form> 

// Controller part 

[HttpPost] 

public IActionResult GetValues() 

{ 

    string value = HttpContext.Request.Form["art"]; 

    ViewBag.Result = value; 

    return Json(value); 

} 

// After ajax succeeded 

function fnSuccess(data) { 

    console.log(data); 

    data = data.split(",") 

    var treeView = document.getElementById('treedata').ej2_instances[0]; 

    treeView.checkAll(data); 

} 

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’ 

Sample: http://www.syncfusion.com/downloads/support/directtrac/233087/ze/treeview-2034243665 

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

Thanks, 

Christo