Using Ajax to get JSON data source from webservice; use "loadOnDemand" with webservice

[Sven Grundmann]

Hi,

I am trying to use the following code to fill the treeview clientside, using an ajax data source:

$(document).ready(function () {

$("#treeview").ejTreeView({

loadOnDemand: true,

showCheckbox: true,

fields: {

id: "value",

parentId: "parentid",

text: "name",

hasChild: "haschildren",

dataSource: function (request, response) { getProducts(request, response) },

expanded: "expanded"

}

});

function getProducts(request, response) {

$.ajax({

type: "POST",

url: "/WebServices/AgreementWebService.asmx/GetProducts",

data: "{'request': 'request'}",

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

dataType: "json",

success: function (data) {

response($.map(data.d, function (item) {

return {

id: item.Value,

name: item.Name,

pid: item.ParentId,

hasChild: item.HasChildren

};

}));

},

error: function (xhr, desc, er) {

alert('Error loading products.');

}

});

};

The webservice gets called multiple three times, request is "undefined". I could get the JSON data and then hand it over to the treeview, but that should not be the way to do it.

1. Is there any clientside (javascript) documentation (Except http://help.syncfusion.com/js/treeview/overview and the following pages, which give you barely any information)

2. How can "loadOnDemand" be accomplished using a webservice / AJAX call as data source?

Best regards,

Sven

[Selvamani Sankarappan]

Hi Sven,
Thanks for Contacting Syncfusion Support.

We suspect that the issue might have occurred if the data is not returned and sets to tree view data source properly. We have prepared a simple sample to achieve your requirement in tree view. In this we have rendered the control in success function. Returned data sets to tree view data source property. Please refer to the below code example:

[script]

$(function () {

             $.ajax({

                url: 'data.js',

                datatype: 'json',

                success: function (data) {

                    var obj = JSON.parse(data);

                    //TreeView created

                    $("#treeView").ejTreeView({

                        loadOnDemand: true,

                        fields: { dataSource: obj, id: "id", parentId: "pid", text: "name", hasChild: "hasChild" },

                        beforeExpand: "onBeforeExpand"

                    });

                }

            });

});

Received data in string type we have converted to the object using JSON.parse(). 
Please get the sample from the following location: 
http://www.syncfusion.com/downloads/support/forum/120709/ze/treeview1039240157

In another way, we have process the data using ejDataManager. ejDataManager also supports the JSON or Web Services databinding.

To know more details about the ejDataManager, Please refer the below link:
http://help.syncfusion.com/js/datamanager/overview
To know more details about how to bind treeview to remotedata using ejDataManager, please refer to the below link:
http://help.syncfusion.com/js/treeview/data-binding#remote-data

Please check the given sample comparing with your project. If you are still facing the problem, revert with replication procedure so that we can check our Treeview control functionality and provide you with solution.

Regards,

Selvamani S

[Sven Grundmann]

Hi,

three questions: 

1. How would "loadOnDemand" work with your example, since the treeview does not have a data source to lazy-load data (on demand) from?
   
2. Is there a description of the clientside (javascript) object model of the treeview? (Properties, Methods, Events)
3. Can you provide a working sample using ejDataManager with a WebService returning JSON data?

Best regards, 

Sven

[Selvamani Sankarappan]

Hi Sven

Query1 “How would "loadOnDemand" work with your example, since the treeview does not have a data source to lazy-load data (on demand) from?”

Sorry for the inconvenience,

We have not provided load on demand Treeview sample in our previous update. Now ,we have prepared the sample using ejDataManager with a WebService returning JSON data and also used the loadOnDemand property in below sample. Please get the sample from below location.

http://www.syncfusion.com/downloads/support/forum/120709/ze/WebApi-2088659448

In this sample, we have clicked the parent node, the request is sent to the web service. In web service, based on the parent id child node is returned. Please check with the below code example

[cs]

public IEnumerable<object> Get(ODataQueryOptions opt)

        {

            List<treemodel> treeobj = new List<treemodel>();

            treeobj.Add(new treemodel { id = "1", name = "Local Disk(C)", hasChild = true });

            treeobj.Add(new treemodel { id = "2",pid="1", name = "File1" });

            treeobj.Add(new treemodel { id = "3", pid = "1", name = "File2" });

            var data = treeobj.Where(p => p.pid == "0" || p.pid == null);  // To filter first level data.

            if (opt.Filter != null)  // Filter value comes while we expand a node, then the child data will be filtered based on the filter condition.

            {

                string values = opt.Filter.RawValue.Substring(opt.Filter.RawValue.IndexOf("eq") + 3).Replace("'", String.Empty);

                data = treeobj.Where(p => p.pid == values);

            }

            return data;

        }

Query2 “Is there a description of the clientside (javascript) object model of the treeview? (Properties, Methods, Events)”

To know about the list of properties, methods, and events available in Treeview component please refer the following link:

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

Query 3” Can you provide a working sample using ejDataManager with a WebService returning JSON data?”

Please check the above provided sample. If you need further assistance kindly get back to us and we will be happy to assist you.

Regards,

Selvamani S

---

SG Sven Grundmann October 9, 2015 12:56 PM UTC

Hi Selvamani,

thanks a lot for the example and the link to the API reference. 

I will look into the example as soon as possible and give you feedback.

Meanwhile, you should really link to the API reference in the menu on the left under the "Treeview" node.

Now that I know where to find the reference it is obvious, but...

Best regards,

Sven

---

HP Harikrishnan P Syncfusion Team October 13, 2015 03:58 PM UTC

Hi Sven,

Thanks for your valuable suggestion regarding the documentation. We will consider your feedback. Please get back to us if you need further assistance.

Regards,

HariKrishnan

---

SG Sven Grundmann October 13, 2015 06:28 PM UTC

Hi,

now I am facing the problem that I cannot pre-check checkboxes:

$(treecontrol).ejTreeView({

loadOnDemand: false,

showCheckbox: true,

autoCheck: false,

nodeCheck: function (args) {

writeSummary(treecontrol, summarycontrol, idfield)

},

nodeUncheck: function (args) {

writeSummary(treecontrol, summarycontrol, idfield)

},

fields: {

id: "Value",

parentId: "ParentId",

text: "Name",

isChecked: true,

dataSource: data.d

}

});

I tried isChecked: "IsChecked" (which is the name of the boolean property), and tried isChecked: true , none of them worked...

Best regards, 

Sven

---

SS Selvamani Sankarappan Syncfusion Team October 14, 2015 10:52 AM UTC

Hi Sven,

Thanks for the update.

We have analyzed your code and found that you have not properly mapped the “isChecked” property. So, isChecked property value will be mapped based on the database field’s name and not the Boolean value.   Please refer to the below code example:

[Script]

$("#treeView").ejTreeView({

            loadOnDemand: true,

            showCheckbox: true,

            autoCheck: false,

            nodeCheck: function (args) {

                writeSummary(treeView, summarycontrol, idfield)

            },

            nodeUncheck: function (args) {

                writeSummary(treeView, summarycontrol, idfield)

            },

            fields: {

                dataSource: dataManager,

                id: "id",

                parentId:"pid",

                text: "name",

                hasChild: "hasChild",

                isChecked: "isChecked"

                

            }

        });       

We have prepared the sample based on your requirement. Please get the sample from below location:

http://www.syncfusion.com/downloads/support/forum/120709/ze/WebApi1864328705

You can also achieve your requirement using our existing property “checkedNodes”. If we set the value of the checkedNodes index collection as an array, the given array index position denotes the nodes, and that indexed position is checked while rendering treeview. 

Please refer to the below code example:

[script]

$(function () {

        $("#treeView").ejTreeView({

            loadOnDemand: false,

            showCheckbox: true,

            checkedNodes: [0, 3],

            autoCheck: false,

        });

    });

Regards,

Selvamani S

---

SG Sven Grundmann October 14, 2015 03:59 PM UTC

Hi Selvamani,

as I wrote, I also tried isChecked: "isChecked" but without success. Since your demo was working, I was taking a closer look, finally finding the problem:

Try changing your treecontroller.cs as follows:

           treeobj.Add(new treemodel { id = "1", name = "Local Disk(C)", hasChild = true, isChecked = true});

            treeobj.Add(new treemodel { id = "2",pid="1", name = "File1", isChecked = false});

            treeobj.Add(new treemodel { id = "3", pid = "1", name = "File2", isChecked = true });

            treeobj.Add(new treemodel { id = "3", pid = "1", name = "File3", isChecked = false });

            treeobj.Add(new treemodel { id = "3", pid = "1", name = "File4", isChecked = false });

            treeobj.Add(new treemodel { id = "4", name = "Local Disk(D)", hasChild = true, isChecked = true });

treeobj.Add(new treemodel { id = "5", pid = "4", name = "File1", isChecked = true, hasChild = true });

        treeobj.Add(new treemodel { id = "7", pid = "5", name = "This is it!", isChecked = false });

            treeobj.Add(new treemodel { id = "6", pid = "4", name = "File2", isChecked = false });

    treeobj.Add(new treemodel { id = "3", pid = "1", name = "File3", isChecked = true });

            treeobj.Add(new treemodel { id = "3", pid = "1", name = "File4", isChecked = false });

1. Now open node "Local Disk(D)".
   
2. "File1" is checked as it should be.
3. Now expand node "File1" and see what happens.

Since I did not use loadondemand in my example, nodes were unchecked immediately.

Could you please provide a fix for this bug?

Best regards,

Sven

---

SS Selvamani Sankarappan Syncfusion Team October 15, 2015 12:17 PM UTC

Hi Sven,

Thanks for the update,

We have analyzed your code and suspect that the issue may be caused due to the isChecked value is set to false in the child element. The parent node's check state is updated based on the child nodes' check state. The parent node will get checked, only if all the child node is in checked state. We have modified the sample based on this. Please download the sample from the following location:

http://www.syncfusion.com/downloads/support/forum/120709/ze/WebApi1524321056

To know about Treeview component properties, methods and events, Please refer the below link:

http://help.syncfusion.com/js/api/ejtreeview#members:autocheck

Regards,

Selvamani S

---

SG Sven Grundmann October 15, 2015 01:42 PM UTC

Hi,

this won´t work either...

Let me specifiy the required behaviour:

If autoCheck = false AND autoCheckParentNode = false,

under no circumstances must changing the "checked" state of a node have ANY impact on ANY other node (neither child nor parent).

Neither should adding a child with "checked" state = false change the state for a checked parent.

This works perfectly while checking or unchecking checkboxes manually, or when you use the "checkedNodes" property, but NOT if you use "fields.isChecked" property.

"checkedNodes" seems to work, but unfortunately requires the indexes of the nodes instead of the ids, so we have to get the indices first:

var selectedItems = $(data.d).map(function (index, item) { return item.IsChecked ? index : null }).get();

        $(treecontrol).ejTreeView({

loadOnDemand: false,

showCheckbox: true,

autoCheck: false,

autoCheckParentNode: false,

checkedNodes: selectedItems,

 ...

Works for the moment...

Best regards,

Sven

---

SG Sven Grundmann October 15, 2015 02:22 PM UTC

Hi,

just realized that this also will not work, since the index of nodes in data.d <> index inside tree...

How can I check a node based on its id both easily and efficient?

Best regards,

Sven

---

SS Selvamani Sankarappan Syncfusion Team October 16, 2015 12:31 PM UTC

Hi Sven,

Sorry for the inconvenience,

Query1 “If autoCheck = false AND autoCheckParentNode = false,under no circumstances must changing the "checked" state of a node have ANY impact on ANY other node (neither child nor parent).Neither should adding a child with "checked" state = false change the state for a checked parent.”

By default, “autoCheck” property will be true. If it is set to false, then other nodes (either parent node or child node) checkbox state will not be changed. Only the node which is checked/unchecked will be affected. 

When “autoCheckParentNode” API is set to false, then parent node will not be in indeterminate state for any cases. Even if one child node is in checked state, then parent node will be moved to checked state. This is the behavior of these properties.

Query2 "checkedNodes" seems to work, but unfortunately requires the indexes of the nodes instead of the ids, so we have to get the indices first”

We are able to reproduce the above reported issue. A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents 

Regards,
Selvamani S

[Sven Grundmann]

Hi Selvamani,

thanks a lot for the example and the link to the API reference. 

I will look into the example as soon as possible and give you feedback.

Meanwhile, you should really link to the API reference in the menu on the left under the "Treeview" node.

Now that I know where to find the reference it is obvious, but...

Best regards,

Sven

[Harikrishnan P]

Hi Sven,

Thanks for your valuable suggestion regarding the documentation. We will consider your feedback. Please get back to us if you need further assistance.

Regards,

HariKrishnan

[Sven Grundmann]

Hi,

now I am facing the problem that I cannot pre-check checkboxes:

$(treecontrol).ejTreeView({

loadOnDemand: false,

showCheckbox: true,

autoCheck: false,

nodeCheck: function (args) {

writeSummary(treecontrol, summarycontrol, idfield)

},

nodeUncheck: function (args) {

writeSummary(treecontrol, summarycontrol, idfield)

},

fields: {

id: "Value",

parentId: "ParentId",

text: "Name",

isChecked: true,

dataSource: data.d

}

});

I tried isChecked: "IsChecked" (which is the name of the boolean property), and tried isChecked: true , none of them worked...

Best regards, 

Sven

[Selvamani Sankarappan]

Hi Sven,

Thanks for the update.

We have analyzed your code and found that you have not properly mapped the “isChecked” property. So, isChecked property value will be mapped based on the database field’s name and not the Boolean value.   Please refer to the below code example:

[Script]

$("#treeView").ejTreeView({

            loadOnDemand: true,

            showCheckbox: true,

            autoCheck: false,

            nodeCheck: function (args) {

                writeSummary(treeView, summarycontrol, idfield)

            },

            nodeUncheck: function (args) {

                writeSummary(treeView, summarycontrol, idfield)

            },

            fields: {

                dataSource: dataManager,

                id: "id",

                parentId:"pid",

                text: "name",

                hasChild: "hasChild",

                isChecked: "isChecked"

                

            }

        });       

We have prepared the sample based on your requirement. Please get the sample from below location:

http://www.syncfusion.com/downloads/support/forum/120709/ze/WebApi1864328705

You can also achieve your requirement using our existing property “checkedNodes”. If we set the value of the checkedNodes index collection as an array, the given array index position denotes the nodes, and that indexed position is checked while rendering treeview. 

Please refer to the below code example:

[script]

$(function () {

        $("#treeView").ejTreeView({

            loadOnDemand: false,

            showCheckbox: true,

            checkedNodes: [0, 3],

            autoCheck: false,

        });

    });

Regards,

Selvamani S

[Sven Grundmann]

Hi Selvamani,

as I wrote, I also tried isChecked: "isChecked" but without success. Since your demo was working, I was taking a closer look, finally finding the problem:

Try changing your treecontroller.cs as follows:

           treeobj.Add(new treemodel { id = "1", name = "Local Disk(C)", hasChild = true, isChecked = true});

            treeobj.Add(new treemodel { id = "2",pid="1", name = "File1", isChecked = false});

            treeobj.Add(new treemodel { id = "3", pid = "1", name = "File2", isChecked = true });

            treeobj.Add(new treemodel { id = "3", pid = "1", name = "File3", isChecked = false });

            treeobj.Add(new treemodel { id = "3", pid = "1", name = "File4", isChecked = false });

            treeobj.Add(new treemodel { id = "4", name = "Local Disk(D)", hasChild = true, isChecked = true });

treeobj.Add(new treemodel { id = "5", pid = "4", name = "File1", isChecked = true, hasChild = true });

        treeobj.Add(new treemodel { id = "7", pid = "5", name = "This is it!", isChecked = false });

            treeobj.Add(new treemodel { id = "6", pid = "4", name = "File2", isChecked = false });

    treeobj.Add(new treemodel { id = "3", pid = "1", name = "File3", isChecked = true });

            treeobj.Add(new treemodel { id = "3", pid = "1", name = "File4", isChecked = false });

1. Now open node "Local Disk(D)".
   
2. "File1" is checked as it should be.
3. Now expand node "File1" and see what happens.

Since I did not use loadondemand in my example, nodes were unchecked immediately.

Could you please provide a fix for this bug?

Best regards,

Sven

[Selvamani Sankarappan]

Hi Sven,

Thanks for the update,

We have analyzed your code and suspect that the issue may be caused due to the isChecked value is set to false in the child element. The parent node's check state is updated based on the child nodes' check state. The parent node will get checked, only if all the child node is in checked state. We have modified the sample based on this. Please download the sample from the following location:

http://www.syncfusion.com/downloads/support/forum/120709/ze/WebApi1524321056

To know about Treeview component properties, methods and events, Please refer the below link:

http://help.syncfusion.com/js/api/ejtreeview#members:autocheck

Regards,

Selvamani S

[Sven Grundmann]

Hi,

this won´t work either...

Let me specifiy the required behaviour:

If autoCheck = false AND autoCheckParentNode = false,

under no circumstances must changing the "checked" state of a node have ANY impact on ANY other node (neither child nor parent).

Neither should adding a child with "checked" state = false change the state for a checked parent.

This works perfectly while checking or unchecking checkboxes manually, or when you use the "checkedNodes" property, but NOT if you use "fields.isChecked" property.

"checkedNodes" seems to work, but unfortunately requires the indexes of the nodes instead of the ids, so we have to get the indices first:

var selectedItems = $(data.d).map(function (index, item) { return item.IsChecked ? index : null }).get();

        $(treecontrol).ejTreeView({

loadOnDemand: false,

showCheckbox: true,

autoCheck: false,

autoCheckParentNode: false,

checkedNodes: selectedItems,

 ...

Works for the moment...

Best regards,

Sven

[Sven Grundmann]

Hi,

just realized that this also will not work, since the index of nodes in data.d <> index inside tree...

How can I check a node based on its id both easily and efficient?

Best regards,

Sven

[Selvamani Sankarappan]

Hi Sven,

Sorry for the inconvenience,

Query1 “If autoCheck = false AND autoCheckParentNode = false,under no circumstances must changing the "checked" state of a node have ANY impact on ANY other node (neither child nor parent).Neither should adding a child with "checked" state = false change the state for a checked parent.”

By default, “autoCheck” property will be true. If it is set to false, then other nodes (either parent node or child node) checkbox state will not be changed. Only the node which is checked/unchecked will be affected. 

When “autoCheckParentNode” API is set to false, then parent node will not be in indeterminate state for any cases. Even if one child node is in checked state, then parent node will be moved to checked state. This is the behavior of these properties.

Query2 "checkedNodes" seems to work, but unfortunately requires the indexes of the nodes instead of the ids, so we have to get the indices first”

We are able to reproduce the above reported issue. A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents 

Regards,
Selvamani S