Search results

Cell

29 Nov 2022 / 3 minutes to read

Customize cell styles

The appearance of cells can be customized by using the queryCellInfo event. The queryCellInfo event triggers for every cell. In that event handler, you can get QueryCellInfoEventArgs that contains the details of the cell.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
<div id="app">
        <ejs-treegrid :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' height='300px' :queryCellInfo='customiseCell'>
            <e-columns>
                <e-column field='taskID' headerText='Task ID' width=90 textAlign='Right' ></e-column>
                <e-column field='taskName' headerText='Task Name' width=180></e-column>
                <e-column field='duration' headerText='Duration' width=80 textAlign='Right'></e-column>
                <e-column field='progress' headerText='Progress' width=80 textAlign='Right'></e-column>
            </e-columns>
        </ejs-treegrid>
</div>
</template>
<script>
import Vue from "vue";
import { TreeGridPlugin } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";

Vue.use(TreeGridPlugin);

export default {
  data() {
    return {
      data: sampleData,
    };
  },
    methods: {
    customiseCell: function(args) {
      if (args.column.field === 'progress' && +args.cell.innerHTML > 90 && +args.cell.innerHTML <= 100){
        args.cell.setAttribute('style', 'background-color:#336c12;color:white;');
    } else if (+args.cell.innerHTML > 20 && args.column.field === 'progress') {
        args.cell.setAttribute('style', 'background-color:#7b2b1d;color:white;');
    }
    }
  }
}
</script>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.sampleData = [
        {
            taskID: 1,
            taskName: 'Planning',
            startDate: new Date('02/03/2017'),
            endDate: new Date('02/07/2017'),
            progress: 100,
            duration: 5,
            priority: 'Normal',
            approved: false,
            subtasks: [
                { taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'),
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Normal', approved: false },
                { taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'),
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Low', approved: true },
                { taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'),
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Critical', approved: false },
                { taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'),
                    endDate: new Date('02/07/2017'), duration: 0, progress: 0, priority: 'Low', approved: true }
            ]
        },
        {
            taskID: 6,
            taskName: 'Design',
            startDate: new Date('02/10/2017'),
            endDate: new Date('02/14/2017'),
            duration: 3,
            progress: 86,
            priority: 'High',
            approved: false,
            subtasks: [
                { taskID: 7, taskName: 'Software Specification', startDate: new Date('02/10/2017'),
                    endDate: new Date('02/12/2017'), duration: 3, progress: 60, priority: 'Normal', approved: false },
                { taskID: 8, taskName: 'Develop prototype', startDate: new Date('02/10/2017'),
                    endDate: new Date('02/12/2017'), duration: 3, progress: 100, priority: 'Critical', approved: false },
                { taskID: 9, taskName: 'Get approval from customer', startDate: new Date('02/13/2017'),
                    endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'Low', approved: true },
                { taskID: 10, taskName: 'Design Documentation', startDate: new Date('02/13/2017'),
                    endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'High', approved: true },
                { taskID: 11, taskName: 'Design complete', startDate: new Date('02/14/2017'),
                    endDate: new Date('02/14/2017'), duration: 0, progress: 0, priority: 'Normal', approved: true }
            ]
        },
        {
            taskID: 12,
            taskName: 'Implementation Phase',
            startDate: new Date('02/17/2017'),
            endDate: new Date('02/27/2017'),
            priority: 'Normal',
            approved: false,
            duration: 11,
            progress: 66,
            subtasks: [
                {
                    taskID: 13,
                    taskName: 'Phase 1',
                    startDate: new Date('02/17/2017'),
                    endDate: new Date('02/27/2017'),
                    priority: 'High',
                    approved: false,
                    progress: 50,
                    duration: 11,
                    subtasks: [{
                        taskID: 14,
                        taskName: 'Implementation Module 1',
                        startDate: new Date('02/17/2017'),
                        endDate: new Date('02/27/2017'),
                        priority: 'Normal',
                        duration: 11,
                        progress: 10,
                        approved: false,
                        subtasks: [
                            { taskID: 15, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'High', approved: false },
                            { taskID: 16, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true },
                            { taskID: 17, taskName: 'Testing', startDate: new Date('02/20/2017'),
                                endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true },
                            { taskID: 18, taskName: 'Bug fix', startDate: new Date('02/24/2017'),
                                endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'Critical', approved: false },
                            { taskID: 19, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'),
                                endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
                            { taskID: 20, taskName: 'Phase 1 complete', startDate: new Date('02/27/2017'),
                                endDate: new Date('02/27/2017'), duration: 0, progress: '50', priority: 'Low', approved: true }
    
                        ]
                    }]
                },
                {
                    taskID: 21,
                    taskName: 'Phase 2',
                    startDate: new Date('02/17/2017'),
                    endDate: new Date('02/28/2017'),
                    priority: 'High',
                    approved: false,
                    duration: 12,
                    progress: 60,
                    subtasks: [{
                        taskID: 22,
                        taskName: 'Implementation Module 2',
                        startDate: new Date('02/17/2017'),
                        endDate: new Date('02/28/2017'),
                        priority: 'Critical',
                        approved: false,
                        duration: 12,
                        progress: 90,
                        subtasks: [
                            { taskID: 23, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Normal', approved: true },
                            { taskID: 24, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Critical', approved: true },
                            { taskID: 25, taskName: 'Testing', startDate: new Date('02/21/2017'),
                                endDate: new Date('02/24/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
                            { taskID: 26, taskName: 'Bug fix', startDate: new Date('02/25/2017'),
                                endDate: new Date('02/26/2017'), duration: 2, progress: '0', priority: 'Low', approved: false },
                            { taskID: 27, taskName: 'Customer review meeting', startDate: new Date('02/27/2017'),
                                endDate: new Date('02/28/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true },
                            { taskID: 28, taskName: 'Phase 2 complete', startDate: new Date('02/28/2017'),
                                endDate: new Date('02/28/2017'), duration: 0, progress: '50', priority: 'Normal', approved: false }
    
                        ]
                    }]
                },
    
                {
                    taskID: 29,
                    taskName: 'Phase 3',
                    startDate: new Date('02/17/2017'),
                    endDate: new Date('02/27/2017'),
                    priority: 'Normal',
                    approved: false,
                    duration: 11,
                    progress: 30,
                    subtasks: [{
                        taskID: 30,
                        taskName: 'Implementation Module 3',
                        startDate: new Date('02/17/2017'),
                        endDate: new Date('02/27/2017'),
                        priority: 'High',
                        approved: false,
                        duration: 11,
                        progress: 60,
                        subtasks: [
                            { taskID: 31, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true },
                            { taskID: 32, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Normal', approved: false },
                            { taskID: 33, taskName: 'Testing', startDate: new Date('02/20/2017'),
                                endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true },
                            { taskID: 34, taskName: 'Bug fix', startDate: new Date('02/24/2017'),
                                endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
                            { taskID: 35, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'),
                                endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true },
                            { taskID: 36, taskName: 'Phase 3 complete', startDate: new Date('02/27/2017'),
                                endDate: new Date('02/27/2017'), duration: 0, progress: '50', priority: 'Critical', approved: false },
                        ]
                    }]
                }
            ]
        }
    ];    
    exports.htmlData = [
        {
            taskID: '<span>1</span>',
            taskName: 'Planning',
            startDate: new Date('02/03/2017'),
            endDate: new Date('02/07/2017'),
            progress: 100,
            duration: 5,
            priority: 'Normal',
            approved: false,
            subtasks: [
                { taskID: '<span>2</span>', taskName: 'Plan timeline', startDate: new Date('02/03/2017'),
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Normal', approved: false },
                { taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'),
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Low', approved: true },
                { taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'),
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Critical', approved: false },
                { taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'),
                    endDate: new Date('02/07/2017'), duration: 0, progress: 0, priority: 'Low', approved: true }
            ]
        },
        {
            taskID: '<span>6</span>',
            taskName: 'Design',
            startDate: new Date('02/10/2017'),
            endDate: new Date('02/14/2017'),
            duration: 3,
            progress: 86,
            priority: 'High',
            approved: false,
            subtasks: [
                { taskID: 7, taskName: 'Software Specification', startDate: new Date('02/10/2017'),
                    endDate: new Date('02/12/2017'), duration: 3, progress: 60, priority: 'Normal', approved: false },
                { taskID: 8, taskName: 'Develop prototype', startDate: new Date('02/10/2017'),
                    endDate: new Date('02/12/2017'), duration: 3, progress: 100, priority: 'Critical', approved: false },
                { taskID: '<span>9</span>', taskName: 'Get approval from customer', startDate: new Date('02/13/2017'),
                    endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'Low', approved: true },
                { taskID: 10, taskName: 'Design Documentation', startDate: new Date('02/13/2017'),
                    endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'High', approved: true },
                { taskID: 11, taskName: 'Design complete', startDate: new Date('02/14/2017'),
                    endDate: new Date('02/14/2017'), duration: 0, progress: 0, priority: 'Normal', approved: true }
            ]
        },
        {
            taskID: 12,
            taskName: 'Implementation Phase',
            startDate: new Date('02/17/2017'),
            endDate: new Date('02/27/2017'),
            priority: 'Normal',
            approved: false,
            duration: 11,
            progress: 66,
            subtasks: [
                {
                    taskID: 13,
                    taskName: 'Phase 1',
                    startDate: new Date('02/17/2017'),
                    endDate: new Date('02/27/2017'),
                    priority: 'High',
                    approved: false,
                    progress: 50,
                    duration: 11,
                    subtasks: [{
                        taskID: 14,
                        taskName: 'Implementation Module 1',
                        startDate: new Date('02/17/2017'),
                        endDate: new Date('02/27/2017'),
                        priority: 'Normal',
                        duration: 11,
                        progress: 10,
                        approved: false,
                        subtasks: [
                            { taskID: 15, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'High', approved: false },
                            { taskID: 16, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true },
                            { taskID: 17, taskName: 'Testing', startDate: new Date('02/20/2017'),
                                endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true },
                            { taskID: 18, taskName: 'Bug fix', startDate: new Date('02/24/2017'),
                                endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'Critical', approved: false },
                            { taskID: 19, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'),
                                endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
                            { taskID: 20, taskName: 'Phase 1 complete', startDate: new Date('02/27/2017'),
                                endDate: new Date('02/27/2017'), duration: 0, progress: '50', priority: 'Low', approved: true }
    
                        ]
                    }]
                },
                {
                    taskID: 21,
                    taskName: 'Phase 2',
                    startDate: new Date('02/17/2017'),
                    endDate: new Date('02/28/2017'),
                    priority: 'High',
                    approved: false,
                    duration: 12,
                    progress: 60,
                    subtasks: [{
                        taskID: 22,
                        taskName: 'Implementation Module 2',
                        startDate: new Date('02/17/2017'),
                        endDate: new Date('02/28/2017'),
                        priority: 'Critical',
                        approved: false,
                        duration: 12,
                        progress: 90,
                        subtasks: [
                            { taskID: 23, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Normal', approved: true },
                            { taskID: 24, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Critical', approved: true },
                            { taskID: 25, taskName: 'Testing', startDate: new Date('02/21/2017'),
                                endDate: new Date('02/24/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
                            { taskID: 26, taskName: 'Bug fix', startDate: new Date('02/25/2017'),
                                endDate: new Date('02/26/2017'), duration: 2, progress: '0', priority: 'Low', approved: false },
                            { taskID: 27, taskName: 'Customer review meeting', startDate: new Date('02/27/2017'),
                                endDate: new Date('02/28/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true },
                            { taskID: 28, taskName: 'Phase 2 complete', startDate: new Date('02/28/2017'),
                                endDate: new Date('02/28/2017'), duration: 0, progress: '50', priority: 'Normal', approved: false }
    
                        ]
                    }]
                },
    
                {
                    taskID: 29,
                    taskName: 'Phase 3',
                    startDate: new Date('02/17/2017'),
                    endDate: new Date('02/27/2017'),
                    priority: 'Normal',
                    approved: false,
                    duration: 11,
                    progress: 30,
                    subtasks: [{
                        taskID: 30,
                        taskName: 'Implementation Module 3',
                        startDate: new Date('02/17/2017'),
                        endDate: new Date('02/27/2017'),
                        priority: 'High',
                        approved: false,
                        duration: 11,
                        progress: 60,
                        subtasks: [
                            { taskID: 31, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true },
                            { taskID: 32, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Normal', approved: false },
                            { taskID: 33, taskName: 'Testing', startDate: new Date('02/20/2017'),
                                endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true },
                            { taskID: 34, taskName: 'Bug fix', startDate: new Date('02/24/2017'),
                                endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
                            { taskID: 35, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'),
                                endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true },
                            { taskID: 36, taskName: 'Phase 3 complete', startDate: new Date('02/27/2017'),
                                endDate: new Date('02/27/2017'), duration: 0, progress: '50', priority: 'Critical', approved: false },
                        ]
                    }]
                }
            ]
        }
    ];
    exports.complexData = [
        {
            taskID: 1,
            taskName: 'Planning',
            startDate: new Date('02/03/2017'),
            endDate: new Date('02/07/2017'),
            progress: 100,
            duration: 5,
            assignee: {firstName: 'Nancy', lastName: 'Davolio'},
            priority: 'Normal',
            approved: false,
            subtasks: [
                { taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'),assignee: {firstName: 'Andrew', lastName: 'Fuller'},
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Normal', approved: false },
                { taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'),assignee: {firstName: 'Janet', lastName: 'Leverling'},
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Low', approved: true },
                { taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'),assignee: {firstName: 'Margaret', lastName: 'Peacock'},
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Critical', approved: false },
                { taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'),assignee: {firstName: 'Steven', lastName: 'Buchanan'},
                    endDate: new Date('02/07/2017'), duration: 0, progress: 0, priority: 'Low', approved: true }
            ]
        },
        {
            taskID: 6,
            taskName: 'Design',
            startDate: new Date('02/10/2017'),
            endDate: new Date('02/14/2017'),
            duration: 3,
            progress: 86,
            assignee: {firstName: 'Michael', lastName: 'Suyama'},
            priority: 'High',
            approved: false,
            subtasks: [
                { taskID: 7, taskName: 'Software Specification', startDate: new Date('02/10/2017'),assignee: {firstName: 'Robert', lastName: 'King'},
                    endDate: new Date('02/12/2017'), duration: 3, progress: 60, priority: 'Normal', approved: false },
                { taskID: 8, taskName: 'Develop prototype', startDate: new Date('02/10/2017'),assignee: {firstName: 'Laura', lastName: 'Challahan'},
                    endDate: new Date('02/12/2017'), duration: 3, progress: 100, priority: 'Critical', approved: false },
                { taskID: 9, taskName: 'Get approval from customer', startDate: new Date('02/13/2017'),assignee: {firstName: 'Anne', lastName: 'Dodsworth'},
                    endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'Low', approved: true },
                { taskID: 10, taskName: 'Design Documentation', startDate: new Date('02/13/2017'),assignee: {firstName: 'Tamer', lastName: 'Nancy'},
                    endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'High', approved: true },
                { taskID: 11, taskName: 'Design complete', startDate: new Date('02/14/2017'),assignee: {firstName: 'Laura', lastName: 'Martin'},
                    endDate: new Date('02/14/2017'), duration: 0, progress: 0, priority: 'Normal', approved: true }
            ]
        }
    ];    
});

Custom attributes

You can customize the treegrid cells by adding a CSS class to the customAttribute property of the column.

Copied to clipboard
.e-attr {
    background: '#d7f0f4';
}
Copied to clipboard
{
    field: 'taskID', headerText: 'Task ID', width: 90, customAttributes: {class: "e-attr"}, textAlign: 'Right'
}

In the below example, we have customized the cells of TaskID and StartDate columns.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
<div id="app">
        <ejs-treegrid :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' height='300px'>
            <e-columns>
                <e-column field='taskID' headerText='Task ID' width=90 textAlign='Right' :customAttributes= "{class: 'e-attr'}"></e-column>
                <e-column field='taskName' headerText='Task Name' width=160></e-column>
                <e-column field='startDate' headerText='Start Date' width=90 format="yMd" textAlign='Right' :customAttributes= "{class: 'e-attr'}"></e-column>
                <e-column field='duration' headerText='Duration' width=80 textAlign='Right'></e-column>
            </e-columns>
        </ejs-treegrid>
</div>
</template>
<script>
import Vue from "vue";
import { TreeGridPlugin } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";

Vue.use(TreeGridPlugin);

export default {
  data() {
    return {
      data: sampleData,
    };
  },
}
</script>
<style>
.e-attr {
  background: #d7f0f4;
  }
</style>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.sampleData = [
        {
            taskID: 1,
            taskName: 'Planning',
            startDate: new Date('02/03/2017'),
            endDate: new Date('02/07/2017'),
            progress: 100,
            duration: 5,
            priority: 'Normal',
            approved: false,
            subtasks: [
                { taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'),
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Normal', approved: false },
                { taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'),
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Low', approved: true },
                { taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'),
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Critical', approved: false },
                { taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'),
                    endDate: new Date('02/07/2017'), duration: 0, progress: 0, priority: 'Low', approved: true }
            ]
        },
        {
            taskID: 6,
            taskName: 'Design',
            startDate: new Date('02/10/2017'),
            endDate: new Date('02/14/2017'),
            duration: 3,
            progress: 86,
            priority: 'High',
            approved: false,
            subtasks: [
                { taskID: 7, taskName: 'Software Specification', startDate: new Date('02/10/2017'),
                    endDate: new Date('02/12/2017'), duration: 3, progress: 60, priority: 'Normal', approved: false },
                { taskID: 8, taskName: 'Develop prototype', startDate: new Date('02/10/2017'),
                    endDate: new Date('02/12/2017'), duration: 3, progress: 100, priority: 'Critical', approved: false },
                { taskID: 9, taskName: 'Get approval from customer', startDate: new Date('02/13/2017'),
                    endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'Low', approved: true },
                { taskID: 10, taskName: 'Design Documentation', startDate: new Date('02/13/2017'),
                    endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'High', approved: true },
                { taskID: 11, taskName: 'Design complete', startDate: new Date('02/14/2017'),
                    endDate: new Date('02/14/2017'), duration: 0, progress: 0, priority: 'Normal', approved: true }
            ]
        },
        {
            taskID: 12,
            taskName: 'Implementation Phase',
            startDate: new Date('02/17/2017'),
            endDate: new Date('02/27/2017'),
            priority: 'Normal',
            approved: false,
            duration: 11,
            progress: 66,
            subtasks: [
                {
                    taskID: 13,
                    taskName: 'Phase 1',
                    startDate: new Date('02/17/2017'),
                    endDate: new Date('02/27/2017'),
                    priority: 'High',
                    approved: false,
                    progress: 50,
                    duration: 11,
                    subtasks: [{
                        taskID: 14,
                        taskName: 'Implementation Module 1',
                        startDate: new Date('02/17/2017'),
                        endDate: new Date('02/27/2017'),
                        priority: 'Normal',
                        duration: 11,
                        progress: 10,
                        approved: false,
                        subtasks: [
                            { taskID: 15, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'High', approved: false },
                            { taskID: 16, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true },
                            { taskID: 17, taskName: 'Testing', startDate: new Date('02/20/2017'),
                                endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true },
                            { taskID: 18, taskName: 'Bug fix', startDate: new Date('02/24/2017'),
                                endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'Critical', approved: false },
                            { taskID: 19, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'),
                                endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
                            { taskID: 20, taskName: 'Phase 1 complete', startDate: new Date('02/27/2017'),
                                endDate: new Date('02/27/2017'), duration: 0, progress: '50', priority: 'Low', approved: true }
    
                        ]
                    }]
                },
                {
                    taskID: 21,
                    taskName: 'Phase 2',
                    startDate: new Date('02/17/2017'),
                    endDate: new Date('02/28/2017'),
                    priority: 'High',
                    approved: false,
                    duration: 12,
                    progress: 60,
                    subtasks: [{
                        taskID: 22,
                        taskName: 'Implementation Module 2',
                        startDate: new Date('02/17/2017'),
                        endDate: new Date('02/28/2017'),
                        priority: 'Critical',
                        approved: false,
                        duration: 12,
                        progress: 90,
                        subtasks: [
                            { taskID: 23, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Normal', approved: true },
                            { taskID: 24, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Critical', approved: true },
                            { taskID: 25, taskName: 'Testing', startDate: new Date('02/21/2017'),
                                endDate: new Date('02/24/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
                            { taskID: 26, taskName: 'Bug fix', startDate: new Date('02/25/2017'),
                                endDate: new Date('02/26/2017'), duration: 2, progress: '0', priority: 'Low', approved: false },
                            { taskID: 27, taskName: 'Customer review meeting', startDate: new Date('02/27/2017'),
                                endDate: new Date('02/28/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true },
                            { taskID: 28, taskName: 'Phase 2 complete', startDate: new Date('02/28/2017'),
                                endDate: new Date('02/28/2017'), duration: 0, progress: '50', priority: 'Normal', approved: false }
    
                        ]
                    }]
                },
    
                {
                    taskID: 29,
                    taskName: 'Phase 3',
                    startDate: new Date('02/17/2017'),
                    endDate: new Date('02/27/2017'),
                    priority: 'Normal',
                    approved: false,
                    duration: 11,
                    progress: 30,
                    subtasks: [{
                        taskID: 30,
                        taskName: 'Implementation Module 3',
                        startDate: new Date('02/17/2017'),
                        endDate: new Date('02/27/2017'),
                        priority: 'High',
                        approved: false,
                        duration: 11,
                        progress: 60,
                        subtasks: [
                            { taskID: 31, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true },
                            { taskID: 32, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Normal', approved: false },
                            { taskID: 33, taskName: 'Testing', startDate: new Date('02/20/2017'),
                                endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true },
                            { taskID: 34, taskName: 'Bug fix', startDate: new Date('02/24/2017'),
                                endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
                            { taskID: 35, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'),
                                endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true },
                            { taskID: 36, taskName: 'Phase 3 complete', startDate: new Date('02/27/2017'),
                                endDate: new Date('02/27/2017'), duration: 0, progress: '50', priority: 'Critical', approved: false },
                        ]
                    }]
                }
            ]
        }
    ];    
    exports.htmlData = [
        {
            taskID: '<span>1</span>',
            taskName: 'Planning',
            startDate: new Date('02/03/2017'),
            endDate: new Date('02/07/2017'),
            progress: 100,
            duration: 5,
            priority: 'Normal',
            approved: false,
            subtasks: [
                { taskID: '<span>2</span>', taskName: 'Plan timeline', startDate: new Date('02/03/2017'),
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Normal', approved: false },
                { taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'),
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Low', approved: true },
                { taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'),
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Critical', approved: false },
                { taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'),
                    endDate: new Date('02/07/2017'), duration: 0, progress: 0, priority: 'Low', approved: true }
            ]
        },
        {
            taskID: '<span>6</span>',
            taskName: 'Design',
            startDate: new Date('02/10/2017'),
            endDate: new Date('02/14/2017'),
            duration: 3,
            progress: 86,
            priority: 'High',
            approved: false,
            subtasks: [
                { taskID: 7, taskName: 'Software Specification', startDate: new Date('02/10/2017'),
                    endDate: new Date('02/12/2017'), duration: 3, progress: 60, priority: 'Normal', approved: false },
                { taskID: 8, taskName: 'Develop prototype', startDate: new Date('02/10/2017'),
                    endDate: new Date('02/12/2017'), duration: 3, progress: 100, priority: 'Critical', approved: false },
                { taskID: '<span>9</span>', taskName: 'Get approval from customer', startDate: new Date('02/13/2017'),
                    endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'Low', approved: true },
                { taskID: 10, taskName: 'Design Documentation', startDate: new Date('02/13/2017'),
                    endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'High', approved: true },
                { taskID: 11, taskName: 'Design complete', startDate: new Date('02/14/2017'),
                    endDate: new Date('02/14/2017'), duration: 0, progress: 0, priority: 'Normal', approved: true }
            ]
        },
        {
            taskID: 12,
            taskName: 'Implementation Phase',
            startDate: new Date('02/17/2017'),
            endDate: new Date('02/27/2017'),
            priority: 'Normal',
            approved: false,
            duration: 11,
            progress: 66,
            subtasks: [
                {
                    taskID: 13,
                    taskName: 'Phase 1',
                    startDate: new Date('02/17/2017'),
                    endDate: new Date('02/27/2017'),
                    priority: 'High',
                    approved: false,
                    progress: 50,
                    duration: 11,
                    subtasks: [{
                        taskID: 14,
                        taskName: 'Implementation Module 1',
                        startDate: new Date('02/17/2017'),
                        endDate: new Date('02/27/2017'),
                        priority: 'Normal',
                        duration: 11,
                        progress: 10,
                        approved: false,
                        subtasks: [
                            { taskID: 15, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'High', approved: false },
                            { taskID: 16, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true },
                            { taskID: 17, taskName: 'Testing', startDate: new Date('02/20/2017'),
                                endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true },
                            { taskID: 18, taskName: 'Bug fix', startDate: new Date('02/24/2017'),
                                endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'Critical', approved: false },
                            { taskID: 19, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'),
                                endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
                            { taskID: 20, taskName: 'Phase 1 complete', startDate: new Date('02/27/2017'),
                                endDate: new Date('02/27/2017'), duration: 0, progress: '50', priority: 'Low', approved: true }
    
                        ]
                    }]
                },
                {
                    taskID: 21,
                    taskName: 'Phase 2',
                    startDate: new Date('02/17/2017'),
                    endDate: new Date('02/28/2017'),
                    priority: 'High',
                    approved: false,
                    duration: 12,
                    progress: 60,
                    subtasks: [{
                        taskID: 22,
                        taskName: 'Implementation Module 2',
                        startDate: new Date('02/17/2017'),
                        endDate: new Date('02/28/2017'),
                        priority: 'Critical',
                        approved: false,
                        duration: 12,
                        progress: 90,
                        subtasks: [
                            { taskID: 23, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Normal', approved: true },
                            { taskID: 24, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Critical', approved: true },
                            { taskID: 25, taskName: 'Testing', startDate: new Date('02/21/2017'),
                                endDate: new Date('02/24/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
                            { taskID: 26, taskName: 'Bug fix', startDate: new Date('02/25/2017'),
                                endDate: new Date('02/26/2017'), duration: 2, progress: '0', priority: 'Low', approved: false },
                            { taskID: 27, taskName: 'Customer review meeting', startDate: new Date('02/27/2017'),
                                endDate: new Date('02/28/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true },
                            { taskID: 28, taskName: 'Phase 2 complete', startDate: new Date('02/28/2017'),
                                endDate: new Date('02/28/2017'), duration: 0, progress: '50', priority: 'Normal', approved: false }
    
                        ]
                    }]
                },
    
                {
                    taskID: 29,
                    taskName: 'Phase 3',
                    startDate: new Date('02/17/2017'),
                    endDate: new Date('02/27/2017'),
                    priority: 'Normal',
                    approved: false,
                    duration: 11,
                    progress: 30,
                    subtasks: [{
                        taskID: 30,
                        taskName: 'Implementation Module 3',
                        startDate: new Date('02/17/2017'),
                        endDate: new Date('02/27/2017'),
                        priority: 'High',
                        approved: false,
                        duration: 11,
                        progress: 60,
                        subtasks: [
                            { taskID: 31, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true },
                            { taskID: 32, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Normal', approved: false },
                            { taskID: 33, taskName: 'Testing', startDate: new Date('02/20/2017'),
                                endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true },
                            { taskID: 34, taskName: 'Bug fix', startDate: new Date('02/24/2017'),
                                endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
                            { taskID: 35, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'),
                                endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true },
                            { taskID: 36, taskName: 'Phase 3 complete', startDate: new Date('02/27/2017'),
                                endDate: new Date('02/27/2017'), duration: 0, progress: '50', priority: 'Critical', approved: false },
                        ]
                    }]
                }
            ]
        }
    ];
    exports.complexData = [
        {
            taskID: 1,
            taskName: 'Planning',
            startDate: new Date('02/03/2017'),
            endDate: new Date('02/07/2017'),
            progress: 100,
            duration: 5,
            assignee: {firstName: 'Nancy', lastName: 'Davolio'},
            priority: 'Normal',
            approved: false,
            subtasks: [
                { taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'),assignee: {firstName: 'Andrew', lastName: 'Fuller'},
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Normal', approved: false },
                { taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'),assignee: {firstName: 'Janet', lastName: 'Leverling'},
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Low', approved: true },
                { taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'),assignee: {firstName: 'Margaret', lastName: 'Peacock'},
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Critical', approved: false },
                { taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'),assignee: {firstName: 'Steven', lastName: 'Buchanan'},
                    endDate: new Date('02/07/2017'), duration: 0, progress: 0, priority: 'Low', approved: true }
            ]
        },
        {
            taskID: 6,
            taskName: 'Design',
            startDate: new Date('02/10/2017'),
            endDate: new Date('02/14/2017'),
            duration: 3,
            progress: 86,
            assignee: {firstName: 'Michael', lastName: 'Suyama'},
            priority: 'High',
            approved: false,
            subtasks: [
                { taskID: 7, taskName: 'Software Specification', startDate: new Date('02/10/2017'),assignee: {firstName: 'Robert', lastName: 'King'},
                    endDate: new Date('02/12/2017'), duration: 3, progress: 60, priority: 'Normal', approved: false },
                { taskID: 8, taskName: 'Develop prototype', startDate: new Date('02/10/2017'),assignee: {firstName: 'Laura', lastName: 'Challahan'},
                    endDate: new Date('02/12/2017'), duration: 3, progress: 100, priority: 'Critical', approved: false },
                { taskID: 9, taskName: 'Get approval from customer', startDate: new Date('02/13/2017'),assignee: {firstName: 'Anne', lastName: 'Dodsworth'},
                    endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'Low', approved: true },
                { taskID: 10, taskName: 'Design Documentation', startDate: new Date('02/13/2017'),assignee: {firstName: 'Tamer', lastName: 'Nancy'},
                    endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'High', approved: true },
                { taskID: 11, taskName: 'Design complete', startDate: new Date('02/14/2017'),assignee: {firstName: 'Laura', lastName: 'Martin'},
                    endDate: new Date('02/14/2017'), duration: 0, progress: 0, priority: 'Normal', approved: true }
            ]
        }
    ];    
});

Grid lines

The gridLines have option to display cell border and it can be defined by the gridLines property.

The available modes of grid lines are:

Modes Actions
Both Displays both the horizontal and vertical grid lines.
None No grid lines are displayed.
Horizontal Displays the horizontal grid lines only.
Vertical Displays the vertical grid lines only.
Default Displays grid lines based on the theme.
Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
<div id="app">
        <ejs-treegrid :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' height='300px' gridLines='Both'>
            <e-columns>
                <e-column field='taskID' headerText='Task ID' width=90 textAlign='Right' ></e-column>
                <e-column field='taskName' headerText='Task Name' width=180></e-column>
                <e-column field='duration' headerText='Duration' width=80 textAlign='Right'></e-column>
                <e-column field='progress' headerText='Progress' width=80 textAlign='Right'></e-column>
            </e-columns>
        </ejs-treegrid>
</div>
</template>
<script>
import Vue from "vue";
import { TreeGridPlugin } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";

Vue.use(TreeGridPlugin);

export default {
  data() {
    return {
      data: sampleData,
    };
  }
}
</script>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.sampleData = [
        {
            taskID: 1,
            taskName: 'Planning',
            startDate: new Date('02/03/2017'),
            endDate: new Date('02/07/2017'),
            progress: 100,
            duration: 5,
            priority: 'Normal',
            approved: false,
            subtasks: [
                { taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'),
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Normal', approved: false },
                { taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'),
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Low', approved: true },
                { taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'),
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Critical', approved: false },
                { taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'),
                    endDate: new Date('02/07/2017'), duration: 0, progress: 0, priority: 'Low', approved: true }
            ]
        },
        {
            taskID: 6,
            taskName: 'Design',
            startDate: new Date('02/10/2017'),
            endDate: new Date('02/14/2017'),
            duration: 3,
            progress: 86,
            priority: 'High',
            approved: false,
            subtasks: [
                { taskID: 7, taskName: 'Software Specification', startDate: new Date('02/10/2017'),
                    endDate: new Date('02/12/2017'), duration: 3, progress: 60, priority: 'Normal', approved: false },
                { taskID: 8, taskName: 'Develop prototype', startDate: new Date('02/10/2017'),
                    endDate: new Date('02/12/2017'), duration: 3, progress: 100, priority: 'Critical', approved: false },
                { taskID: 9, taskName: 'Get approval from customer', startDate: new Date('02/13/2017'),
                    endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'Low', approved: true },
                { taskID: 10, taskName: 'Design Documentation', startDate: new Date('02/13/2017'),
                    endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'High', approved: true },
                { taskID: 11, taskName: 'Design complete', startDate: new Date('02/14/2017'),
                    endDate: new Date('02/14/2017'), duration: 0, progress: 0, priority: 'Normal', approved: true }
            ]
        },
        {
            taskID: 12,
            taskName: 'Implementation Phase',
            startDate: new Date('02/17/2017'),
            endDate: new Date('02/27/2017'),
            priority: 'Normal',
            approved: false,
            duration: 11,
            progress: 66,
            subtasks: [
                {
                    taskID: 13,
                    taskName: 'Phase 1',
                    startDate: new Date('02/17/2017'),
                    endDate: new Date('02/27/2017'),
                    priority: 'High',
                    approved: false,
                    progress: 50,
                    duration: 11,
                    subtasks: [{
                        taskID: 14,
                        taskName: 'Implementation Module 1',
                        startDate: new Date('02/17/2017'),
                        endDate: new Date('02/27/2017'),
                        priority: 'Normal',
                        duration: 11,
                        progress: 10,
                        approved: false,
                        subtasks: [
                            { taskID: 15, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'High', approved: false },
                            { taskID: 16, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true },
                            { taskID: 17, taskName: 'Testing', startDate: new Date('02/20/2017'),
                                endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true },
                            { taskID: 18, taskName: 'Bug fix', startDate: new Date('02/24/2017'),
                                endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'Critical', approved: false },
                            { taskID: 19, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'),
                                endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
                            { taskID: 20, taskName: 'Phase 1 complete', startDate: new Date('02/27/2017'),
                                endDate: new Date('02/27/2017'), duration: 0, progress: '50', priority: 'Low', approved: true }
    
                        ]
                    }]
                },
                {
                    taskID: 21,
                    taskName: 'Phase 2',
                    startDate: new Date('02/17/2017'),
                    endDate: new Date('02/28/2017'),
                    priority: 'High',
                    approved: false,
                    duration: 12,
                    progress: 60,
                    subtasks: [{
                        taskID: 22,
                        taskName: 'Implementation Module 2',
                        startDate: new Date('02/17/2017'),
                        endDate: new Date('02/28/2017'),
                        priority: 'Critical',
                        approved: false,
                        duration: 12,
                        progress: 90,
                        subtasks: [
                            { taskID: 23, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Normal', approved: true },
                            { taskID: 24, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Critical', approved: true },
                            { taskID: 25, taskName: 'Testing', startDate: new Date('02/21/2017'),
                                endDate: new Date('02/24/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
                            { taskID: 26, taskName: 'Bug fix', startDate: new Date('02/25/2017'),
                                endDate: new Date('02/26/2017'), duration: 2, progress: '0', priority: 'Low', approved: false },
                            { taskID: 27, taskName: 'Customer review meeting', startDate: new Date('02/27/2017'),
                                endDate: new Date('02/28/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true },
                            { taskID: 28, taskName: 'Phase 2 complete', startDate: new Date('02/28/2017'),
                                endDate: new Date('02/28/2017'), duration: 0, progress: '50', priority: 'Normal', approved: false }
    
                        ]
                    }]
                },
    
                {
                    taskID: 29,
                    taskName: 'Phase 3',
                    startDate: new Date('02/17/2017'),
                    endDate: new Date('02/27/2017'),
                    priority: 'Normal',
                    approved: false,
                    duration: 11,
                    progress: 30,
                    subtasks: [{
                        taskID: 30,
                        taskName: 'Implementation Module 3',
                        startDate: new Date('02/17/2017'),
                        endDate: new Date('02/27/2017'),
                        priority: 'High',
                        approved: false,
                        duration: 11,
                        progress: 60,
                        subtasks: [
                            { taskID: 31, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true },
                            { taskID: 32, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Normal', approved: false },
                            { taskID: 33, taskName: 'Testing', startDate: new Date('02/20/2017'),
                                endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true },
                            { taskID: 34, taskName: 'Bug fix', startDate: new Date('02/24/2017'),
                                endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
                            { taskID: 35, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'),
                                endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true },
                            { taskID: 36, taskName: 'Phase 3 complete', startDate: new Date('02/27/2017'),
                                endDate: new Date('02/27/2017'), duration: 0, progress: '50', priority: 'Critical', approved: false },
                        ]
                    }]
                }
            ]
        }
    ];    
    exports.htmlData = [
        {
            taskID: '<span>1</span>',
            taskName: 'Planning',
            startDate: new Date('02/03/2017'),
            endDate: new Date('02/07/2017'),
            progress: 100,
            duration: 5,
            priority: 'Normal',
            approved: false,
            subtasks: [
                { taskID: '<span>2</span>', taskName: 'Plan timeline', startDate: new Date('02/03/2017'),
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Normal', approved: false },
                { taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'),
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Low', approved: true },
                { taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'),
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Critical', approved: false },
                { taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'),
                    endDate: new Date('02/07/2017'), duration: 0, progress: 0, priority: 'Low', approved: true }
            ]
        },
        {
            taskID: '<span>6</span>',
            taskName: 'Design',
            startDate: new Date('02/10/2017'),
            endDate: new Date('02/14/2017'),
            duration: 3,
            progress: 86,
            priority: 'High',
            approved: false,
            subtasks: [
                { taskID: 7, taskName: 'Software Specification', startDate: new Date('02/10/2017'),
                    endDate: new Date('02/12/2017'), duration: 3, progress: 60, priority: 'Normal', approved: false },
                { taskID: 8, taskName: 'Develop prototype', startDate: new Date('02/10/2017'),
                    endDate: new Date('02/12/2017'), duration: 3, progress: 100, priority: 'Critical', approved: false },
                { taskID: '<span>9</span>', taskName: 'Get approval from customer', startDate: new Date('02/13/2017'),
                    endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'Low', approved: true },
                { taskID: 10, taskName: 'Design Documentation', startDate: new Date('02/13/2017'),
                    endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'High', approved: true },
                { taskID: 11, taskName: 'Design complete', startDate: new Date('02/14/2017'),
                    endDate: new Date('02/14/2017'), duration: 0, progress: 0, priority: 'Normal', approved: true }
            ]
        },
        {
            taskID: 12,
            taskName: 'Implementation Phase',
            startDate: new Date('02/17/2017'),
            endDate: new Date('02/27/2017'),
            priority: 'Normal',
            approved: false,
            duration: 11,
            progress: 66,
            subtasks: [
                {
                    taskID: 13,
                    taskName: 'Phase 1',
                    startDate: new Date('02/17/2017'),
                    endDate: new Date('02/27/2017'),
                    priority: 'High',
                    approved: false,
                    progress: 50,
                    duration: 11,
                    subtasks: [{
                        taskID: 14,
                        taskName: 'Implementation Module 1',
                        startDate: new Date('02/17/2017'),
                        endDate: new Date('02/27/2017'),
                        priority: 'Normal',
                        duration: 11,
                        progress: 10,
                        approved: false,
                        subtasks: [
                            { taskID: 15, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'High', approved: false },
                            { taskID: 16, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true },
                            { taskID: 17, taskName: 'Testing', startDate: new Date('02/20/2017'),
                                endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true },
                            { taskID: 18, taskName: 'Bug fix', startDate: new Date('02/24/2017'),
                                endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'Critical', approved: false },
                            { taskID: 19, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'),
                                endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
                            { taskID: 20, taskName: 'Phase 1 complete', startDate: new Date('02/27/2017'),
                                endDate: new Date('02/27/2017'), duration: 0, progress: '50', priority: 'Low', approved: true }
    
                        ]
                    }]
                },
                {
                    taskID: 21,
                    taskName: 'Phase 2',
                    startDate: new Date('02/17/2017'),
                    endDate: new Date('02/28/2017'),
                    priority: 'High',
                    approved: false,
                    duration: 12,
                    progress: 60,
                    subtasks: [{
                        taskID: 22,
                        taskName: 'Implementation Module 2',
                        startDate: new Date('02/17/2017'),
                        endDate: new Date('02/28/2017'),
                        priority: 'Critical',
                        approved: false,
                        duration: 12,
                        progress: 90,
                        subtasks: [
                            { taskID: 23, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Normal', approved: true },
                            { taskID: 24, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Critical', approved: true },
                            { taskID: 25, taskName: 'Testing', startDate: new Date('02/21/2017'),
                                endDate: new Date('02/24/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
                            { taskID: 26, taskName: 'Bug fix', startDate: new Date('02/25/2017'),
                                endDate: new Date('02/26/2017'), duration: 2, progress: '0', priority: 'Low', approved: false },
                            { taskID: 27, taskName: 'Customer review meeting', startDate: new Date('02/27/2017'),
                                endDate: new Date('02/28/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true },
                            { taskID: 28, taskName: 'Phase 2 complete', startDate: new Date('02/28/2017'),
                                endDate: new Date('02/28/2017'), duration: 0, progress: '50', priority: 'Normal', approved: false }
    
                        ]
                    }]
                },
    
                {
                    taskID: 29,
                    taskName: 'Phase 3',
                    startDate: new Date('02/17/2017'),
                    endDate: new Date('02/27/2017'),
                    priority: 'Normal',
                    approved: false,
                    duration: 11,
                    progress: 30,
                    subtasks: [{
                        taskID: 30,
                        taskName: 'Implementation Module 3',
                        startDate: new Date('02/17/2017'),
                        endDate: new Date('02/27/2017'),
                        priority: 'High',
                        approved: false,
                        duration: 11,
                        progress: 60,
                        subtasks: [
                            { taskID: 31, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true },
                            { taskID: 32, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
                                endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Normal', approved: false },
                            { taskID: 33, taskName: 'Testing', startDate: new Date('02/20/2017'),
                                endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true },
                            { taskID: 34, taskName: 'Bug fix', startDate: new Date('02/24/2017'),
                                endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
                            { taskID: 35, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'),
                                endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true },
                            { taskID: 36, taskName: 'Phase 3 complete', startDate: new Date('02/27/2017'),
                                endDate: new Date('02/27/2017'), duration: 0, progress: '50', priority: 'Critical', approved: false },
                        ]
                    }]
                }
            ]
        }
    ];
    exports.complexData = [
        {
            taskID: 1,
            taskName: 'Planning',
            startDate: new Date('02/03/2017'),
            endDate: new Date('02/07/2017'),
            progress: 100,
            duration: 5,
            assignee: {firstName: 'Nancy', lastName: 'Davolio'},
            priority: 'Normal',
            approved: false,
            subtasks: [
                { taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'),assignee: {firstName: 'Andrew', lastName: 'Fuller'},
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Normal', approved: false },
                { taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'),assignee: {firstName: 'Janet', lastName: 'Leverling'},
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Low', approved: true },
                { taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'),assignee: {firstName: 'Margaret', lastName: 'Peacock'},
                    endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Critical', approved: false },
                { taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'),assignee: {firstName: 'Steven', lastName: 'Buchanan'},
                    endDate: new Date('02/07/2017'), duration: 0, progress: 0, priority: 'Low', approved: true }
            ]
        },
        {
            taskID: 6,
            taskName: 'Design',
            startDate: new Date('02/10/2017'),
            endDate: new Date('02/14/2017'),
            duration: 3,
            progress: 86,
            assignee: {firstName: 'Michael', lastName: 'Suyama'},
            priority: 'High',
            approved: false,
            subtasks: [
                { taskID: 7, taskName: 'Software Specification', startDate: new Date('02/10/2017'),assignee: {firstName: 'Robert', lastName: 'King'},
                    endDate: new Date('02/12/2017'), duration: 3, progress: 60, priority: 'Normal', approved: false },
                { taskID: 8, taskName: 'Develop prototype', startDate: new Date('02/10/2017'),assignee: {firstName: 'Laura', lastName: 'Challahan'},
                    endDate: new Date('02/12/2017'), duration: 3, progress: 100, priority: 'Critical', approved: false },
                { taskID: 9, taskName: 'Get approval from customer', startDate: new Date('02/13/2017'),assignee: {firstName: 'Anne', lastName: 'Dodsworth'},
                    endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'Low', approved: true },
                { taskID: 10, taskName: 'Design Documentation', startDate: new Date('02/13/2017'),assignee: {firstName: 'Tamer', lastName: 'Nancy'},
                    endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'High', approved: true },
                { taskID: 11, taskName: 'Design complete', startDate: new Date('02/14/2017'),assignee: {firstName: 'Laura', lastName: 'Martin'},
                    endDate: new Date('02/14/2017'), duration: 0, progress: 0, priority: 'Normal', approved: true }
            ]
        }
    ];    
});

By default, the treegrid renders with Default mode.