How to post checked Nodes for TreeView to Controller

[Sam]

Hello,

Parameter on controller always null. GetCheckedNodes(List<string> data)

MVC:

        [HttpPost]

        public ActionResult GetCheckedNodes(List<string> data)

        {

            

            return View();

        }

CSHTML:

@(Html.EJ().TreeView("treeView")

            .TreeViewFields(field =>

                field.Datasource((IEnumerable<TableModel>)ViewBag.datasource)

                .Id("Id")

                .ParentId("Parent")

                .Text("Text")

                .Expanded("Expanded")

                .HasChild("HasChild")

                .IsChecked("NodeChecked")

               

            ).FullRowSelect(false)           

            .ShowCheckbox(true)

             .ClientSideEvents(events =>

                events.Create("onCreate")

            ).AutoCheckParentNode(true)

            )

            @(Html.EJ().Button("move")

            .Text("Move Node")

            .Size(ButtonSize.Normal)

            .ClientSideEvents(events =>

                events.Click("getCheckedNodes")

            )

            )

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

        }

[Ashokkumar Balasubramanian]

Hi Sam, 

 

Thanks for contacting Syncfusion support. 

 

We have analyzed your query (“How to post checked Nodes for TreeView to Controller”) and provided code block. In our TreeView component getCheckedNodes() method returns the DOM Element for treeview checked nodes,so we are unable to post the DOM Element to Controller part.For that instance you can use the getTreeData() and getCheckedNodes() methods to get the checked nodes JSON data from TreeView component, then post those data to controller part. Please check the below modified code block. 

  

[Script] 

 

var checkedNodes = obj.getCheckedNodes(); 

var checkNodesJSONData = ""; 

for (i = 0; i < checkedNodes.length; i++) { 

                checkNodesJSONData = checkNodesJSONData + JSON.stringify(obj.getTreeData(checkedNodes[i].id)); 

} 

 

$.ajax({ 

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

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

       type: "POST", 

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

       dataType: "json" 

      }); 

 

[Controller] 

 

public ActionResult GetCheckedNodes(string data) 

{ 

    return View(); 

} 

 

For your convenience, we have prepared simple sample, please check the sample in below location. 

 

Sample   

 

Please let us know, if you have any other concerns on this. 

 

Regards 

Ashokkumar B. 

[Sam]

Thank you.  That will work.

[Ashokkumar Balasubramanian]

Hi Sam, 

 

Most Welcome. 

 

Please let us know if you need any further assistance. 

 

Regards, 

Ashokkumar B. 

[Edgar H Velandia M]

Hi Sam, 

 

Most Welcome. 

 

Please let us know if you need any further assistance. 

 

Regards, 

Ashokkumar B. 

Hello Ashokkumar !

I ask for your help, because I have problem with the Treeview to return the data to the controller.

1) I need to process 470 records in the TreeView, but the response time is very slow, +- 1.5'  

            for (i = 0; i < checkedNodes.length; i++) {

                checkNodesJSONData = checkNodesJSONData + JSON.stringify(obj.getTreeData(checkedNodes[i].id));

            }

           // The For is very slow.  I need to find a way to make it more efficient.

2)   I can not find how to return successfully, the data controller to take them to the database. Always returns null value.

@section ScriptSection{

    <script>

        function onCreate(args) {

            console.log("Treeview created successfully");

        }

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

            var checkNodesJSONData = "";

            for (i = 0; i < checkedNodes.length; i++) {

                checkNodesJSONData = checkNodesJSONData + JSON.stringify(obj.getTreeData(checkedNodes[i].id));

            }

            // The For is very slow.  I need to find a way to make it more efficient.

            $.ajax({

                url: "@Url.Action("GetCheckedNodes", "User")",

                type: "POST",

                datatype: 'json',

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

                data: JSON.stringify({ value: data })

            });

            console.log(checkedNodes);

        }

    </script>

}

Thanks for help me.

Regards,

Edgar H. Velandia

Attachment: TreeView_Error_b8335a6.zip

[Ashokkumar Balasubramanian]

Hi Edgar, 

 

Query 1: I need to process 470 records in the TreeView, but the response time is very slow, +- 1.5' 

 

For your reference, we have returned the checked nodes JSON format data to controller part, else you can pass the checked node id to controller to further processing. Use the below code the resolve the performance delay. 

 

[Script] 

 

var obj = $("#treeView").ejTreeView('instance'); 

var checkedNodes = obj.getCheckedNodes(); 

var checkNodesid = []; 

for (i = 0; i < checkedNodes.length; i++) { 

      checkNodesid.push(checkedNodes[i].id); //get the checked nodes id 

} 

 

Query 2: I can not find how to return successfully, the data controller to take them to the database. Always returns null value. 

 

We suspect that, you have returned the checked node details to controller part. For this case, issue may occur due to improper data type of both JQuery ajax method handling and corresponding method arguments(GetCheckedNodes), so please check whether the corresponding data types are proper or not. For your reference, we have returned the checked nodes id’s to controller part, please check the code below 

 

[Script] 

 

var obj = $("#treeView").ejTreeView('instance'); 

var checkedNodes = obj.getCheckedNodes(); 

var checkNodesid = []; 

for (i = 0; i < checkedNodes.length; i++) { 

      checkNodesid.push(checkedNodes[i].id); //get the checked nodes id 

} 

$.ajax({ 

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

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

       type: "POST", 

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

       dataType: "json" 

}); 

 

[Controller] 

 

public ActionResult GetCheckedNodes(string[] data){ 

       // your code here 

} 

 

Please let us know, if the provided information’s are helpful to achieve your requirement or not? 

 

Regards, 

Ashokkumar B.