Passing Fancytree SelectedNodes to controller with Ajax in ASP.NET MVC5

Question

I'm trying to use the FancyTree plugin in an ASP.NET MVC5 project to allow users to select items in a treeview, then pass a list of selected objects back to the controller to process.

I have a working treeview in terms of displaying my data, this bit is fine. I'm displaying the treeview with checkboxes. My issue is when trying to pass a list of selected nodes from the treeview back to the controller using Ajax.

This is the initial jquery that initialises the treeview

        $(function () {

            $("#SiteID").text('Site ID : ' + $("#Sites option:selected").val());

            $("#tree").fancytree({
                selectMode: 3,
                checkbox: true,
                source: {
                    url: "@Url.Action("GetOLTs", "MNT")",
                    data: { SiteID: $("#Sites option:selected").val() },
                    cache: false
                }
            });
        });

This is the button event that I am using to try and submit a list of selected nodes :-

$("#submit-button").on('click', function () {
    var Nodes = $('#tree').fancytree('getTree').getSelectedNodes();

    $.ajax({
        url: '@Url.Action("SubmitData", "MNT")',
        method: 'POST',
        data: { TreeData: Nodes } 
    });
});

getSelectedNodes() seems to be selecting the correct nodes (I can see the value of the Nodes variable in an alert) and creates a comma separated list which I am assigning to "Nodes".

When I click the button I get the following error :-

Uncaught RangeError: Maximum call stack size exceeded

I'm a bit lost as to what this is telling me and how to pass the data to the controller. Appreciate any help.

Answer 1

The method

tree.getSelectedNodes()

returns an array of FancytreeNode objects. You need to convert this to plain objects, so the $.ajax function can serialize it.

For example iterate over the Array and use node.toDict():

var selNodes = $("#tree").fancytree("getTree").getSelectedNodes();
var selData = $.map(selNodes, function(n){
  return n.toDict();
});