Modules in Vue TreeGrid component

19 May 202618 minutes to read

Syncfusion Vue TreeGrid modules help optimize your application’s bundle size by including only the features you need. To enable a specific TreeGrid feature, import and inject the corresponding Feature Module into your TreeGrid configuration. The available TreeGrid Feature Modules include:

Feature Module Description
Paging Page Inject this module to use paging feature.
Sorting Sort Inject this module to use sorting feature.
Filtering Filter Inject this module to use filtering feature.
Editing Edit Inject this module to use editing feature.
Aggregates Aggregate Inject this module to use aggregate feature.
Column Chooser ColumnChooser Inject this module to use column chooser feature.
Column Menu ColumnMenu Inject this module to use column menu feature.
Command Column CommandColumn Inject this module to use command column feature.
Context Menu ContextMenu Inject this module to use context menu feature.
Detail Row DetailRow Inject this module to use detail template feature.
Foreign Key ForeignKey Inject this module to use foreign key feature.
Resize Resize Inject this module to use resize feature.
Reordering Reorder Inject this module to use reorder feature.
Row Drag and Drop RowDD Inject this module to use row drag and drop feature.
Virtual Scrolling VirtualScroll Inject this module to use virtual scrolling feature.
Infinite Scrolling InfiniteScroll Inject this module to use infinite scrolling feature.
Toolbar Toolbar Inject this module to use toolbar feature.
Excel Export ExcelExport Inject this module to use excel export feature.
PDF Export PdfExport Inject this module to use PDF export feature.

Enabling basic features

The following example demonstrates how to enable basic features such as Paging, Sorting, Filtering, Toolbar and Editing by importing required modules from @syncfusion/ej2-vue-treegrid and injecting them into the treegrid component.

<template>
    <div id="app">
        <ejs-treegrid :dataSource="data" :treeColumnIndex='1' childMapping='subtasks' :allowPaging='true' :allowSorting='true' :allowFiltering='true'
          :pageSettings='pageSettings' :filterSettings='filterSettings' :editSettings='editSettings' :toolbar='toolbar'>
          <e-columns>
                <e-column field='TaskID' headerText='Task ID' :isPrimaryKey='true' textAlign='Right' :validationRules='taskIDRules' width=150></e-column>
                <e-column field='TaskName' headerText='Task Name' :validationRules='taskNameRules' width=170></e-column>
                <e-column field='StartDate' headerText='Start Date' textAlign='Right' editType= 'datetimepickeredit' format='yMd' width=130></e-column>
                <e-column field='EndDate' headerText='End Date' textAlign='Right' editType= 'datetimepickeredit' format='yMd' width=130></e-column>
                <e-column field='Duration' headerText='Duration' textAlign='Right'  editType='numericedit' width=100></e-column>
            </e-columns>
        </ejs-treegrid>
    </div>
</template>
<script setup>
import { provide } from "vue";
// Import the required grid modules from the grid package
import { TreeGridComponent as EjsTreegrid, ColumnsDirective as EColumns, ColumnDirective as EColumn, Page, Sort, Filter, Edit, Toolbar } from "@syncfusion/ej2-vue-treegrid";
// Import Grid data from external file
import { sampleData } from "./data";
const data = sampleData;
const pageSettings = { pageSize: 6 };
const filterSettings = { type: "CheckBox" };
const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
const toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
const taskIDRules = {required: true, number: true};
const taskNameRules = { required: true };
// Inject required Grid features
provide('treegrid', [Page, Sort, Filter, Edit, Toolbar]);

</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-calendars/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
@import "../node_modules/@syncfusion/ej2-grids/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-treegrid/styles/material3.css";
</style>
<template>
    <div id="app">
        <ejs-treegrid :dataSource="data" :treeColumnIndex='1' childMapping='subtasks' :allowPaging='true' :allowSorting='true' :allowFiltering='true' 
          :pageSettings='pageSettings' :filterSettings='filterSettings' :editSettings='editSettings' :toolbar='toolbar'>
          <e-columns>
                <e-column field='TaskID' headerText='Task ID' :isPrimaryKey='true' textAlign='Right' :validationRules='taskIDRules' width=150></e-column>
                <e-column field='TaskName' headerText='Task Name' :validationRules='taskNameRules' width=170></e-column>
                <e-column field='StartDate' headerText='Start Date' textAlign='Right' editType= 'datetimepickeredit' format='yMd' width=130></e-column>
                <e-column field='EndDate' headerText='End Date' textAlign='Right' editType= 'datetimepickeredit' format='yMd' width=130></e-column>
                <e-column field='Duration' headerText='Duration' textAlign='Right'  editType='numericedit' width=100></e-column>
            </e-columns>
        </ejs-treegrid>
    </div>
</template>
<script>
// Import the required grid modules from the grid package
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Page, Sort, Filter, Edit, Toolbar } from "@syncfusion/ej2-vue-treegrid";
// Import Grid data from external file
import { sampleData } from "./data";

export default {
name: "App",
components: {
"ejs-treegrid":TreeGridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
  },
  data() {
    return {
      data: sampleData,
      pageSettings: { pageSize: 6 },
      filterSettings: { type: "CheckBox" },
      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
      taskIDRules: {required: true, number: true},
      taskNameRules: { required: true },
    };
  },
  // Inject required Grid features
  provide: {
    treegrid: [Page, Sort, Filter, Edit, Toolbar]
  }
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-calendars/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
@import "../node_modules/@syncfusion/ej2-grids/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-treegrid/styles/material3.css";
</style>
export const sampleData = [
{
    TaskID: 1, TaskName: 'Planning', StartDate: new Date('02/04/2025'), EndDate: new Date('02/07/2025'), Duration: 4,
    subtasks: [
        { TaskID: 2, TaskName: 'Plan timeline', StartDate: new Date('02/04/2025'), EndDate: new Date('02/07/2025'), Duration: 4 },
        { TaskID: 3, TaskName: 'Plan budget', StartDate: new Date('02/04/2025'), EndDate: new Date('02/07/2025'), Duration: 4 },
        { TaskID: 4, TaskName: 'Allocate resources', StartDate: new Date('02/04/2025'), EndDate: new Date('02/07/2025'), Duration: 4 },
        { TaskID: 5, TaskName: 'Planning complete', StartDate: new Date('02/07/2025'), EndDate: new Date('02/07/2025'), Duration: 1 },
    ],
},
{
    TaskID: 6, TaskName: 'Design', StartDate: new Date('02/10/2025'), EndDate: new Date('02/14/2025'), Duration: 5,
    subtasks: [
        { TaskID: 7, TaskName: 'Software Specification', StartDate: new Date('02/10/2025'), EndDate: new Date('02/12/2025'), Duration: 3 },
        { TaskID: 8, TaskName: 'Develop prototype', StartDate: new Date('02/10/2025'), EndDate: new Date('02/12/2025'), Duration: 3 },
        { TaskID: 9, TaskName: 'Get approval from customer', StartDate: new Date('02/13/2025'), EndDate: new Date('02/14/2025'), Duration: 2 },
        { TaskID: 10, TaskName: 'Design Documentation', StartDate: new Date('02/13/2025'), EndDate: new Date('02/14/2025'), Duration: 2 },
        { TaskID: 11, TaskName: 'Design complete', StartDate: new Date('02/14/2025'), EndDate: new Date('02/14/2025'), Duration: 1 },
    ],
},
{
    TaskID: 12, TaskName: 'Implementation Phase', StartDate: new Date('02/17/2025'), EndDate: new Date('02/28/2025'), Duration: 12,
    subtasks: [
        {
            TaskID: 13, TaskName: 'Phase 1', StartDate: new Date('02/17/2025'), EndDate: new Date('02/27/2025'), Duration: 11,
            subtasks: [
                {
                    TaskID: 14, TaskName: 'Implementation Module 1',
                    StartDate: new Date('02/17/2025'), EndDate: new Date('02/27/2025'), Duration: 11,
                    subtasks: [
                        { TaskID: 15, TaskName: 'Development Task 1', StartDate: new Date('02/17/2025'), EndDate: new Date('02/19/2025'), Duration: 3 },
                        { TaskID: 16, TaskName: 'Development Task 2', StartDate: new Date('02/17/2025'), EndDate: new Date('02/19/2025'), Duration: 3 },
                        { TaskID: 17, TaskName: 'Testing', StartDate: new Date('02/20/2025'), EndDate: new Date('02/21/2025'), Duration: 2 },
                        { TaskID: 18, TaskName: 'Bug fix', StartDate: new Date('02/24/2025'), EndDate: new Date('02/25/2025'), Duration: 2 },
                        { TaskID: 19, TaskName: 'Customer review meeting', StartDate: new Date('02/26/2025'), EndDate: new Date('02/27/2025'), Duration: 2 },
                        { TaskID: 20, TaskName: 'Phase 1 complete', StartDate: new Date('02/27/2025'), EndDate: new Date('02/27/2025'), Duration: 1 },
                    ],
                },
            ],
        },
        {
            TaskID: 21, TaskName: 'Phase 2', StartDate: new Date('02/17/2025'), EndDate: new Date('02/28/2025'), Duration: 12,
            subtasks: [
                {
                    TaskID: 22, TaskName: 'Implementation Module 2', StartDate: new Date('02/17/2025'), EndDate: new Date('02/28/2025'), Duration: 12,
                    subtasks: [
                        { TaskID: 23, TaskName: 'Development Task 1', StartDate: new Date('02/17/2025'), EndDate: new Date('02/20/2025'), Duration: 4 },
                        { TaskID: 24, TaskName: 'Development Task 2', StartDate: new Date('02/17/2025'), EndDate: new Date('02/20/2025'), Duration: 4 },
                        { TaskID: 25, TaskName: 'Testing', StartDate: new Date('02/21/2025'), EndDate: new Date('02/24/2025'), Duration: 2 },
                        { TaskID: 26, TaskName: 'Bug fix', StartDate: new Date('02/25/2025'), EndDate: new Date('02/26/2025'), Duration: 2 },
                        { TaskID: 27, TaskName: 'Customer review meeting', StartDate: new Date('02/27/2025'), EndDate: new Date('02/28/2025'), Duration: 2 },
                        { TaskID: 28, TaskName: 'Phase 2 complete', StartDate: new Date('02/28/2025'), EndDate: new Date('02/28/2025'), Duration: 1 },
                    ],
                },
            ],
        },
        {
            TaskID: 29, TaskName: 'Phase 3', StartDate: new Date('02/17/2025'), EndDate: new Date('02/27/2025'), Duration: 11,
            subtasks: [
                {
                    TaskID: 30, TaskName: 'Implementation Module 3',
                    StartDate: new Date('02/17/2025'), EndDate: new Date('02/27/2025'), Duration: 11,
                    subtasks: [
                        { TaskID: 31, TaskName: 'Development Task 1', StartDate: new Date('02/17/2025'), EndDate: new Date('02/19/2025'), Duration: 3 },
                        { TaskID: 32, TaskName: 'Development Task 2', StartDate: new Date('02/17/2025'), EndDate: new Date('02/19/2025'), Duration: 3 },
                        { TaskID: 33, TaskName: 'Testing', StartDate: new Date('02/20/2025'), EndDate: new Date('02/21/2025'), Duration: 2 },
                        { TaskID: 34, TaskName: 'Bug fix', StartDate: new Date('02/24/2025'), EndDate: new Date('02/25/2025'), Duration: 2 },
                        { TaskID: 35, TaskName: 'Customer review meeting', StartDate: new Date('02/26/2025'), EndDate: new Date('02/27/2025'), Duration: 2 },
                        { TaskID: 36, TaskName: 'Phase 3 complete', StartDate: new Date('02/27/2025'), EndDate: new Date('02/27/2025'), Duration: 1 },
                    ],
                },
            ],
        },
    ],
},
];