Change data source at run time

[Mahesh Machina]

We are trying to bind Treeview on Ajax success function. Is it possible?

can we use JSON as data source for Tree view? and is it possible change data source at run time

[Sowmiya Padmanaban]

Hi Mahesh,

Greetings from Syncfusion support.

We validated your requirement that dynamically change the datasource of TreeView component using ajax request. We have prepared a sample for your requirement. In that sample, we have initially render the TreeView component. During button click, we have to set the ajax request to fetch the Json data and assign the new datasource to the TreeView component.

 

Refer the below code snippet.

<script>

    document.getElementById("element").addEventListener('click', function () {

        var treeInstance = document.getElementById("listdata").ej2_instances[0];

        $.ajax({

            url: '/Home/updateData',

            type: 'POST',

            dataType: 'json',

            success: function (result) {

                // Setting datasource to the TreeView component.

                treeInstance.fields.dataSource = result.data;

                // When calling dataBind() method, changes are immediately reflected in TreeView compoennt.

                treeInstance.dataBind();

            },

            error: function (xhr, status) {

                console.log(status);

            },

        })

    });

script>

 

Refer the below code snippet for controller side.

   public ActionResult updateData()

 

        {

            var data1 = ajaxdata.GetTreeData();

            return Json(new { data = data1 });

        }

        public class ajaxdata

        {

            public static List load = new List();

            public static List GetTreeData()

            {

                List load = new List();

                load.Add(new ajaxdata { id = 1, name = "User", hasChild = true });

                load.Add(new ajaxdata { id = 2, name = "Documents", hasChild = true, expanded = true });

                load.Add(new ajaxdata { id = 3, name = "Programs", hasChild = true, expanded = true });

                load.Add(new ajaxdata { id = 4, pid = 1, name = "Smith" });

});

                return load;

            }

 

 

            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; }

            public bool? selected { get; set; }

            public string spriteCss { get; set; }

 

        }

 

Refer the sample link below.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication11304156024.zip

 

Refer the below link to know about the TreeView component.

 

UG Documentation-https://ej2.syncfusion.com/aspnetmvc/documentation/treeview/getting-started/

 

Demo link-https://ej2.syncfusion.com/aspnetmvc/TreeView/DefaultFunctionalities#/material

 

API Reference-https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Navigations.TreeView~NodeChecking.html

 

Please let us know, if you need any further assistance.

 

 

Regards,

Sowmiya.P

[Mahesh Machina]

Thanks for the quick response.

Data got cleared on dataBind() method, but new data not reflected instead it clears only old data. Please find the log attached

Attachment: TreeView_Databind_7d3f0b6f.zip

[Muthukrishnan Kandasamy]

Hi Mahesh,  

 

We have validated your reported problem in the TreeView control. Unfortunately, we were unable to reproduce your reported problem. We have successfully changed the data source using ajax request in the previously attached sample. 

 

  

For initial rendered data source of TreeView component	When click the button, ajax request is sent to the controller side, it fetches the new data source.  Result contains the new data source fetched from controller side.

  

 

When fetching the data source, we can assign the new data source to the TreeView control. After dataBind, TreeView control contain the updated data source. Please refer the below screen shot. 

  

 

 

Please refer to below screenshot of after updating the new data source. 

 

 

 

 

Can you please ensure the fields settings of TreeView control is properly mapped in your project? 

 

  

If you are still persisting the issue on your side, please share the below details. It will help us to provide you prompt solution. 

 

 

1.     Code snippet used in your application. 

2.     If possible, reproduce the issue in previously attached sample. 

3.     If possible, share the screen recorder video with issue reproducing steps. 

  

  

Please, let us know if you need any further assistance. 

  

 

Regards, 

Muthukrishnan K 

[Mahesh Machina]

we found the solution

Removed hasChild=false,expanded=false,PrentId=0 from the datasource when they are false,Then it worked

New Requirement:

when Parent foldre is checked , sub foldres under that also got selected. How to stop this behaviour

Attachment: TreeView_Subfolders_cd0f3b95.zip

[Sowmiya Padmanaban]

Hi Mahesh,  

 

Query 1 – Datasource is not loaded. 

 

Based on your shared information, we suspect that you have set the parentID of first level node as 0 in your application, that might have caused your reported issue. We would like to let you know that parent id of first level node of TreeView component must be null. Can you ensure this case in your application by setting the parentId as null. And also, you don’t need to remove the other two property (hasChild, expanded) in your application as it won’t cause of your reported problem. In our previous shared sample, we have used this two properties, you can confirm this case with it. 

 

Query 2- Checked node. 

 

In TreeView component, we have provided a autoCheck property. By enabling this property, it checks both parent and child node of TreeView component. The default value of this property is set as true in our TreeView component. If you want to check only the parent node not the child node then you can achieve this requirement, by disabling the autoCheck property. 

 

Refer the below code snippet. 

@Html.EJS().TreeView("listdata").ShowCheckBox(true).AutoCheck(false).Fields(ViewBag.TreeViewFields).Render() 

 

 

Refer the below link to know more about the autoCheck property. 

 

https://ej2.syncfusion.com/aspnetmvc/TreeView/CheckBox#/material 

 

 

https://ej2.syncfusion.com/aspnetmvc/documentation/treeview/check-box/ 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[Mahesh Machina]

Thank you Sowmiya.

We have set Parent Id null, it worked

[Sowmiya Padmanaban]

Hi Mahesh,  

  

Most welcome. We are happy to hear that your problem has been resolved. Please contact us, if you need any help from us. We will happy to assist you. 

  

Regards,  

Sowmiya.P