Search results
Columns in JavaScript TreeGrid control
24 May 2022 / 21 minutes to read
The column definitions are used as the dataSource schema in the TreeGrid. This plays a vital role in rendering column values in the required format.
The treegrid operations such as sorting, filtering and searching etc. are performed based on column definitions. The field property of the columns
is necessary to map the data source values in TreeGrid columns.
treeColumnIndex property denotes the column that is used to expand and collapse child rows.
Header Template
You can customize the header element by using the headerTemplate property.
Source
Preview
index.ts
index.html
import { TreeGrid } from '@syncfusion/ej2-treegrid';
import { headerData } from './datasource.ts';
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: headerData,
childMapping: 'subtasks',
height: 315,
columns: [
{ field: 'taskName', headerTemplate: '#projectName', width: 220 },
{ field: 'startDate', headerTemplate: '#dateTemplate', format: 'yMd', textAlign: 'Right' },
{ field: 'duration', headerTemplate: '#durationTemplate', textAlign: 'Right' },
{ field: 'progress', headerTemplate: '#progressTemplate', textAlign: 'Right' }
]
});
treeGridObj.appendTo('#TreeGrid');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<script id="template" type="text/x-template">
<div class="template_checkbox">
${if(approved)}
<input type="checkbox" checked> ${else}
<input type="checkbox"> ${/if}
</div>
</script>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='TreeGrid'></div>
</div>
<script type="text/x-template" id="projectName">
<div>
<div>
<img src="taskname.png" width="20" height="20" class="e-image" /> Task Name
</div>
</div>
</script>
<script type="text/x-template" id="dateTemplate">
<div>
<div>
<img src="startdate.png" width="20" height="20" class="e-image" /> Start Date
</div>
</div>
</script>
<script type="text/x-template" id="durationTemplate">
<div>
<div>
<img src="duration.png" width="20" height="20" class="e-image" /> Duration
</div>
</div>
</script>
<script type="text/x-template" id="progressTemplate">
<div>
<div>
<img src="progress.png" width="20" height="20" class="e-image" /> Progress
</div>
</div>
</script>
</body>
</html>Header text
By default, column header title is displayed from column field value. To override the default header title, you have to define the headerText value.
Source
Preview
index.ts
index.html
import { TreeGrid } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
height: 315,
treeColumnIndex: 1,
columns: [
{ field: 'taskID', headerText: 'Task ID', width: 90, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 180, textAlign: 'Left' },
{
field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd'
},
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }
]
});
treeGridObj.appendTo('#TreeGrid');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='TreeGrid'></div>
</div>
</body>
</html>
- If both the
fieldandheaderTextare not defined in the column, the column renders with “empty” header text.
Format
To format cell values based on specific culture, use the columns.format property. The TreeGrid uses Internalization library to format number and date
values.
Source
Preview
index.ts
index.html
import { TreeGrid } from '@syncfusion/ej2-treegrid';
import { formatData } from './datasource.ts';
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: formatData,
childMapping: 'subtasks',
height: 315,
treeColumnIndex: 1,
columns: [
{ field: 'orderID', headerText: 'Order ID', textAlign: 'Right', width: 90 },
{ field: 'orderName', headerText: 'Order Name', textAlign: 'Left', width: 180 },
{ field: 'price', headerText: 'Price', textAlign: 'Right', width: 90, format: 'c2', type: 'number' },
]
});
treeGridObj.appendTo('#TreeGrid');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='TreeGrid'></div>
</div>
</body>
</html>By default, the
numberanddatevalues are formatted inen-USlocale.
Number formatting
The number or integer values can be formatted using the below format strings.
| Format | Description |
|---|---|
| N | Denotes numeric type. |
| C | Denotes currency type. |
| P | Denotes percentage type |
Please refer to the link to know more about Number formatting.
Date formatting
You can format date values either using built-in date format string or custom format string.
For built-in date format you can specify columns.format property as string (Example: yMd). Please refer to the link to know more about Date formatting.
You can also use custom format string to format the date values. Some of the custom formats and the formatted date values are given in the below table.
| Format | Formatted value |
|---|---|
| { type:‘date’, format:‘dd/MM/yyyy’ } | 04/07/1996 |
| { type:‘date’, format:‘dd.MM.yyyy’ } | 04.07.1996 |
| { type:‘date’, skeleton:‘short’ } | 7/4/96 |
| { type: ‘dateTime’, format: ‘dd/MM/yyyy hh:mm a’ } | 04/07/1996 12:00 AM |
| { type: ‘dateTime’, format: ‘MM/dd/yyyy hh:mm:ss a’ } | 07/04/1996 12:00:00 AM |
Source
Preview
index.ts
index.html
import { TreeGrid } from '@syncfusion/ej2-treegrid';
import { formatData } from './datasource.ts';
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: formatData,
childMapping: 'subtasks',
height: 315,
treeColumnIndex: 1,
columns: [
{ field: 'orderID', headerText: 'Order ID', textAlign: 'Right', width: 90 },
{ field: 'orderName', headerText: 'Order Name', textAlign: 'Left', width: 220 },
{
field: 'orderDate', headerText: 'Order Date', textAlign: 'Right', width: 160,
format: { format: 'dd/MM/yyyy', type: 'date' }
},
{ field: 'price', headerText: 'Price', textAlign: 'Right', width: 90, format: 'c2', type: 'number' },
]
});
treeGridObj.appendTo('#TreeGrid');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='TreeGrid'></div>
</div>
</body>
</html>AutoFit specific columns
The autoFitColumns method resizes the column to fit the widest cell’s content without wrapping. You can autofit a specific column at initial rendering by invoking the autoFitColumns method in dataBound event.
Source
Preview
index.ts
index.html
import { TreeGrid, Resize } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';
TreeGrid.Inject(Resize);
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
allowResizing: true,
dataBound: () => treeGridObj.autoFitColumns(['taskName']),
height: 315,
treeColumnIndex: 1,
columns: [
{ field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 90 },
{ field: 'taskName', headerText: 'Task Name', width: 60 },
{
field: 'startDate', headerText: 'Start Date', format: 'yMd', width: 120, textAlign:'Right'
},
{ field: 'duration', headerText: 'Duration', width: 120, textAlign: 'Right' },
{ field: 'progress', headerText: 'Progress', width: 120, textAlign: 'Right' }
]
});
treeGridObj.appendTo('#TreeGrid');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='TreeGrid'></div>
</div>
</body>
</html>You can autofit all the columns by invoking the
autoFitColumnsmethod without column names.
Reorder
Reordering can be done by drag and drop of a particular column header from one index to another index within the treegrid. To enable reordering, set the allowReordering to true.
To use reordering, inject the Reorder module in the treegrid.
Source
Preview
index.ts
index.html
import { TreeGrid, Reorder } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';
TreeGrid.Inject(Reorder);
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
allowReordering: true,
height: 315,
treeColumnIndex: 1,
columns: [
{ field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 90 },
{ field: 'taskName', headerText: 'Task Name', width: 180 },
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },
{ field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' }
]
});
treeGridObj.appendTo('#TreeGrid');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='TreeGrid'></div>
</div>
</body>
</html>You can disable reordering a particular column by setting the
columns.allowReorderingto false.
Reorder Multiple Columns
Multiple columns can be reordered at a time by using the reorderColumns method.
Source
Preview
index.ts
index.html
import { TreeGrid, Reorder } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';
import { Button } from '@syncfusion/ej2-buttons';
TreeGrid.Inject(Reorder);
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
allowReordering: true,
height: 285,
treeColumnIndex: 1,
columns: [
{ field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 90 },
{ field: 'taskName', headerText: 'Task Name', width: 180 },
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },
{ field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' }
]
});
treeGridObj.appendTo('#TreeGrid');
let reorderMultipleColsBtn: Button = new Button();
reorderMultipleColsBtn.appendTo('#reorderMultipleCols');
document.getElementById('reorderMultipleCols').addEventListener('click', () => {
treeGridObj.reorderColumns(['taskID','duration'],'progress');
});<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<button id="reorderMultipleCols">Reorder Task ID and Duration to Last</button>
<div id='TreeGrid'></div>
</div>
</body>
</html>Lock Columns
You can lock columns by using column.lockColumn property. The locked columns will be moved to the first position. Also you can’t reorder its position.
In the below example, duration column is locked and its reordering functionality is disabled.
Source
Preview
index.ts
index.css
import { TreeGrid, Reorder } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';
TreeGrid.Inject(Reorder);
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
allowReordering: true,
allowSelection: false,
height: 315,
treeColumnIndex: 1,
columns: [
{ field: 'taskID', headerText: 'Task ID', width: 90, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 180, textAlign: 'Left' },
{
field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd'
},
{ field: 'duration', headerText: 'Duration', width: 80, lockColumn: true, customAttributes: {class: 'customcss'}, textAlign: 'Right' }
]
});
treeGridObj.appendTo('#TreeGrid');#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-grid .customcss,
.e-grid .e-columnheader .customcss {
background-color: #ecedee;
}Column resizing
Column width can be resized by clicking and dragging the right edge of the column header. While dragging, the width of the respective column will be resized immediately. Each column can be auto resized by double-clicking the right edge of the column header to fit the width of that column based on the widest cell content. To enable column resize, set the allowResizing property to true.
To use the column resize, inject Resize module in the treegrid.
Source
Preview
index.ts
index.html
import { TreeGrid, Resize } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';
TreeGrid.Inject(Resize);
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
allowResizing: true,
height: 315,
treeColumnIndex: 1,
columns: [
{ field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 90 },
{ field: 'taskName', headerText: 'Task Name', width: 180 },
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },
{ field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' }
]
});
treeGridObj.appendTo('#TreeGrid');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='TreeGrid'></div>
</div>
</body>
</html>
- You can disable resizing for a particular column by setting the
columns.allowResizingto false.- In RTL mode, you can click and drag the left edge of the header cell to resize the column.
Min and max width
Column resize can be restricted between minimum and maximum width by defining the columns->minWidth and columns->maxWidth.
In the following sample, minimum and maximum width are defined for Duration, and Task Name columns.
Source
Preview
index.ts
index.html
import { TreeGrid, Resize } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';
TreeGrid.Inject(Resize);
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
allowResizing: true,
height: 315,
treeColumnIndex: 1,
columns: [
{ field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 90 },
{ field: 'taskName', headerText: 'Task Name', minWidth: 170, maxWidth: 250, width: 180 },
{ field: 'duration', headerText: 'Duration', width: 80, minWidth: 50, maxWidth: 150, textAlign: 'Right' },
{ field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' }
]
});
treeGridObj.appendTo('#TreeGrid');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='TreeGrid'></div>
</div>
</body>
</html>Resize Stacked Column
Stacked columns can be resized by clicking and dragging the right edge of the stacked column header. While dragging, the width of the respective child columns will be resized at the same time. You can disable resize for particular stacked column by setting allowResizing as false to its columns.
Source
Preview
index.ts
index.html
import { TreeGrid, Resize } from '@syncfusion/ej2-treegrid';
import { stackedData } from './datasource.ts';
TreeGrid.Inject(Resize);
let treeGridObj: TreeGrid = new TreeGrid(
{
dataSource: stackedData,
childMapping: 'subtasks',
allowResizing: true,
treeColumnIndex: 1,
height: 260
columns: [
{
headerText: 'Order Details', textAlign: 'Center', columns: [
{ field: 'orderID', headerText: 'Order ID', textAlign: 'Right', width: 90 },
{ field: 'orderName', headerText: 'Order Name', textAlign: 'Left', width: 170 },
]
},
{
headerText: 'Shipment Details', textAlign: 'Center', columns: [
{ field: 'shipMentCategory', headerText: 'Shipment Category', textAlign: 'Left', width: 90 },
{ field: 'shippedDate', headerText: 'Shipped Date', textAlign: 'Right', width: 90, format: 'yMd' }
]
}
]
});
treeGridObj.appendTo('#TreeGrid');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='TreeGrid'></div>
</div>
</body>
</html>Touch interaction
When the right edge of the header cell is tapped, a floating handler will be visible over the right border of the column. To resize the column, tap and drag the floating handler as needed.
The following screenshot represents the column resizing in touch device.
Column template
The column template has options to display custom element instead of a field value in the column.
Source
Preview
index.ts
index.html
import { TreeGrid } from '@syncfusion/ej2-treegrid';
import { textdata,getSparkData } from './datasource.ts';
import { Sparkline } from '@syncfusion/ej2-charts';
import { RowDataBoundEventArgs, getObject } from '@syncfusion/ej2-grids';
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: textdata,
childMapping: 'Children',
treeColumnIndex: 0,
rowDataBound: (args: RowDataBoundEventArgs) : void => {
let data: string = getObject('EmployeeID', args.data);
let spkwl: HTMLElement = args.row.querySelector('#spkwl' + data);
let winloss: Sparkline = new Sparkline({
height: '50px',
width: '150px',
type: 'WinLoss',
valueType: 'Numeric',
fill: '#3C78EF',
tiePointColor: 'darkgray',
negativePointColor: '#f7a816',
dataSource: getSparkData('column', +data)
});
winloss.appendTo(spkwl);
},
rowHeight: 83,
columns: [
{ field: 'EmpID', headerText: 'Employee ID', width: 95 },
{ field: 'Name', headerText: 'Name', width: 110 },
{ field: 'DOB', headerText: 'DOB', width: 90, textAlign: 'Right', format: 'yMd' },
{
headerText: 'Year GR', textAlign: 'Center',
template: '#template', width: 120
}
]
height: 260
});
treeGridObj.appendTo('#TreeGrid');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<script type="text/x-template" id="template">
<div id="spkwl${EmployeeID}"></div>
</script>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='TreeGrid'></div>
</div>
</body>
</html>TreeGrid actions such as editing, filtering and sorting etc. will depend upon the column
field. If thefieldis not specified in the template column, the treegrid actions cannot be performed.
Using condition template
You can render the template elements based on condition.
In the following code, checkbox is rendered based on Approved field value.
<script id="template" type="text/x-template">
<div class="template_checkbox">
${if(approved)}
<input type="checkbox" checked> ${else}
<input type="checkbox"> ${/if}
</div>
</script>Source
Preview
index.ts
index.html
import { TreeGrid } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
allowResizing: true,
height: 315,
treeColumnIndex: 1,
columns: [
{ field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 90 },
{ field: 'taskName', headerText: 'Task Name', width: 180 },
{
headerText: 'Approved', textAlign: 'Center',
template: '#template', width: 120
},
{ field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' }
]
});
treeGridObj.appendTo('#TreeGrid');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<script id="template" type="text/x-template">
<div class="template_checkbox">
${if(approved)}
<input type="checkbox" checked> ${else}
<input type="checkbox"> ${/if}
</div>
</script>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='TreeGrid'></div>
</div>
</body>
</html>Column type
Column type can be specified using the columns.type property. It specifies the type of data the column binds.
If the format is defined for a column, the column uses type to select the appropriate format option (number
or date).
TreeGrid column supports the following types:
- string
- number
- boolean
- date
- datetime
If the
typeis not defined, it will be determined from the first record of thedataSource.
Column chooser
The column chooser has options to show or hide columns dynamically. It can be enabled by defining the
showColumnChooser as true.
To use the column chooser, inject the Column Chooser module in the treegrid.
Source
Preview
index.ts
index.html
import { TreeGrid, Selection, Toolbar, ColumnChooser } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';
TreeGrid.Inject(Selection, Toolbar, ColumnChooser);
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
showColumnChooser: true,
treeColumnIndex: 1,
toolbar: ['ColumnChooser'],
columns: [
{ field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 90 },
{ field: 'taskName', headerText: 'Task Name', width: 240, showInColumnChooser: false },
{ field: 'startDate', headerText: 'Start Date', width: 110, format: 'yMd' },
{ field: 'endDate', headerText: 'End Date', width: 110, textAlign: 'Right', type: 'date', format: 'yMd' },
{ field: 'duration', headerText: 'Duration', width: 100, textAlign: 'Right' },
{ field: 'progress', headerText: 'Progress', width: 100, textAlign: 'Right' },
{ field: 'priority', headerText: 'Priority', width: 90 }
]
height: 315
});
treeGridObj.appendTo('#TreeGrid');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='TreeGrid'></div>
</div>
</body>
</html>You can hide the column names in column chooser by defining the
columns.showInColumnChooseras false.
Open column chooser by external button
The Column chooser can be displayed on a page through external button by invoking
the openColumnChooser method with X and Y axis positions.
Source
Preview
index.ts
index.html
import { TreeGrid, Selection, ColumnChooser } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';
import { Button } from '@syncfusion/ej2-buttons';
TreeGrid.Inject(Selection, ColumnChooser);
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
treeColumnIndex: 1,
showColumnChooser: true,
columns: [
{ field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 90 },
{ field: 'taskName', headerText: 'Task Name', width: 240, showInColumnChooser: false },
{ field: 'startDate', headerText: 'Start Date', width: 110, format: 'yMd' },
{ field: 'endDate', headerText: 'End Date', width: 110, textAlign: 'Right', type: 'date', format: 'yMd' },
{ field: 'duration', headerText: 'Duration', width: 100, textAlign: 'Right' },
{ field: 'progress', headerText: 'Progress', width: 100, textAlign: 'Right' },
{ field: 'priority', headerText: 'Priority', width: 90 }
]
height: 315
});
treeGridObj.appendTo('#TreeGrid');
let show: Button = new Button({ cssClass: 'e-flat' }, '#show');
document.getElementById('show').onclick = () => {
treeGridObj.columnChooserModule.openColumnChooser(200, 50); // give X and Y axis
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<button id='show'>Open Column Chooser</button>
<div id='TreeGrid'></div>
</div>
</body>
</html>Column menu
The column menu has options to integrate features like sorting, filtering, and autofit. It will show a menu with the integrated feature when users click on multiple icon of the column. To enable column menu, you need to define the showColumnMenu property as true.
To use the column menu, inject the ColumnMenu module in the treegrid.
The default items are displayed in following table.
| Item | Description |
|---|---|
SortAscending |
Sort the current column in ascending order. |
SortDescending |
Sort the current column in descending order. |
AutoFit |
Auto fit the current column. |
AutoFitAll |
Auto fit all columns. |
Filter |
Show the filter option as given in filterSettings.type |
Source
Preview
index.ts
index.html
import {TreeGrid, Sort, Page, Filter, Resize, ColumnMenu} from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';
TreeGrid.Inject(Page, Filter, Sort, Resize, ColumnMenu );
let treegrid: TreeGrid = new TreeGrid(
{
dataSource: sampleData,
childMapping: 'subtasks',
height: 315,
allowFiltering: true,
allowResizing: true,
filterSettings: { type: 'Menu' },
allowSorting: true,
showColumnMenu: true,
treeColumnIndex: 1,
columns: [
{ field: 'taskID', headerText: 'Task ID', width: 90, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 180 },
{
field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date',format: 'yMd'
},
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }
]
});
treegrid.appendTo('#TreeGrid');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='TreeGrid'></div>
</div>
</body>
</html>
- You can disable column menu for a particular column by defining the
columns.showColumnMenuas false.
Checkbox Column
To render checkboxes in existing column, you need to set [columns.showCheckbox] property as true.
It is also possible to select the rows hierarchically using checkboxes in TreeGrid by enabling [autoCheckHierarchy] property. When we check on any parent record checkbox then the child record checkboxes will get checked.
Source
Preview
index.ts
index.html
import { TreeGrid } from '@syncfusion/ej2-treegrid';
import { data, sampleData } from './datasource.ts';
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
height: 315,
autoCheckHierachy: true,
treeColumnIndex: 1,
columns: [
{ field: 'taskID', headerText: 'Task ID', width: 90, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', showCheckbox: true, width: 180 },
{ field: 'approved', headerText: 'Approved', width: 90 },
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }
]
});
treeGridObj.appendTo('#TreeGrid');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='TreeGrid'></div>
</div>
</body>
</html>Responsive columns
You can toggle column visibility based on media queries which are defined
at the hideAtMedia.
The hideAtMedia accepts valid
Media Queries.
Source
Preview
index.ts
index.html
import { TreeGrid } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
height: 315,
treeColumnIndex: 1,
columns: [
{
field: 'taskID', headerText: 'Task ID', hideAtMedia: '(min-width: 700px)', width:90, textAlign: 'Right'
},// column hides when browser screen width lessthan 700px;
{ field: 'taskName', headerText: 'Task Name', width: 180 },
{
field: 'startDate', headerText: 'Start Date', hideAtMedia: '(max-width: 500px)',width: 90, textAlign: 'Right', type: 'date',format: 'yMd'
}, // column shows when browser screen width lessthan or equalto 500px;
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }
]
});
treeGridObj.appendTo('#TreeGrid');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='TreeGrid'></div>
</div>
</body>
</html>Controlling TreeGrid actions
You can enable or disable treegrid action for a particular column by setting the allowFiltering, and allowSorting properties.
Source
Preview
index.ts
index.html
import { TreeGrid, Filter, Sort } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';
TreeGrid.Inject(Filter, Sort);
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
height: 270,
treeColumnIndex: 1,
allowSorting: true,
allowFiltering: true,
columns: [
{
field: 'taskID', headerText: 'Task ID', allowSorting: false, width: 90,textAlign: 'Right'
},
{ field: 'taskName', headerText: 'Task Name', width: 180 },
{
field: 'startDate', headerText: 'Start Date', allowFiltering: false, width: 90, textAlign: 'Right', type: 'date',format: 'yMd'
},
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }
]
});
treeGridObj.appendTo('#TreeGrid');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='TreeGrid'></div>
</div>
</body>
</html>Show/hide columns by external button
You can show or hide treegrid columns dynamically using external buttons by invoking the showColumns or hideColumns method.
Source
Preview
index.ts
index.html
import { TreeGrid } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';
import { Button } from '@syncfusion/ej2-buttons';
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
height: 270,
treeColumnIndex: 1,
columns: [
{ field: 'taskID', headerText: 'Task ID', width: 90, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 180 },
{
field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date',format: 'yMd'
},
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }
]
});
treeGridObj.appendTo('#TreeGrid');
let show: Button = new Button({ cssClass: 'e-flat' }, '#show');
let hide: Button = new Button({ cssClass: 'e-flat' }, '#hide');
document.getElementById('show').onclick = () => {
treeGridObj.showColumns(['Task ID', 'Duration']); //show by HeaderText
};
document.getElementById('hide').onclick = () => {
treeGridObj.hideColumns(['Task ID', 'Duration']); //hide by HeaderText
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<button id='show'>Show</button>
<button id='hide'>Hide</button>
<div id='TreeGrid'></div>
</div>
</body>
</html>Complex data binding
You can achieve complex data binding in the treegrid by using the dot(.) operator in the column.field.
Source
Preview
index.ts
datasource.ts
import { TreeGrid } from '@syncfusion/ej2-treegrid';
import { complexData } from './datasource.ts';
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: complexData,
childMapping: 'subtasks',
height: 315,
treeColumnIndex: 1,
columns: [
{ field: 'taskID', headerText: 'Task ID', width: 90, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 180 },
{ field: 'assignee.firstName', headerText: 'Assignee', width: 90},
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }
]
});
treeGridObj.appendTo('#TreeGrid');/**
* TreeGrid DataSource
*/
export let summaryRowData: Object[] = [{
'FreightID': 'CX2389NK',
'FreightName': 'Maersk Edibles Co.',
'TotalUnits': 59,
'TotalCosts': 278,
'UnitWeight': 241,
'children': [{
'FreightID': 'QW4567OP',
'FreightName': 'Chang',
'TotalUnits': 12,
'TotalCosts': 140,
'UnitWeight': 50,
}, {
'FreightID': 'QW3458BH',
'FreightName': 'Aniseed Syrup',
'TotalUnits': 89,
'TotalCosts': 590,
'UnitWeight': 87,
}, {
'FreightID': 'QW8967OH',
'FreightName': 'Chef Anton',
'TotalUnits': 46,
'TotalCosts': 460,
'UnitWeight': 54,
}, {
'FreightID': 'QW6549NJ',
'FreightName': 'Chef Antons Gumbo Mix',
'TotalUnits': 34,
'TotalCosts': 590,
'UnitWeight': 50,
}]
},
{
'FreightID': 'DW8954IO',
'FreightName': 'Aeon fitness inc.',
'TotalUnits': 172,
'TotalCosts': 24,
'UnitWeight': 296,
'children': [
{
'FreightID': 'UF5647YH',
'FreightName': 'Reebox CrossFit Back Bay',
'TotalUnits': 60,
'TotalCosts': 870,
'UnitWeight': 73,
},
{
'FreightID': 'UF1290LK',
'FreightName': 'The Green Microgym',
'TotalUnits': 56,
'TotalCosts': 876,
'UnitWeight': 90,
},
{
'FreightID': 'UF8956KU',
'FreightName': 'DeFrancos',
'TotalUnits': 45,
'TotalCosts': 458,
'UnitWeight': 68,
},
{
'FreightID': 'UF7464JK',
'FreightName': 'Westside Barbell',
'TotalUnits': 25,
'TotalCosts': 231,
'UnitWeight': 65,
}],
},
{
'FreightID': 'EJ9456KN',
'FreightName': 'Sun technologies inc',
'TotalUnits': 33,
'TotalCosts': 229,
'UnitWeight': 192,
'children': [
{
'FreightID': 'GH2367OP',
'FreightName': 'Haier Group',
'TotalUnits': 78,
'TotalCosts': 678,
'UnitWeight': 23,
},
{
'FreightID': 'GH4309TH',
'FreightName': 'Panda Electronics',
'TotalUnits': 90,
'TotalCosts': 790,
'UnitWeight': 48,
},
{
'FreightID': 'GH3494SD',
'FreightName': 'Jiangsu Etern',
'TotalUnits': 36,
'TotalCosts': 435,
'UnitWeight': 56,
},
{
'FreightID': 'GH3213FR',
'FreightName': 'Zhejiang Fuchunjiang',
'TotalUnits': 12,
'TotalCosts': 278,
'UnitWeight': 65,
}],
}
];
export let summaryData: Object[] = [
{
ID: '1',
Name: 'Order 1',
units: '1395',
unitPrice: '47.00',
price: 65565,
category: 'Seafoods',
subtasks: [
{ ID: '1.1', Name: 'Mackerel', category: 'Frozen seafood', units: '235', unitPrice: '12.26', price: 2881.1 },
{ ID: '1.2', Name: 'Yellowfin Tuna', category: 'Frozen seafood', units: '324', unitPrice: '18.45', price: 5977.8 },
{ ID: '1.3', Name: 'Herrings', category: 'Frozen seafood', units: '488', unitPrice: '11.45', price: 5587.6 },
{ ID: '1.4', Name: 'Preserved Olives', category: 'Edible', units: '125', unitPrice: '19.56', price: 2445 },
{ ID: '1.5', Name: 'Sweet corn Frozen', category: 'Edible', units: '223', unitPrice: '12.34', price: 2751.82 }
]
},
{
ID: '2',
Name: 'Order 2',
units: '1944',
unitPrice: '58.45',
price: 1245.73,
category: 'Products',
subtasks: [
{ ID: '2.1', Name: 'Tilapias', category: 'Frozen seafood', units: '278', unitPrice: '15.45', price: 4295.1 },
{ ID: '2.2', Name: 'White Shrimp', category: 'Frozen seafood', units: '560', unitPrice: '17.66', price: 9889.6 },
{ ID: '2.3', Name: 'Fresh Cheese', category: 'Dairy', units: '323', unitPrice: '12.35', price: 3989 },
{ ID: '2.4', Name: 'Blue Veined Cheese', category: 'Dairy', units: '370', unitPrice: '15.77', price: 5834.9 },
{ ID: '2.5', Name: 'Butter', category: 'Dairy', units: '413', unitPrice: '19.45', price: 8032.85 }
]
},
{
ID: '3',
Name: 'Order 3',
units: '1120',
unitPrice: '33.45',
price: 37464,
category: 'Crystals',
subtasks: [
{ ID: '3.1', Name: 'Lead glassware', category: 'Solid crystals', units: '542', unitPrice: '19.56', price: 10601.52 },
{ ID: '3.2', Name: 'Pharmaceutical Glassware', category: 'Solid crystals', units: '324', unitPrice: '11.36', price: 3680.64 },
{ ID: '3.3', Name: 'Glass beads', category: 'Solid crystals', units: '254', unitPrice: '16.11', price: 4091.94 }
]
}
];
export let sampleData: Object[] = [
{
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 },
]
}]
}
]
}
];
export let textWrapData: Object[] = [
{
taskID: 1,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Specification of Software', startDate: new Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60, priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Develop prototype', startDate: new Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100, priority: 'Critical', approved: false },
{ taskID: 4, taskName: 'Get approval from customer', startDate: new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100, approved: true, priority: 'Normal' },
{ taskID: 5, taskName: 'Design Document', startDate: new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100, approved: true, priority: 'Critical' },
{ taskID: 6, taskName: 'Design complete', startDate: new Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0, priority: 'Normal', approved: true }
]
},
{
taskID: 7,
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: 8,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 86,
subtasks: [{
taskID: 9,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 96,
approved: false,
subtasks: [
{ taskID: 10, taskName: 'Development', startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'High', approved: false },
{ taskID: 12, taskName: 'Testing', startDate: new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 13, taskName: 'Bug fix', startDate: new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'Critical', approved: false },
{ taskID: 14, taskName: 'Get approval from customer', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
{ taskID: 15, taskName: 'Completed', startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0, progress: '0', priority: 'Low', approved: true }
]
}]
},
{
taskID: 16,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 50,
subtasks: [{
taskID: 17,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 56,
subtasks: [
{ taskID: 18, taskName: 'Development', startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Normal', approved: true },
{ taskID: 20, taskName: 'Testing', startDate: new Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
{ taskID: 21, taskName: 'Bug fix', startDate: new Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration: 2, progress: '0', priority: 'Low', approved: false },
{ taskID: 22, taskName: 'Get approval from customer', startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 23, taskName: 'Completed', startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration: 0, progress: '0', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 24,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 50,
subtasks: [{
taskID: 25,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 56,
duration: 11,
subtasks: [
{ taskID: 26, taskName: 'Development', startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true },
{ taskID: 28, taskName: 'Testing', startDate: new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 29, taskName: 'Bug fix', startDate: new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
{ taskID: 30, 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: 31, taskName: 'Completed', startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0, progress: '0', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let textdata: Object[] = [{
'Name': 'Robert King',
'FullName': 'RobertKing',
'Designation': 'Chief Executive Officer',
'EmployeeID': '1',
'EmpID': 'EMP001',
'Address': '507 - 20th Ave. E.Apt. 2A, Seattle',
'Contact': '(206) 555-9857',
'Country': 'USA',
'DOB': new Date('2/15/1963'),
'Children': [{
'Name': 'David william',
'FullName': 'DavidWilliam',
'Designation': 'Vice President',
'EmployeeID': '2',
'EmpID': 'EMP004',
'Address': '722 Moss Bay Blvd., Kirkland',
'Country': 'USA',
'Contact': '(206) 555-3412',
'DOB': new Date('5/20/1971'),
'Children': [{
'Name': 'Nancy Davolio',
'FullName': 'NancyDavolio',
'Designation': 'Marketing Executive',
'EmployeeID': '3',
'EmpID': 'EMP035',
'Address': '4110 Old Redmond Rd., Redmond',
'Country': 'USA',
'Contact': '(206) 555-8122',
'DOB': new Date('3/19/1966'),
'Children': [
{
'Name': 'Andrew Fuller',
'FullName': 'AndrewFuller',
'Designation': 'Sales Representative',
'EmployeeID': '4',
'EmpID': 'EMP045',
'Address': '14 Garrett Hill, London',
'Country': 'UK',
'Contact': '(71) 555-4848',
'DOB': new Date('9/20/1980')
},
{
'Name': 'Anne Dodsworth',
'FullName': 'AnneDodsworth',
'Designation': 'Sales Representative',
'EmployeeID': '5',
'EmpID': 'EMP091',
'Address': '4726 - 11th Ave. N.E., Seattle',
'Country': 'USA',
'Contact': '(206) 555-1189',
'DOB': new Date('10/19/1989')
},
{
'Name': 'Michael Suyama',
'FullName': 'MichaelSuyama',
'Designation': 'Sales Representative',
'EmployeeID': '6',
'EmpID': 'EMP110',
'Address': 'Coventry House Miner Rd., London',
'Country': 'UK',
'Contact': '(71) 555-3636',
'DOB': new Date('11/02/1987')
},
{
'Name': 'Janet Leverling',
'FullName': 'JanetLeverling',
'Designation': 'Sales Coordinator',
'EmployeeID': '7',
'EmpID': 'EMP131',
'Address': 'Edgeham Hollow Winchester Way, London',
'Country': 'UK',
'Contact': '(71) 555-3636',
'DOB': new Date('11/06/1990')
},
]
},
{
'Name': 'Romey Wilson',
'FullName': 'RomeyWilson',
'Designation': 'Sales Executive',
'EmployeeID': '8',
'EmpID': 'EMP039',
'Address': '7 Houndstooth Rd., London',
'Country': 'UK',
'Contact': '(71) 555-3690',
'DOB': new Date('02/02/1980'),
'Children': [
{
'Name': 'Margaret Peacock',
'FullName': 'MargaretPeacock',
'Designation': 'Sales Representative',
'EmployeeID': '9',
'EmpID': 'EMP213',
'Address': '4726 - 11th Ave. N.E., California',
'Country': 'USA',
'Contact': '(206) 555-1989',
'DOB': new Date('01/21/1986')
},
{
'Name': 'Laura Callahan',
'FullName': 'LauraCallahan',
'Designation': 'Sales Coordinator',
'EmployeeID': '10',
'EmpID': 'EMP201',
'Address': 'Coventry House Miner Rd., London',
'Country': 'UK',
'Contact': '(71) 555-2222',
'DOB': new Date( '12/01/1990')
},
{
'Name': 'Steven Buchanan',
'FullName': 'StevenBuchanan',
'Designation': 'Sales Representative',
'EmployeeID': '11',
'EmpID': 'EMP197',
'Address': '200 Lincoln Ave, Salinas, CA 93901',
'Country': 'USA',
'Contact': '(831) 758-7408',
'DOB': new Date('03/23/1987')
},
{
'Name': 'Tedd Lawson',
'FullName': 'TeddLawson',
'Designation': 'Sales Representative',
'EmployeeID': '12',
'EmpID': 'EMP167',
'Address': '200 Lincoln Ave, Salinas, CA 93901',
'Country': 'USA',
'Contact': '(831) 758-7368 ',
'DOB': new Date('08/09/1989')
},
]
}]
}]
}];
export let headerData: Object[] = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
resourceId: '8',
duration: 5,
progress: '100',
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: '100', resourceId: '2' },
{ taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: '100', resourceId: '1' },
{ taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: '100', resourceId: '1' },
{ taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: '100', resourceId: '7' }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
resourceId: '1',
progress: '60',
duration: 3,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: '60', predecessor: '6FS', resourceId: '2' },
{ taskID: 8, taskName: 'Develop prototype', startDate: new Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: '100', predecessor: '6FS', resourceId: '3' },
{ taskID: 9, taskName: 'Get approval from customer', startDate: new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: '100', predecessor: '9FS', resourceId: '1' },
{ taskID: 10, taskName: 'Design complete', startDate: new Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: '100', resourceId: '9' }
]
},
{
taskID: 11,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
resourceId: '5',
progress: '80',
duration: 5,
subtasks: [
{
taskID: 12,
taskName: 'Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
resourceId: '7',
duration: 5,
progress: '50',
subtasks: [{
taskID: 13,
taskName: 'Implementation Module',
resourceId: '3',
progress: '50',
duration: 3,
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
subtasks: [
{ taskID: 14, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3, progress: '50', predecessor: '11FS', resourceId: '3' },
{ taskID: 15, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3, progress: '50', predecessor: '11FS', resourceId: '3' },
{ taskID: 16, taskName: 'Testing', startDate: new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2, progress: '0', predecessor: '15FS,16FS', resourceId: '4' },
{ taskID: 17, taskName: 'Bug fix', startDate: new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2, progress: '0', predecessor: '17FS', resourceId: '4' },
{ taskID: 18, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2, progress: '0', predecessor: '18FS', resourceId: '1' },
{ taskID: 19, taskName: 'Phase complete', startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0, predecessor: '19FS', progress: '0', resourceId: '9' }
]
}]
}
]
}
];
export let stackedData: Object[] = [
{
orderID: '1',
orderName: 'Order 1',
orderDate: new Date('02/03/2017'),
shippedDate: new Date('02/09/2017'),
units: '1395',
unitPrice: '47.00',
price: 65565,
shipMentCategory: 'Seafood',
subtasks: [
{ orderID: '1.1', orderName: 'Mackerel', shipMentCategory: 'Frozen seafood', units: '35',
orderDate: new Date('03/03/2017'), shippedDate: new Date('03/10/2017'), unitPrice: '12.56', price: 439.6},
{ orderID: '1.2', orderName: 'Yellowfin Tuna', shipMentCategory: 'Frozen seafood', units: '324',
orderDate: new Date('05/03/2017'), shippedDate: new Date('05/10/2017'), unitPrice: '28.26', price: 9156.24 },
{ orderID: '1.3', orderName: 'Herrings', shipMentCategory: 'Frozen seafood', units: '48',
orderDate: new Date('05/08/2017'), shippedDate: new Date('05/15/2017'), unitPrice: '11.35', price: 544.8 },
{ orderID: '1.4', orderName: 'Preserved Olives', shipMentCategory: 'Edible', units: '125',
orderDate: new Date('06/10/2017'), shippedDate: new Date('06/17/2017'), unitPrice: '29.23', price: 3653.75},
{ orderID: '1.5', orderName: 'Sweet corn Frozen', shipMentCategory: 'Edible', units: '223',
orderDate: new Date('07/12/2017'), shippedDate: new Date('07/19/2017'), unitPrice: '47.17', price: 10518.91 }
]
},
{
orderID: '2',
orderName: 'Order 2',
orderDate: new Date('01/10/2018'),
shippedDate: new Date('01/16/2018'),
units: '1944',
unitPrice: '58.45',
price: 113626.8,
shipMentCategory: 'Seafood',
subtasks: [
{ orderID: '2.1', orderName: 'Tilapias', shipMentCategory: 'Frozen Seafood',
orderDate: new Date('02/05/2018'), shippedDate: new Date('02/12/2018'), units: '278', unitPrice: '15.25', price: 4239.5 },
{ orderID: '2.2', orderName: 'White Shrimp', shipMentCategory: 'Frozen seafood', units: '560',
orderDate: new Date('05/22/2018'), shippedDate: new Date('05/29/2018'), unitPrice: '72.45', price: 36225 },
{ orderID: '2.3', orderName: 'Fresh Cheese', shipMentCategory: 'Dairy', units: '323', unitPrice: 12.45,
orderDate: new Date('06/08/2018'), shippedDate: new Date('06/15/2018'), price: 4021.35 },
{ orderID: '2.4', orderName: 'Blue Veined Cheese', shipMentCategory: 'Dairy', units: '370', unitPrice: 15.36,
orderDate: new Date('07/10/2018'), shippedDate: new Date('07/17/2018'), price: 5683.2 },
{ orderID: '2.5', orderName: 'Butter', shipMentCategory: 'Dairy', units: '413', unitPrice: '19.35',
orderDate: new Date('09/18/2018'), shippedDate: new Date('09/25/2018'), price: 7991.55}
]
},
{
orderID: '3',
orderName: 'Order 3',
orderDate: new Date('09/10/2018'),
shippedDate: new Date('09/20/2018'),
units: '1120',
unitPrice: '33.34',
price: 37340.8,
shipMentCategory: 'Seafood',
subtasks: [
{ orderID: '3.1', orderName: 'Lead glassware', shipMentCategory: 'Solid crystals',
orderDate: new Date('02/07/2018'), shippedDate: new Date('02/14/2018'), units: '542', unitPrice: '46.45', price: 25175.9 },
{ orderID: '3.2', orderName: 'Pharmaceutical', shipMentCategory: 'Solid crystals',
orderDate: new Date('04/19/2018'), shippedDate: new Date('04/26/2018'), units: '324', unitPrice: '11.56', price: 3745.44 },
{ orderID: '3.3', orderName: 'Glass beads', shipMentCategory: 'Solid crystals', units: '254',
orderDate: new Date('05/22/2018'), shippedDate: new Date('03/22/2018'), unitPrice: '16.25', price: 4127.5 }
]
}
];
export let formatData: Object[] = [
{
orderID: '1',
orderName: 'Order 1',
orderDate: new Date('02/03/2017'),
shippedDate: new Date('10/03/2018'),
units: 1395,
unitPrice: 47,
price: 133.66,
Category: 'seafood',
subtasks: [
{ orderID: '1.1', orderName: 'Mackerel', Category: 'Frozen seafood', units: 235,
orderDate: new Date('02/03/2017'), shippedDate: new Date('05/13/2018'), unitPrice: 12, price: 28.20 },
{ orderID: '1.2', orderName: 'Yellowfin Tuna', Category: 'Frozen seafood', units: 324,
orderDate: new Date('05/03/2017'), shippedDate: new Date('05/22/2018'), unitPrice: 8, price: 25.92 },
{ orderID: '1.3', orderName: 'Herrings', Category: 'Frozen seafood', units: 488,
orderDate: new Date('10/03/2017'), shippedDate: new Date('10/14/2018'), unitPrice: 11, price: 52.68 },
{ orderID: '1.4', orderName: 'Preserved Olives', Category: 'Edible', units: 125,
orderDate: new Date('08/03/2017'), shippedDate: new Date('08/03/2018'), unitPrice: 9, price: 11.25 },
{ orderID: '1.5', orderName: 'Sweet corn Frozen', Category: 'Edible', units: 223,
orderDate: new Date('09/03/2017'), shippedDate: new Date('09/03/2018'), unitPrice: 7, price: 15.61 }
]
},
{
orderID: '2',
orderName: 'Order 2',
orderDate: new Date('05/03/2017'),
shippedDate: new Date('03/15/2018'),
units: 1944,
unitPrice: 58,
price: 212.33,
Category: 'seafood',
subtasks: [
{ orderID: '2.1', orderName: 'Tilapias', Category: 'Frozen seafood',
orderDate: new Date('03/05/2017'), shippedDate: new Date('03/15/2018'), units: 278, unitPrice: 15, price: 41.70 },
{ orderID: '2.2', orderName: 'White Shrimp', Category: 'Frozen seafood', units: 56,
orderDate: new Date('07/05/2017'), shippedDate: new Date('03/15/2018'), unitPrice: 7, price: 39.20 },
{ orderID: '2.3', orderName: 'Fresh Cheese', Category: 'Dairy', units: 323, unitPrice: 12,
orderDate: new Date('09/03/2017'), shippedDate: new Date('09/19/2018'), price: 38.76 },
{ orderID: '2.4', orderName: 'Blue Veined Cheese', Category: 'Dairy', units: 370, unitPrice: 15,
orderDate: new Date('11/03/2017'), shippedDate: new Date('11/13/2018'), price: 55.50 },
{ orderID: '2.5', orderName: 'Butter', Category: 'Dairy', units: 413, unitPrice: 9,
orderDate: new Date('10/23/2017'), shippedDate: new Date('10/23/2018'), price: 37.17 }
]
},
{
orderID: '3',
orderName: 'Order 3',
orderDate: new Date('03/10/2017'),
shippedDate: new Date('03/20/2018'),
units: '1120',
unitPrice: '33',
price: '108.80',
Category: 'seafood',
subtasks: [
{ orderID: '3.1', orderName: 'Lead glassware', Category: 'Solid crystals',
orderDate: new Date('08/03/2017'), shippedDate: new Date('03/18/2018'), units: '542', unitPrice: '6', price: '32.52' },
{ orderID: '3.2', orderName: 'Pharmaceutical Glassware', Category: 'Solid crystals',
orderDate: new Date('03/10/2017'), shippedDate: new Date('03/20/2018'), units: '324', unitPrice: '11', price: '35.64' },
{ orderID: '3.3', orderName: 'Glass beads', Category: 'Solid crystals', units: '254',
orderDate: new Date('03/02/2017'), shippedDate: new Date('03/22/2018'), unitPrice: '16', price: '40.64' }
]
}
];
export let sortData: Object[] = [
{
orderID: '1',
orderName: 'Order 1',
orderDate: new Date('02/03/2017'),
shippedDate: new Date('02/09/2017'),
units: '1395',
unitPrice: '47',
price: 133.66,
Category: 'Seafoods',
subtasks: [
{ orderID: '1.1', orderName: 'Mackerel', Category: 'Frozen seafood', units: '235',
orderDate: new Date('03/03/2017'), shippedDate: new Date('03/10/2017'), unitPrice: '12', price: 28.20 },
{ orderID: '1.2', orderName: 'Yellowfin Tuna', Category: 'Frozen seafood', units: '324',
orderDate: new Date('04/05/2017'), shippedDate: new Date('04/12/2017'), unitPrice: '8', price: 25.92 },
{ orderID: '1.3', orderName: 'Herrings', Category: 'Frozen seafood', units: '488',
orderDate: new Date('05/08/2017'), shippedDate: new Date('05/15/2017'), unitPrice: '11', price: 52.68 },
{ orderID: '1.4', orderName: 'Preserved Olives', Category: 'Edible', units: '125',
orderDate: new Date('06/10/2017'), shippedDate: new Date('06/17/2017'), unitPrice: '9', price: 11.25 },
{ orderID: '1.5', orderName: 'Sweet corn Frozen', Category: 'Edible', units: '223',
orderDate: new Date('07/12/2017'), shippedDate: new Date('07/19/2019'), unitPrice: '7', price: 15.61 }
]
},
{
orderID: '2',
orderName: 'Order 2',
orderDate: new Date('01/10/2018'),
shippedDate: new Date('01/16/2018'),
units: '1944',
unitPrice: '58',
price: 212.33,
Category: 'products',
subtasks: [
{ orderID: '2.1', orderName: 'Tilapias', Category: 'Frozen seafood',
orderDate: new Date('02/05/2018'), shippedDate: new Date('02/12/2018'), units: '278', unitPrice: '15', price: 41.70 },
{ orderID: '2.2', orderName: 'White Shrimp', Category: 'Frozen seafood', units: '560',
orderDate: new Date('05/22/2018'), shippedDate: new Date('05/29/2018'), unitPrice: '7', price: 39.20 },
{ orderID: '2.3', orderName: 'Fresh Cheese', Category: 'Dairy', units: '323', unitPrice: '12',
orderDate: new Date('06/08/2018'), shippedDate: new Date('06/15/2018'), price: 38.76 },
{ orderID: '2.4', orderName: 'Blue Veined Cheese', Category: 'Dairy', units: '370', unitPrice: '15',
orderDate: new Date('07/10/2018'), shippedDate: new Date('07/17/2018'), price: 55.50 },
{ orderID: '2.5', orderName: 'Butter', Category: 'Dairy', units: '413', unitPrice: '9',
orderDate: new Date('09/18/2018'), shippedDate: new Date('09/25/2018'), price: 37.17 }
]
},
{
orderID: '3',
orderName: 'Order 3',
orderDate: new Date('09/10/2018'),
shippedDate: new Date('09/20/2018'),
units: '1120',
unitPrice: '33',
price: 108.80,
Category: 'Crystals',
subtasks: [
{ orderID: '3.1', orderName: 'Lead glassware', Category: 'Solid crystals',
orderDate: new Date('02/07/2018'), shippedDate: new Date('02/14/2018'), units: '542', unitPrice: '6', price: 32.52 },
{ orderID: '3.2', orderName: 'Pharmaceutical Glassware', Category: 'Solid crystals',
orderDate: new Date('04/19/2018'), shippedDate: new Date('04/26/2018'), units: '324', unitPrice: '11', price: 35.64 },
{ orderID: '3.3', orderName: 'Glass beads', Category: 'Solid crystals', units: '254',
orderDate: new Date('05/22/2018'), shippedDate: new Date('03/22/2018'), unitPrice: '16', price: 40.64 }
]
}
];
export let lockRowDropDownData: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,
13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
31, 32, 33, 34, 35, 36];
export let projectData: Object[] = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new Date('02/23/2017'), 'Duration': 3, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new Date('02/23/2017'), 'Duration': 4, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new Date('03/14/2017'), 'Duration': 6, 'Priority' : 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new Date('03/02/2017'), 'Duration': 11, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new Date('03/02/2017'), 'Duration': 7, 'Priority' : 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new Date('03/02/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new Date('03/02/2017'), 'Duration': 15, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new Date('03/09/2017'), 'Duration': 17, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new Date('03/9/2017'), 'Duration': 0, 'Priority' : 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new Date('03/9/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new Date('03/9/2017'), 'Duration': 11, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new Date('03/9/2017'), 'Duration': 1, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new Date('03/9/2017'), 'Duration': 14, 'Priority' : 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }
];
export let lineData: Object[] = [
[0, 6, 4, 1, 3, 2, 5],
[5, 4, 6, 3, 1, 2, 0],
[6, 4, 0, 3, 2, 5, 1],
[4, 6, 3, 0, 1, 2, 5],
[3, 5, 6, 4, 0, 1, 2],
[1, 3, 4, 2, 5, 0, 6],
[2, 4, 0, 3, 5, 6, 1],
[5, 4, 6, 3, 1, 2, 0],
[0, 6, 4, 1, 3, 2, 5],
[6, 4, 0, 3, 2, 5, 1],
[4, 6, 3, 0, 1, 2, 5],
[3, 5, 6, 4, 0, 1, 2],
[1, 3, 4, 2, 5, 0, 6],
[2, 4, 0, 3, 5, 6, 1],
[5, 4, 6, 3, 1, 2, 0],
[0, 6, 4, 1, 3, 2, 5],
[6, 4, 0, 3, 2, 5, 1],
[4, 6, 3, 0, 1, 2, 5],
[2, 4, 0, 3, 5, 6, 1],
[3, 5, 6, 4, 0, 1, 2],
[1, 3, 4, 2, 5, 0, 6]
];
export let columnData: Object[] = [
[0, 6, -4, 1, -3, 2, 5],
[5, -4, 6, 3, -1, 2, 0],
[6, 4, 0, 3, -2, 5, 1],
[4, -6, 3, 0, 1, -2, 5],
[3, 5, -6, -4, 0, 1, 2],
[1, -3, 4, -2, 5, 0, 6],
[2, 4, 0, -3, 5, -6, 1],
[5, 4, -6, 3,