Our blazing fast Grid component built with pure JavaScript


Post by vconstruct »

Is there a way where we can round off the duration to number or round off to two decimals ???

durationGrid.png
durationGrid.png (21.84 KiB) Viewed 308 times

Post by mats »

That looks like a bug, can you please share your config?


Post by vconstruct »

What do you want us to share exactly? Which config you are referring to?


Post by tasnim »

Hi,

Config means the code inside of your Gantt.

new Gantt({ ... })

Post by vconstruct »

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,
  }


Post by marcio »

Hey vconstruct,

What do your columns look like? I don't see any configuration of that in your Gantt component, and we need that configuration to check what could be causing that round issue.

Best regards,
Márcio


Post by vconstruct »

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; } } } ];

Post by Animal »

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);
}

Post Reply