Our state of the art Gantt chart


Post by prem.k@zetwerk.com »

Hi,

I want to do validation with custom message like :

If (TrackedBy = PERCENTAGE), then it should so me message like,

percentage should not be greater than 100

2nd if If (TrackedBy = BINARY ),

then i have to show dropdown field with option and we will have to select one field from there.

.Below is the code i followed, but not sure how can i show custom message and show dropdown based on condition.
Example:

 {
    text: 'Cumulative Actual Progress',
    field: 'progress',
    cls: 'progress-header',
    cellCls: 'progress-cell',
    editor: true,
    region: 'middle',
    finalizeCellEdit: context => {
      console.log('context', context);
      const { value = '', record = '' } = { ...context };
      const { progress = '', trackedBy = '', quantity = ''} = { ...record };
      // if there is no progress, actual st date can not be edited
      if (trackedBy === 'PERCENTAGE' && progress ==100) {
        return false;
      }
      if (trackedBy === 'QUANTITY' && quantity == 100) {
        return false;
      }
      if (trackedBy === 'BINARY' && quantity == 100) {
        return false;
      }
      return true;
    },
    invalidAction: 'revert',
    renderer({ cellElement, row, record, value }) {
      if (record.isEdited['progress'] === true) {
        cellElement.classList.add('editedData');
      }
      return `${String(value)} ${record?.progressUnit}`;
    }
  },

Post by saki »

finalizeCellEdit can be async so the simplest implementation with confirm dialog could look like this:

            finalizeCellEdit : async({ value, record }) => {
                const result = await MessageDialog.confirm({
                    title   : 'Confirm',
                    message : `Please confirm value: ${value}`
                });
                return result === MessageDialog.yesButton;
            }

You can use your own Popup in place of MessageDialog with your own messages and logic.


Post by prem.k@zetwerk.com »

Hi Saki,

I want to show tooltip if validation failed. I have used below code but it's not working. Do i need to enable any feature?

finalizeCellEdit: async( context) => {
      console.log('context', context);
      const { value = '', record = '' } = { ...context };
      const { progress = '', trackedBy = '', quantity = '' } = { ...record?.originalData };
      // if there is no progress, actual st date can not be edited
      if (progress < 0) {
        return 'Progress cannot be negative value';
      }
      if (trackedBy === 'PERCENTAGE' && value > 100) {
        return 'Percentage cannot be more than 100';
      }
      const oldQuantity = record.quantity;
      if (trackedBy === 'QUANTITY' && value) {
        return 'Cannot be more than original quantity';
      }
      if (trackedBy === 'BINARY') {
        return 'Cannot be more than original quantity';
      }
      return true;
    },

Post by saki »

I'm not sure that I fully grasp what is the desired behavior. The code above returns either string of an error message or true while documentation of https://bryntum.com/docs/gantt/api/Grid/column/Column#config-finalizeCellEdit says that true or false is expected – strings are ignored.

Isn't it that you need to https://bryntum.com/docs/gantt/api/Core/widget/NumberField#function-setError with the error messages and return false and https://bryntum.com/docs/gantt/api/Core/widget/NumberField#function-clearError when the value is OK and return true?


Post Reply