Our state of the art Gantt chart


Post by prem.k@zetwerk.com »

Hi,

Suppose i have cell x and i am editing cell X, after editing of cell X i want to setError in cell Y. Is is possible to do so, i don't want to use renderer function.


Post by alex.l »

Hi prem.k@zetwerk.com,

If I understood you correctly, you want to have validation is some cell editor that will check as well the value of another field of the record. Of course that's possible to do since you have an access to the record.
Try to call https://bryntum.com/docs/grid/api/Grid/feature/CellEdit#function-startEditing for the Y cell in https://bryntum.com/docs/grid/api/Grid/column/Column#config-finalizeCellEdit of the X cell.
To set error: https://bryntum.com/docs/grid/api/Core/widget/Field#function-setError

All the best,
Alex


Post by Animal »

That would validate the input in a cell edit situation. Not sure of the exact requirement, but it seems the poster wants to apply a rendition to a cell.

To affect how the code renders a cell to make it customized to you own requirements, Your code have to get involved somewhere.

This would be a renderer:

renderer : ({ cellElement, record, column }) => {
    // Interrogate the record (maybe based on the column) to see if it is invalid.
    cellElement.classList.toggle('cell-invalid', cellIsInvalid);
}

Post by prem.k@zetwerk.com »

alex.l wrote: Fri Nov 26, 2021 12:30 pm

Hi prem.k@zetwerk.com,

If I understood you correctly, you want to have validation is some cell editor that will check as well the value of another field of the record. Of course that's possible to do since you have an access to the record.
Try to call https://bryntum.com/docs/grid/api/Grid/feature/CellEdit#function-startEditing for the Y cell in https://bryntum.com/docs/grid/api/Grid/column/Column#config-finalizeCellEdit of the X cell.
To set error: https://bryntum.com/docs/grid/api/Core/widget/Field#function-setError

I want to set error on cell y once edit of cell x completed. It will be great if you can share sample code as well.


Post by Animal »

A renderer is the only way to do it.


Post by prem.k@zetwerk.com »

Hi Animal,

Tried with same but renderer is working differently. Don't know how to fix. Please refer post below for same(used renderer).

viewtopic.php?f=43&t=19523


Post by Animal »

It appears to be a different topic. I looked at that thread and I do not understand anything there.

To simply answer the question in this thread: To change the appearance of a cell, you must use a renderer for that Column.


Post by prem.k@zetwerk.com »

Hi Animal,

Tried with

renderer

but there is some issue with

renderer

. Please check video for ref, it show previous selected value in other cell.

example.webm
(1.01 MiB) Downloaded 42 times

Post by Animal »

I cannot gain any insight into a potential problem from the description "some issue"

I cannot parse any meaning out of a video.

What is the requirement?

What does the code look like that you have currently attempted to implement this requirement?


Post by prem.k@zetwerk.com »

Hi,
My requirement is

I have two column progress and actualDate , whenever i edit progress after editing i should show error like actualDate is required and if progress value is greater than 100 actualDate field should get disabled. And on load actualDate field might present or might not present. For some line item actualDate might be undefined. I tried below code. Please have a look into renderer function.

Issue when i edit cell of lineItem1 progress first time actualDate is showing correct, when i complete edit of lineItem2 progress when you will click on actualDate it shows default value of actualDate field of lineItem1, ideally it should show empty because for lineItem2 there is no value present for actualDate


renderer: ({ cellElement, row, record, value, column }) => {
          let { id } = column;
          const { progress = '', trackedBy = '', actualStartDate, serialNumber } = record;
          if (!isValidDate(value)) {
            cellElement.style.color = 'transparent';
          }
          if (
            (Number(progress) > 0 || isItemComplete({ progress, quantity: record?.measure?.value, trackingMethod: trackedBy })) &&
            !isValidDate(actualStartDate) &&
            record.trackable !== 'ROLLUP'
          ) {
            cellElement.classList.add('cell-focused');
            requiredValidationMessage({ serialNumber, _id: id });
            return '';
          }
          if (!isProgressValue({ 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')) || '';
        }

Post Reply