private columns:any = [
{
width: 50,
field: 'pronto_row_id',
headerText: 'Task ID',
visible: false,
allowEditing: false,
},
{
field: 'custom',
showCheckbox: true,
width: 80,
//type:"checkbox",
},
{
width: 200,
field: 'TaskID',
headerText: 'Task ID',
isPrimaryKey: true,
visible: false,
allowEditing: false,
},
{
field: 'order_code',
headerText: 'Order#',
width: 85,
allowEditing: false,
},
{
field: 'asset_code',
headerText: 'Asset',
width: 60,
allowEditing: false,
},
{
field: 'operationSequence',
headerText: 'Operation Sequence',
width: 40,
allowEditing: false,
},
{
field: 'TaskName',
headerText: 'Job Name',
clipMode: 'EllipsisWithTooltip',
width: 400,
},
{
field: 'tradeCode',
headerText: 'Trade',
width: 60,
allowEditing: true,
// edit: getParamsDD(
// { text: 'trade_code', value: 'trade_id' },
// 'tradeCode',
// 'trade'
// ),
},
{
field: 'required',
headerText: 'Reqd',
width: 60,
allowEditing: true,
type: 'numeric',
format: 'c2',
editType: 'numericedit',
edit: { params: { min: 1, max: 10000 } },
},
{
field: 'Duration',
headerText: 'Dur',
width: 60,
visible: false,
},
{
field: 'Work',
headerText: 'Work',
width: 90,
edit: { params: { min: 0, max: 10000 } },
},
{
width: 60,
field: 'shift',
headerText: 'Shift',
allowEditing: true,
// edit: getParamsDD(
// { text: 'rosterCode', value: 'rosterId' },
// 'shift',
// 'shift'
// ),
},
{
field: 'teamCode',
headerText: 'Team',
width: 60,
allowEditing: true,
// edit: getParamsDD(
// { text: 'team_code', value: 'team_id' },
// 'teamCode',
// 'team'
// ),
},
{
width: 150,
field: 'StartDate',
// format:'dd/MM/yyyy HH:mm',
},
{
width: 150,
field: 'EndDate',
// format:'dd/MM/yyyy HH:mm',
},
{
field: 'priority_code',
headerText: 'Priority',
width: 40,
visible: false,
allowEditing: false,
},
{
field: 'status_code',
headerText: 'Status Code',
width: 65,
visible: true,
allowEditing: true,
// edit: getParamsDD(
// { value: 'value', text: 'alias' },
// 'status_code',
// 'global-filter?where=operation$status$isEnabled€1'
// ),
},
{
width: 40,
field: 'type_code',
headerText: 'Type',
visible: false,
allowEditing: false,
},
{
width: 70,
field: 'order_resp_code',
headerText: 'Resp',
allowEditing: true,
// edit: getParamsDD(
// { value: 'sys_tbl_code', text: 'sys_description' },
// 'order_resp_code',
// 'system-config?where=P2'
// ),
},
{
width: 60,
field: 'Progress',
visible: false,
},
{
width: 80,
field: 'planned_by',
headerText: 'Planned By',
visible: false,
},
{
visible: false,
field: 'description',
headerText: 'WO Description',
},
{
width: '150',
field: 'site_details_1',
headerText: 'Asset Type',
visible: false,
},
{
width: '250',
field: 'long_description',
headerText: 'Op. Description',
visible: false,
},
{
width: '150',
field: 'description',
headerText: 'WO Description',
visible: false,
},
{
width: '150',
field: 'Predecessor',
visible: false,
},
{
width: 70,
field: 'isRejected',
headerText: 'ISRESCHEDULED',
visible: true,
allowEditing: false,
// template: isRejected,
},
{
width: 70,
field: 'isDone',
headerText: 'ISDONE',
visible: false,
allowEditing: false,
},
];
<GanttComponent
id='cloud-scheduler-gantt'
dataSource={[
{
TaskID: 1,
TaskName: 'Project initiation',
StartDate: new Date('04/02/2024'),
EndDate: new Date('04/21/2024'),
subtasks: [
{
TaskID: 2,
TaskName: 'Identify site location',
StartDate: new Date('04/02/2024'),
Duration: 0,
Progress: 30,
resources: [1],
info: 'Measure the total property area alloted for construction',
isExpand: false,
subtasks: [
{
TaskID: 3,
TaskName: 'Perform Soil test',
StartDate: new Date('04/02/2024'),
Duration: 4,
Predecessor: '2',
resources: [2, 3, 5],
info:
'Obtain an engineered soil test of lot where construction is planned.' +
'From an engineer or company specializing in soil testing',
},
{
TaskID: 4,
TaskName: 'Soil test approval',
StartDate: new Date('04/02/2024'),
Duration: 0,
Predecessor: '3',
Progress: 30,
},
],
},
{
TaskID: 5,
TaskName: 'Identify site location',
StartDate: new Date('04/02/2024'),
Duration: 0,
Progress: 30,
resources: [1],
info: 'Measure the total property area alloted for construction',
isExpand: false,
subtasks: [
{
TaskID: 6,
TaskName: 'Perform Soil test',
StartDate: new Date('04/02/2024'),
Duration: 4,
Predecessor: '2',
resources: [2, 3, 5],
info:
'Obtain an engineered soil test of lot where construction is planned.' +
'From an engineer or company specializing in soil testing',
},
{
TaskID: 7,
TaskName: 'Soil test approval',
StartDate: new Date('04/02/2024'),
Duration: 0,
Predecessor: '3',
Progress: 30,
},
],
},
],
},
]}
created={this.created}
ref={(gant: GanttComponent) => (this.gantObj = gant)}
dateFormat='dd/MM/yyyy HH:mm'
durationUnit='Hour'
// actionComplete={this.actionCompletedElement.bind(this)}
// actionBegin={this.actionBegin.bind(this)}
// dataBound={this.dataBound.bind(this)}
treeColumnIndex={1}
// contextMenuItems={this.contextMenuItems}
// contextMenuOpen={this.contextMenuOpen.bind(this)}
// contextMenuClick={this.contextMenuClick.bind(this)}
showColumnMenu={true}
width={'100%'}
allowFiltering={true}
selectionSettings={{
type: 'Multiple',
mode: 'Row',
enableToggle: true,
}}
allowSorting={true}
connectorLineBackground='red'
allowResizing={true}
workWeek={[
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday',
]}
// toolbarClick={this.toolbarClick.bind(this)}
//editDialogFields={this.editDialogFields}
// projectStartDate={this.state.projectStartDate}
// projectEndDate={this.state.projectEndDate}
allowRowDragAndDrop={false}
// queryCellInfo={this.gantCellQuery.bind(this)}
/// rowSelected={this.rowSelected}
// rowDeselected={this.rowDeselected}
//enablePredecessorValidation ={false}
//autoCalculateDateScheduling={false}
taskFields={{
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks',
notes: 'info',
resourceInfo: 'Resources',
segments: 'Segments',
work: 'Work',
}}
// timelineSettings={this.timelineSettings}
// labelSettings={this.labelSettings}
// editSettings={
// this.state.current_plan_isLocked
// ? undefined
// : this.editSettings
// }
height={
550
}
gridLines={'Both'}
// toolbar={
// this.props.isSuperVisor ? this.toolbarAdmin : this.toolbar
// }
//resourceFields={this.resourceFields}
// resources={this.state.resourceData}
enableContextMenu={true}
filterSettings={{ type: 'Menu' }}
allowExcelExport={true}
allowPdfExport={true}
allowReordering={true}
highlightWeekends={true}
enableVirtualization={true}
columns={this.columns}
splitterSettings={{
columnIndex: 2,
position: '60%',
}}
// dayWorkingTime={this.state.dayWorkingTime}
// timezone={Intl.DateTimeFormat().resolvedOptions().timeZone}
>
{/* <ColumnsDirective>
{columns.map((el: any) => {
return (
<ColumnDirective
key={el.field}
field={el.field}
headerText={el.headerText}
width={el.width}
visible={el.visible}
editType={el.editType}
edit={el.edit}
type={el.type}
format={el.format}
allowEditing={el.allowEditing}
displayAsCheckBox={el.displayAsCheckBox}
template={el.template}
/>
);
})}
</ColumnsDirective>
<EditDialogFieldsDirective>
{editDialogFields.map((el) => {
return (
<EditDialogFieldDirective
key={el.type}
type={el.type as any}
headerText={el.headerText}
/>
);
})}
</EditDialogFieldsDirective> */}
<Inject
services={[
Edit,
Selection,
Toolbar,
DayMarkers,
CriticalPath,
Resize,
Filter,
ContextMenu,
ColumnMenu,
VirtualScroll,
ExcelExport,
PdfExport,
Sort,
Reorder,
RowDD
]}
/>
</GanttComponent>
