toolbar: [
{ text: 'Add', tooltipText: 'New task', id: 'AddTask', align: 'Left' },
{
text: 'Edit',
tooltipText: 'Edit task',
id: 'EditTask',
align: 'Left'
},
{
text: 'Delete',
tooltipText: 'Delete task',
id: 'DeleteTask',
align: 'Left'
},
'Cancel',
'ExpandAll',
'CollapseAll',
'ZoomIn',
'ZoomOut',
'ZoomToFit'
],
columns: [
{
field: 'id',
headerText: 'Id',
width: '150',
clipMode: 'EllipsisWithTooltip',
isPrimaryKey: true
},
{
field: 'title',
headerText: 'Task Name',
width: '150',
clipMode: 'EllipsisWithTooltip'
},
{
field: 'startDate',
headerText: 'Start Date',
width: '150',
format: { format: 'dd/MM/yyyy', type: 'date' }
},
{
field: 'duedate',
headerText: 'Due Date',
width: '150',
format: { format: 'dd/MM/yyyy', type: 'date' }
},
{ field: 'progress', headerText: 'Progress', width: '150' },
{ field: 'predecessor', headerText: 'Predecessor', width: '150' }
],
editSettings: {
allowAdding: false,
allowEditing: true,
allowDeleting: false,
allowTaskbarEditing: false,
showDeleteConfirmDialog: false,
mode: 'Auto'
},
timelineSettings: {
timelineUnitSize: 60,
topTier: {
format: 'dd MMM yyyy',
unit: 'Week'
},
bottomTier: {
unit: 'Day',
format: 'dd'
}
},
selectionSettings: {
mode: 'Row'
},
splitterSettings: {
columnIndex: 4
},
taskFields: {
id: 'id',
name: 'title',
startDate: 'startDate',
endDate: 'duedate',
progress: 'progress',
dependency: 'predecessor',
child: 'subtasks'
}