Is there a way where we can round off the duration to number or round off to two decimals ???
Support Forum
Here is the config we have used in our application , I hope this helps..
<BryntumGantt
tbar = {{}}
height= {"inherit"}
width = {'inherit'}
ref={(ganttRef) => {
if(!props.scheduleInstance.getGanttInstance()){
props.scheduleInstance.setGanttInstance(ganttRef);
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
ref.current = ganttRef;
}
}}
percentBarFeature = {
{allowResize: false}
}
taskDragFeature = {false}
taskResizeFeature = {false}
taskSegmentDragFeature = {false}
taskSegmentResizeFeature = {false}
rowReorderFeature = {false}
features = {{
excelExporter : {
dateFormat : 'YYYY-MM-DD HH:mm',
zipcelx
},
filter : true,
timeRanges : true,
projectLines: false,
cellTooltip : props.features.cellTooltip,
...props.features,
taskMenu : false,
}}
dependenciesFeature = {{
allowCreate : false
}}
dependencyEditFeature = {false}
// cellMenuFeature = {{disabled : true}}
taskEditFeature={getTaskEditorItems(emitNotesInput, saveTrigger)}
onAfterTaskEdit={(event:any)=> saveNotes(event)}
listeners = {{
beforeTaskEditShow(event: { editor: { widgetMap: any; }; taskRecord: any; }) {
const { editor : { widgetMap }, taskRecord } = event;
const { activityCodesTab, notesTab, tradepartnersTab } = widgetMap;
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
event.editor._items.values[0].activeTab = 0
activityCodesTab.widgetMap.grid.store.loadData(taskRecord._data.activityCodes);
notesTab.widgetMap.grid.store.loadData(taskRecord._data.notes);
taskRecord._data.iswbs ? notesTab.hidden = true : notesTab.hidden = false
tradepartnersTab.widgetMap.grid.store.loadData(taskRecord._data?.tradepartners ?? []);
},
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
cellDblClick({ record }) {
props?.scheduleInstance.showTaskEditDialog(record._data.guid)
},
beforePresetChange(event: { source: any; preset: { options: { startDate: any; endDate: any; }; }; }) {
const gantt = event.source;
event.preset.options.startDate = gantt.project.startDate;
event.preset.options.endDate = gantt.project.endDate;
}
}}
selectionMode = {props.selectionMode}
/>
const selectionMode = {
row : false,
cell : false,
rowCheckboxSelection : true,
multiSelect : true,
checkbox : true,
showCheckAll : true,
deselectFilteredOutRecords : true,
includeChildren : true,
preserveSelectionOnPageChange : true,
preserveSelectionOnDatasetChange : true,
deselectOnClick : true,
}
Here is the columnDef we have used :
const columnDef: Partial<ColumnStoreConfig>[] | object[] = [
{
type: 'activityidcolumn',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
renderer({ record }) {
const emptyString = " ";
if(record._data.activityid){
return record._data.activityid
}
else {
return emptyString
}
},
text: 'Activity Id'
},
{
type : 'widget',
field : 'widget',
text : 'Notes',
width : 30,
exportable : false,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
renderer : ({record,widgets,isExport}) => {
if(record._data.notes?.length === 0 || record.data.iswbs ) {
widgets[0].hidden = true
} else {
widgets[0].hidden = false
}
},
widgets : [{
type : 'button',
icon : 'b-icon b-fa-file',
style : "background-color: white",
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
onClick : ({ source: btn }) => {
scheduleRef.current?.scheduleInstanceRef.current?.showTaskEditDialog(btn.cellInfo.record._data.guid)
}
}]
},
{
type: 'name',
field: 'name',
text: 'Activity Name',
width: 350,
editor: false,
tooltipRenderer : false,
},
{
type: 'statuscolumn',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
renderer({ record }) {
const emptyString = " ";
if(record._data.status){
return record._data.status
}
else {
return emptyString
}
}
},
{ type: 'date', field: 'startDate', text: 'Start Date', editor: false},
{ type: 'date', field: 'endDate', text: 'End Date', editor: false},
{ type: 'duration', field: 'duration', editor: false ,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
renderer: ({ record, column, isExport }) => {
// return !record.duration ? parseInt(`0`) : record.duration
if(isExport) {
return !record.duration ? parseInt(`0`) : record.duration
} else {
return !record.duration ? `0 Days` : `${record.duration} Days`
}
}
},
{
type: 'percentdone',
field: 'percentDone',
text: 'Progress',
editor: false,
tooltipRenderer : false
},
{
type: 'criticalcolumn',
renderer: (record: any) =>{
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
if(record.record._data.isCritical){
return "Yes"
}else{
return "No"
}
},
},
{
type : 'resourceassignment',
text : 'Trade Partners',
itemTpl : (assignment: { resourceName: string; }) => assignment.resourceName,
editor: false,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
tooltipRenderer : ({record, column,cellElement}) => {
let assignmentList = "";
record.getAssigned().forEach((assignment: { _data: { resource: { _data: { name: string; }; }; }; }) => {
assignmentList += `${assignment._data.resource._data.name};`;
});
return assignmentList.slice(0,assignmentList.length-1);
}
},
{
type : "hra",
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
renderer : ({ record, isExport }) => {
if(isExport){
let hraList = "";
if(record._data.hra){
record._data.hra.forEach((hra: { hravalue: string; hraid: string }) => {
hraList += `${hra.hraid} - ${hra.hravalue},`
});
}
return hraList.slice(0,hraList.length-1);
}
let hra = "";
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
if(record._data.hra && record._data.hra.length > 1){
record._data.hra.forEach((hraVal : {hravalue : string; hraid : string}) => {
hra += `<div class = "chipView">${hraVal.hraid} - ${hraVal.hravalue}</div>`
});
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
}else if(record._data.hra && record._data.hra.length === 1){
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
hra += `<div class = "chipView">${record._data.hra[0].hraid} - ${record._data.hra[0].hravalue}</div>`
}
return `<div class="chipViewRenderer">
${hra}
</div>`
},
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
tooltipRenderer : ({ record, column }) => {
if(record._data.hra && record._data.hra.length > 0){
let res = "";
record._data.hra.forEach((hra: { hravalue: string; hraid : string}) => {
res += `${hra.hraid}-${hra.hravalue},`
});
return res.slice(0,res.length-1);
}
},
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
filterable: ({ value, record }) => {
if(record._data.hra && value === ""){
return true;
}else if(record._data.hra && value !== ""){
let res = false;
record._data.hra.forEach((hra: { hravalue: string; hraid : string}) => {
if(hra.hravalue.toLocaleLowerCase().includes(value.toString().toLocaleLowerCase()) || hra.hraid.toLocaleLowerCase().includes(value.toString().toLocaleLowerCase())){
res = true;
}
});
return res;
}else{
return false;
}
}
}
];
There's your problem. You just output the number with no rounding. The Duration column type does that, and its superclass, Number column does that without adding units.
Try this
renderer : function ({ value, isExport }) {
if (isExport) {
// Use the NumberColumn's formatter
return this.constructor.superclass.prototype.formatValue.call(this, value.magnitude);
}
// Use this column's defaultRenderer
return this.defaultRenderer(...arguments);
}