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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to access model datasource of Treeview from javascript

Thread ID:

Created:

Updated:

Platform:

Replies:

121208 Nov 18,2015 08:50 PM UTC Nov 20,2015 08:47 AM UTC ASP.NET MVC 3
loading
Tags: TreeView
Darryl Mataya
Asked On November 18, 2015 08:50 PM UTC

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 [Syncfusion]
Replied On November 19, 2015 02:24 PM UTC

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
Replied On November 19, 2015 08:18 PM UTC

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 [Syncfusion]
Replied On November 20, 2015 08:47 AM UTC

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


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.

Warning Icon 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.Close Icon

;