Refresh the data source in Vue Treegrid component

11 Jun 20249 minutes to read

How to refresh the datasource

You can add/delete the datasource records through an external button. To reflect the datasource changes in Tree Grid, you need to assign the modified data to dataSource property.

Please follow the below steps to refresh the Tree Grid after datasource change.

Step 1:

Add/delete the datasource record by using the following code.

    let customData = {
        TaskID: 99,
        TaskName: "New Data",
        StartDate: new Date("02/03/2017"),
        EndDate: new Date("02/03/2017"),
        Duration: 10
      };

    // Added New Record.
    this.data.unshift(customData);

    // Delete record.
    this.data.splice(selectedRow, 1);

Step 2:

Refresh the Tree Grid after the datasource change by assign the modified data to dataSource property.

      this.data = [...this.data];  // Refresh the TreeGrid.
<template>
    <div id="app">
        <div>
            <ejs-button  iconCss="e-icons e-play-icon" cssClass="e-flat" :isPrimary="true" :isToggle="true" v-on:click="Add">Add</ejs-button>
            <ejs-button  iconCss="e-icons e-play-icon" cssClass="e-flat" :isPrimary="true" :isToggle="true" v-on:click="Delete">Delete</ejs-button>
             <ejs-treegrid :dataSource="data" :treeColumnIndex="1" height='210px' idMapping= 'TaskID' parentIdMapping='parentID' ref="treegrid" :editSettings="editSettings" :toolbar="toolbar">
              <e-columns>
               <e-column field="TaskID" headerText="Task ID" :isPrimaryKey='true' width="70" textAlign="Right"></e-column>
               <e-column field="TaskName" headerText="Task Name" width="100" ></e-column>
               <e-column field="StartDate" headerText="Start Date" format="yMd" width="100" textAlign="Right"></e-column>
               <e-column field="EndDate" headerText="Start Date" format="yMd" width="100" textAlign="Right"></e-column>
               <e-column field="Duration" headerText="Duration" width="90" textAlign="Right"></e-column>
              </e-columns>
            </ejs-treegrid>
          </div>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { TreeGridComponent as EjsTreegrid, Page, Toolbar, Edit,
ColumnDirective as EColumn, ColumnsDirective as EColumns
 } from "@syncfusion/ej2-vue-treegrid";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { projectData } from './datasource.js';

const data = projectData;
const editSettings = { allowAdding:true, allowDeleting:true, allowEditing: true };

const toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];

const Add = () => {
  let customData = {
    TaskID: 99,
    TaskName: "New Data",
    StartDate: new Date("02/03/2017"),
    EndDate: new Date("02/03/2017"),
    Duration: 10
  };
  data.unshift(customData);
  data = [...data];
};

const Delete = () => {
 let selectedRow = treegrid.getSelectedRowIndexes().length;
 let selectedRowIndex = treegrid.getSelectedRowIndexes()[0];
   if (selectedRow > 0) {
     data.splice(selectedRowIndex, 1);
    }
   else {
      alert("No records selected for delete operation");
   }
   data = [...data];
  };

provide('treegrid',  [Page, Edit, Toolbar]);

</script>
<template>
    <div id="app">
        <div>
            <ejs-button  iconCss="e-icons e-play-icon" cssClass="e-flat" :isPrimary="true" :isToggle="true" v-on:click="Add">Add</ejs-button>
            <ejs-button  iconCss="e-icons e-play-icon" cssClass="e-flat" :isPrimary="true" :isToggle="true" v-on:click="Delete">Delete</ejs-button>
             <ejs-treegrid :dataSource="data" :treeColumnIndex="1" height='210px' idMapping= 'TaskID' parentIdMapping='parentID' ref="treegrid" :editSettings="editSettings" :toolbar="toolbar">
              <e-columns>
               <e-column field="TaskID" headerText="Task ID" :isPrimaryKey='true' width="70" textAlign="Right"></e-column>
               <e-column field="TaskName" headerText="Task Name" width="100" ></e-column>
               <e-column field="StartDate" headerText="Start Date" format="yMd" width="100" textAlign="Right"></e-column>
               <e-column field="EndDate" headerText="Start Date" format="yMd" width="100" textAlign="Right"></e-column>
               <e-column field="Duration" headerText="Duration" width="90" textAlign="Right"></e-column>
              </e-columns>
            </ejs-treegrid>
          </div>
    </div>
</template>
<script>

import { TreeGridComponent, Page, Toolbar, Edit, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-treegrid";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { projectData } from './datasource.js';

export default {
name: "App",
components: {
"ejs-button":ButtonComponent,
"ejs-treegrid":TreeGridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,

},

  data() {
    return {
      data: projectData,
      editSettings: { allowAdding:true, allowDeleting:true, allowEditing: true },
      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel']
    };
  },
  methods: {
    Add() {
      let customData = {
        TaskID: 99,
        TaskName: "New Data",
        StartDate: new Date("02/03/2017"),
        EndDate: new Date("02/03/2017"),
        Duration: 10
      };
      this.data.unshift(customData);
      this.data = [...this.data];
    },
    Delete(){
     let selectedRow = this.$refs.treegrid.getSelectedRowIndexes().length;
     let selectedRowIndex = this.$refs.treegrid.getSelectedRowIndexes()[0];
       if (selectedRow > 0) {
         this.data.splice(selectedRowIndex, 1);
        }
       else {
          alert("No records selected for delete operation");
       }
       this.data = [...this.data];
      }
    },
  provide: {
    treegrid: [Page, Edit, Toolbar]
  },
}
</script>