Our state of the art Gantt chart


Post by arpit »

hii team, below is the config for one column which have three child columns from which two are of type date, on view it shows correct values but when we try to edit a date type value then, a different value appears in the cell as well as in the date picker, i have tried setting default date in the picker config as well but that is not working, below is the config for the column and ss for the problems

  newBaseline: {
    text: 'New Baseline',
    align: 'center',
    cls: 'planned-header',
    region: 'middle',
    sortable: false,
    children: [
      {
        text: 'Start Date',
        region: 'middle',
        type: 'date',
        width: 120,
        field: 'newBaselineStartDate',
        format: 'DD/MM/YY',
        draggable: false,
        cls: 'start-date-header',
        cellCls: 'start-date-cell',
        sortable: false,
        tooltipRenderer({cellElement, record, column}){
          const totalBaselines = record.originalData?.baselines?.length;
          const isEdited = record.originalData?.baselines[totalBaselines-1]?.isEdited;
          const userChangedValues = record.originalData?.baselines[totalBaselines-1]?.userChangedValues;
          const holidayData = record.originalData?.baselines[totalBaselines-1]?.prodPlan?.holiday;
          if(holidayData?.startDate){
            return `<div class = "cellTooltip">
            <div>- Review Carefully</div>
            <div>- Holiday Date</div>
            </div>`
          }
          else if(userChangedValues?.prodPlan?.startDate){
            return `<div class = "cellTooltip">
            <div>- Review Carefully</div>
            </div>`          
}else if(isEdited?.prodPlan?.startDate){ return `<div class = "cellTooltip"> <div>- Review Carefully</div> <div>- System Changed Value</div> </div>` } }, editor: { editable: true, listeners: { // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types action: isNewBaselineStartDateValid, input: isNewBaselineStartDateValid, change: isNewBaselineStartDateValid }, }, renderer({ cellElement, row, record, value }) { if (record.isProjectSummary === true) { cellElement.classList.add('project-summary'); } const totalBaselines = record.originalData?.baselines?.length; const isEdited = record.originalData?.baselines[totalBaselines-1]?.isEdited; const userChangedValues = record.originalData?.baselines[totalBaselines-1]?.userChangedValues; const holidayData = record.originalData?.baselines[totalBaselines-1]?.prodPlan?.holiday; if(holidayData?.startDate){ cellElement.classList.add('holiday-date'); } else if(userChangedValues?.prodPlan?.startDate){ cellElement.classList.add('editedData'); }else if(isEdited?.prodPlan?.startDate){ cellElement.classList.add('system-change'); } return DateHelper.format(new Date(value), 'DD/MM/YY'); } }, { text: 'End Date', type: 'date', region: 'middle', format: 'DD/MM/YY', width: 120, draggable: false, field: 'newBaselineEndDate', cls: 'end-date-header', cellCls: 'end-date-cell', tooltipRenderer({cellElement, record, column}){ if (record.isProjectSummary === true) { cellElement.classList.add('project-summary'); } const totalBaselines = record.originalData?.baselines?.length; const isEdited = record.originalData?.baselines[totalBaselines-1]?.isEdited; const userChangedValues = record.originalData?.baselines[totalBaselines-1]?.userChangedValues; const holidayData = record.originalData?.baselines[totalBaselines-1]?.prodPlan?.holiday; if(holidayData?.endDate){ return `<div class = "cellTooltip"> <div>- Review Carefully</div> <div>- Holiday Date</div> </div>` } else if(userChangedValues?.prodPlan?.endDate){ return `<div class = "cellTooltip"> <div>- Review Carefully</div> </div>`
}else if(isEdited?.prodPlan?.endDate){ return `<div class = "cellTooltip"> <div>- Review Carefully</div> <div>- System Changed Value</div> </div>`
} }, editor: { editable: true, listeners: { // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types action: isNewBaselineEndDateValid, input: isNewBaselineEndDateValid, change: isNewBaselineEndDateValid }, }, sortable: false, renderer({ cellElement, row, record, value }) { if (record.isProjectSummary === true) { cellElement.classList.add('project-summary'); } const totalBaselines = record.originalData?.baselines?.length; const isEdited = record.originalData?.baselines[totalBaselines-1]?.isEdited; const userChangedValues = record.originalData?.baselines[totalBaselines-1]?.userChangedValues; const holidayData = record.originalData?.baselines[totalBaselines-1]?.prodPlan?.holiday; if(holidayData?.endDate){ cellElement.classList.add('holiday-date'); } else if(userChangedValues?.prodPlan?.endDate){ cellElement.classList.add('editedData'); }else if(isEdited?.prodPlan?.endDate){ cellElement.classList.add('system-change'); } return DateHelper.format(new Date(value), 'DD/MM/YY'); } }, { text: 'Duration', region: 'middle', width: 120, draggable: false, field: 'newBaselineDuration', cls: 'end-date-header', cellCls: 'end-date-cell', editor: false, sortable: false, renderer({ cellElement, row, record, value }) { if (record.isProjectSummary === true) { cellElement.classList.add('project-summary'); } const totalBaselines = record.originalData?.baselines?.length; const isEdited = record.originalData?.baselines[totalBaselines-1]?.isEdited; const userChangedValues = record.originalData?.baselines[totalBaselines-1]?.userChangedValues; if(userChangedValues?.duration){ cellElement.classList.add('editedData'); }else if(isEdited?.duration){ cellElement.classList.add('system-change'); } return value; } } ] },
Attachments
baseline-review-date-issue-1.png
baseline-review-date-issue-1.png (7.45 KiB) Viewed 272 times
baseline-review-date-issue-2.png
baseline-review-date-issue-2.png (7.69 KiB) Viewed 272 times
baseline-review-date-issue-3.png
baseline-review-date-issue-3.png (42.01 KiB) Viewed 272 times

Post by alex.l »

Hi arpit,

Sorry, I was not able to test your code with our examples, I cannot apply it to make it working. Any chance to get a runnable test case?
I am not sure what is newBaseline and where should I apply it.

All the best,
Alex


Post Reply