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.
Unfortunately, activation email could not send to your email. Please try again.

How to post checked Nodes for TreeView to Controller

Thread ID:

Created:

Updated:

Platform:

Replies:

130610 May 20,2017 02:53 PM Jul 14,2017 08:45 AM ASP.NET MVC 5
loading
Tags: TreeView
Sam
Asked On May 20, 2017 02:53 PM

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 [Syncfusion]
Replied On May 22, 2017 08:13 AM

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. 
 
 
Please let us know, if you have any other concerns on this. 
 
Regards 
Ashokkumar B. 


Sam
Replied On May 23, 2017 09:28 PM

Thank you.  That will work.

Ashokkumar Balasubramanian [Syncfusion]
Replied On May 24, 2017 12:06 AM

Hi Sam, 
 
Most Welcome. 
 
Please let us know if you need any further assistance. 
 
Regards, 
Ashokkumar B. 


Edgar H Velandia M
Replied On July 13, 2017 03:20 AM

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 [Syncfusion]
Replied On July 14, 2017 08:45 AM

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. 


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.

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.

;