Treeview with the different remoteData

[Franky Lee]

Hi teams,

I have the code about the treeview from the remotedata,

But I can't obtain new treeview from another remotedata when I choose it.

this is my code

How can I obtain a new remotedate and update the treeview?

Thanks a lot.

<template>

<button @click=” treeviewSelected()></button>

                    <div>

                        <ejs-treeview

                          id="main-menubar"

                          :fields='fields'

                          ref="treeviewInstance"

                          :selectedNodes="selectedNodes"

                          :nodeSelected="nodeSelected"></ejs-treeview>

                    </div>

</template>

<script>

export default Vue.extend({

    data: function() {

        let remoteData = new DataManager({

            url: 'http://localhost:8080/ '+this.$store.state.userid,          

            headers: [

                {

                    "Content-Type": "application/json",

                    Accept: "application/json",

                    Authorization: "Bearer" +" "+ this.$store.state.id_token

                }

            ],

            adaptor: new WebApiAdaptor ,

            crossDomain: true,

        })

        return {

            fields: { dataSource: remoteData,  id: 'prog_id', text: 'prog_name'},    

                }

        Method:

        treeviewSelected() {

            this.remoteData = new DataManager({

                url: 'http://localhost:8080/ '+ another.userid,          

                headers: [

                    {

                        "Content-Type": "application/json",

                        Accept: "application/json",

                        Authorization: "Bearer" +" "+ this.$store.state.id_token

                    }

                ],

                adaptor: new WebApiAdaptor ,

                crossDomain: true,

            })       

</script>

 

[Sowmiya Padmanaban]

Hi Franky Lee,  

 

Greetings from Syncfusion support. 

 

We have checked your attached code snippet with TreeView component. We suspect that your reported problem may be occurred due you are updating the returned data to the datasource variable. To resolve this, you need to update the returned data to the fields settings of TreeView component. 

 

Refer the below code snippet 

 

Incorrect ways to update datasource

Correct way to update datasource

this.data = new DataManager({              url: 'https://localhost:44356/Home/change_datasource',              adaptor: new WebApiAdaptor,              crossDomain: true,              offline:true               })    treeObj.fields.dataSource = new DataManager({              url: 'https://localhost:44356/Home/change_datasource',              adaptor: new WebApiAdaptor,              crossDomain: true,              offline:true          })

treeObj.fields = {dataSource:new DataManager({              url: 'https://localhost:44356/Home/change_datasource',              adaptor: new WebApiAdaptor,              crossDomain: true,              offline:true               }),               id:'prog_id',               text:'prog_name',               parentID:'pid',               hasChildren:'hasChild' }

. 

 

For your reference, we have prepared a sample for your requirement. In this sample, we have rendered the TreeView with remote data. When click the button, it triggers the another request to fetch the data from controller side. 

 

<ejs-button id="add" class="e-primary" v-on:click.native="treeviewSelected"  >Change Datasource</ejs-button> 

<div class="control_wrapper"> 

        <ejs-treeview id="main-menubar" :fields="fields" ref="treeviewInstance"></ejs-treeview> 

    </div> 

export default { 

  name: 'app', 

  data () {   

    var data = new DataManager({ 

            url: 'https://localhost:44356/Home/Get', 

            adaptor: new WebApiAdaptor, 

            crossDomain: true, 

            offline:true 

             }); 

    return { 

      fields: { 

        dataSource: data,  id: 'prog_id', text: 'prog_name', parentID: 'pid', hasChildren: 'hasChild' 

      } 

    } 

},  

methods: { 

    treeviewSelected : function(args) { 

        var treeObj = document.getElementById('main-menubar').ej2_instances[0]; 

        treeObj.fields = {dataSource:new DataManager({ 

            url: 'https://localhost:44356/Home/change_datasource', 

            adaptor: new WebApiAdaptor, 

            crossDomain: true, 

            offline:true 

             }), 

             id:'prog_id', 

             text:'prog_name', 

             parentID:'pid', 

             hasChildren:'hasChild' } 

    } 

} 

} 

 

Refer the below sample and Server side. 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/157560/ze/TreeView_with_remote_data858493046.zip 

 

Server side to fetch the datasource for TreeView component:  https://www.syncfusion.com/downloads/support/forum/157560/ze/Controller_data-738414842.zip 

 

Note: Run the service side and refer the localhost URL in sample. 

 

To know more about the TreeView component, refer the below link. 

 

UG Documentation	https://ej2.syncfusion.com/vue/documentation/treeview/getting-started/
Demo link	https://ej2.syncfusion.com/vue/demos/#/material/treeview/default.html
Remote data	https://ej2.syncfusion.com/vue/documentation/treeview/data-binding/#remote-data
API reference	https://ej2.syncfusion.com/vue/documentation/api/treeview/

 

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

 

Regards,  

Sowmiya.P