[ANGULAR] Dates are getting changed on click

[Maxim Gorkovsky]

Hello.
I couldn't understand the problem from your video. You're emphasizing smth with mouse movement in the date picker, but I just don't get the problem. Could you elaborate on that? What is parent cell? In your report you refer to the date 01/10/2021 but in your video you have completely different value. What is valid and what is invalid there? What behavior do you expect?

[prem.k@zetwerk.com]

Hi Maxim,

First question is if my column type is date : How can we render null value if date doesn't exists? If i return null value and click on date picker it always shows 01/01/1994 as initial date
2nd Question: Suppose if i edit cell x and selecting date as 01/10/2021 after that when i select cell y it by default shows selected date as 01/10/2021, ideally it should be empty because i haven't selected any date till now in cell y.

Please find attached for reference:

Example.mp4

(22.44 MiB) Downloaded 62 times

[alex.l]

Hi prem.k@zetwerk.com,

Looks like there is a type collision in one of steps when you save/set dates. We should be able to reproduce it to help you out. Empty value should be ok for date picker. Regarding to your second question - it also looks strange and not reproducible on our side. Try to remove any custom format configs and check if it works. Also try to debug and see what happens with dates when you save it and before you open a picker when it's empty.
Check it without your data in our examples, it works correct, so it really sounds like some type configs are missing.

Try to modify our example to replicate the problem if you cannot share your code with us.

[prem.k@zetwerk.com]

Hi Alex,

Let me share my code type is date only. I am using renderer function. Is renderer overriding the cell value?

1. I am loading complete data on any value changes in cell because we had implemented our own cascading logic on backend where we send all changed record as payload then once getting the response loading complete data again. Will be it the reason for date not rendering correctly.

Please find the code below for date

{
        text: 'End Date',
        type: 'date',
        width: 120,
        region: 'middle',
        field: 'actualEndDate',
        format: 'DD/MM/YYYY',
        cls: 'end-date-header',
        draggable: false,
        cellCls: 'end-date-cell',
        sortable: false,
        invalidAction: 'revert',
        editor: {
          editable: true,
          listeners: {
            // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
            action: isActualEndDateValid,
            input: isActualEndDateValid,
            change: isActualEndDateValid
          },
          picker: {
            disabledDates: function (value) {
              // sunday not allowed
              if (value.getDay() === 0) {
                return true;
              }
              // greater dates not allowed
              if (value && value instanceof Date) {
                const currDate = new Date();
                if (moment(value).isAfter(currDate, 'day')) return true;
              }
            }
          }
        },
        tooltipRenderer: ({ record, cellElement, value, tip }) => {
          const { progress = '', trackedBy = '', actualEndDate = '' } = record;
          if (
            isItemComplete({ progress, quantity: record?.measure?.value, trackingMethod: trackedBy }) &&
            !isValidDate(actualEndDate) &&
            record.trackable !== 'ROLLUP'
          ) {
            tip._element.classList.add('tooltip-container');
            //cellTooltip.classList.add('tooltip-container');
            return `Actual End Date is required`;
          }
        },
        renderer({ cellElement, row, record, value, column }) {
          console.log('value', value);
          const { id } = column;
          const { progress = '', trackedBy = '', serialNumber, actualStartDate, actualEndDate } = record;
          if (!isValidDate(value)) {
            cellElement.style.color = 'transparent';
          }
          if (
            isItemComplete({ progress, quantity: record?.measure?.value, trackingMethod: trackedBy }) &&
            !isValidDate(actualEndDate) &&
            record.trackable !== 'ROLLUP'
          ) {
            cellElement.classList.add('cell-focused');
            requiredValidationMessage({ serialNumber, _id: id });
          }
          if (!record.actualStartDate || !isItemComplete({ progress, quantity: record?.measure?.value, trackingMethod: trackedBy })) {
            cellElement.classList.add('disabled-field');
          }
          if (isValidDate(value)) {
            removeRequireValidation({ serialNumber, _id: id });
            cellElement.style.color = '#4a4a4a';
          }
          return (value && moment(value).format('DD/MM/YYYY')) || '';
        }
      }

[alex.l]

Sorry, I still cannot reproduce it in our examples.
renderer is only affects on cell content when an editor is closed.
Try to check you data again, if it always returns a Date after updates.

[prem.k@zetwerk.com]

This code works fine.

d.actualStartDate = (d.actualDates && d.actualDates?.startDate && convertToEoSIST(d.actualDates.startDate)) || new Date();
d.actualEndDate = (d.actualDates && d.actualDates?.endDate && convertToEodIST(d.actualDates.endDate)) || new Date();

But when i replace above code with below one it's not working as expected:

d.actualStartDate = (d.actualDates && d.actualDates?.startDate && convertToEoSIST(d.actualDates.startDate)) || '';
d.actualEndDate = (d.actualDates && d.actualDates?.endDate && convertToEodIST(d.actualDates.endDate)) || '';

[prem.k@zetwerk.com]

Sorry, I still cannot reproduce it in our examples.
renderer is only affects on cell content when an editor is closed.
Try to check you data again, if it always returns a Date after updates.

Some cell will have date object some will be empty. Will it affect renderer.

[alex.l]

What exactly from the issues you described this code is reproduces?
Use null instead of empty string.

Some cell will have date object some will be empty. Will it affect renderer.

Yes. Put debugger into your renderer method and check it.

[prem.k@zetwerk.com]

What exactly from the issues you described this code is reproduces?
Use null instead of empty string.

Some cell will have date object some will be empty. Will it affect renderer.

Yes. Put debugger into your renderer method and check it.

I can see if some of the date field is empty, and i can also see renderer is keep getting called. Is it the expected behaviour?

Renderer returning correct value when first time renderer function got called and then its overriding value with null as it is keep calling renderer function. Ideally if cell x has date object and cell y has date object as null. It should display as it is but it shows null for both cell. And i am passing correct data to grid.

Inside renderer i have put below code still it's not working.

if (!value) {
             return null;
           }
           return value;

[alex.l]

Renderer called every time independent if value is exists or not. Because you allowed to show any data in the cell, empty text or a value from another field, result of calculations, etc.