How to access model datasource of Treeview from javascript

[Darryl Mataya]

I am using a Treeview control on a cshtml form, and I want to capture the contents of the original model along with checkbox status changes when the form is submitted.

I have a typical treeviewData model being used as the class for one of the viewmodel properties:

 public class treeviewData

    {

        public int Id { get; set; }

        public int Pid { get; set; }

        public string Name { get; set; }

        public bool HasChild { get; set; }

        public bool Expanded { get; set; }

        public bool IsChecked { get; set; }

        // Hold guid id for this node

        public string Value { get; set; } 

    }

Cshtml:

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

        .TreeViewFields(s => s.Datasource((IEnumerable<treeviewData>)Model.PermissionsData).Id("Id").ParentId("Pid").Text("Name").HasChild("HasChild").IsChecked("IsChecked").Expanded("Expanded"))

        .ShowCheckbox(true) 

        .AutoCheck(false))

I am trying to capture the original view model data along with changes to the checkbox status before sending back to the controller. I don't want to post back on any single checkbox change, I want to wait until the entire form is submitted. Part of the reason for this is I need to know the original Guid of the node, which is stored in the Value property, in order for the controller to know what changed.

So I am attempting to find a method or property which will give me these updated values. So far the closest i've gotten is to try and use a getTreeData method I read about in the js documentation, as this code snip shows:

function showValues() {

      var treeObj = $("#tree").data("ejTreeView");

      var tredata = treeObj.getTreeData();

    $( "#results" ).text( tredata );

  }

But I am getting an "object does not support property or method" javascript error on the getTreeData method. Is there a way to do this with the current control?

Thanks.

[Francis Paul Antony Raj]

Hi Darryl,

Thanks for contacting Syncfusion support.

We have analyzed your query. Currently there is no direct option to retrieve the updated details of treeview after check/uncheck the nodes in the treeview. The getTreeData() method is used to get the updated datasource of treeview after performing drag and drop, node editing, adding and removing the node. But we can achieve this requirement manually using the getNodeCount(), getNode() methods as mentioned in the following code snippet. Please refer it.

<script>

$('#submit').click(function () {

        tree = $("#tree").data("ejTreeView");

        var treeobj = [];

        for (i = 1; i <= tree.getNodeCount(); i++) {//getNodeCount() returns the total number of nodes

            treeobj.push(tree.getNode($("#" + i))); // get the details of individual node       

        }

        $('#myForm').append('<input type="hidden" name="Nodedetails" value="'+treeobj+'">')

    }); //treeobj contains array of objects of each node

</script>

 

You can use getCheckedNodes() method for getting the list of checked elements.

To know more about treeview component properties, methods, and events, please refer to the below link:

http://help.syncfusion.com/js/api/ejtreeview

If you need any further assistance, kindly get back to us and we will be happy to help you.

Regards,

Francis Paul A

[Darryl Mataya]

Thank you Francis Paul, 

I was able to use the getCheckedNodes method and compare to the original list to determine what changes had been made.

-Darryl Mataya

[Francis Paul Antony Raj]

Hi Darryl,

Thanks for your update. If you need further assistance, please get back to us and we will be happy to help you.

 
Regards,

Francis Paul A