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