Our state of the art Gantt chart


Post by rahulranjan »

Hi
1. I have 3 fields . Two fields value will be entered by user and third will be auto calculated . I.e Field1- Field2 = Field3. If values of field 1 or fields then field should value should be also changed.

2.
 {
              type: "textfield",
              ref: "actualDurationField",
              name: "actualDuration",
              label: "Actual Duration",
              flex: "1 0 50%",
              cls: "b-inline"
            },
Let say this actualDuration the field i want validation on this field i.e value can not be more than 100 or less than 0 with custom validation method. after click on save button i want to validate the values before saving or sending to server .
Attachments
SendTask.png
SendTask.png (13.22 KiB) Viewed 1589 times

Post by pmiklashevich »

1. You can listen to change event and recalculate your third field.

2. You can use numberfield and set min/max configs.
About validation I replied here: viewtopic.php?f=52&t=11857#p63574

Pavlo Miklashevych
Sr. Frontend Developer


Post by rahulranjan »

Hi
Thanks
Can you tell how to use change event. i.e where to place . and use it

Post by pmiklashevich »

Please see an example:
import WidgetHelper from '../../lib/Common/helper/WidgetHelper.js';

const [fieldA, fieldB, fieldC] = WidgetHelper.append([
    {
        type      : 'numberfield',
        label     : 'Enter A (from 0 to 100)',
        min       : 0,
        max       : 100,
        value     : 4,
        listeners : {
            change : ({ value }) => {
                fieldC.value = value * fieldB.value;
            }
        }
    },
    {
        type      : 'numberfield',
        label     : 'Enter B (from 0 to 100)',
        min       : 0,
        max       : 100,
        value     : 4,
        listeners : {
            change : ({ value }) => {
                fieldC.value = value * fieldA.value;
            }
        }
    },
    {
        type  : 'numberfield',
        label : 'A * B =',
        value : 16
    }
], { insertFirst : document.getElementById('tools') || document.body });
You can copy-paste it to Gantt Basic demo to see how it works.
Снимок экрана 2019-08-19 в 17.34.23.png
Снимок экрана 2019-08-19 в 17.34.23.png (46.77 KiB) Viewed 1550 times

Pavlo Miklashevych
Sr. Frontend Developer


Post by rahulranjan »

Hi
{
              type: "numberfield",
              min: 0,
              max: undefined,
              ref: "atCompletionUnitField",
              name: "atCompletionUnit",
              label: "At Completion",
              disabled: true,
              flex: "1 0 50%",
              cls: "b-inline"
            },
               {
              type: "numberfield",
              min: 0,
              max: undefined,
              ref: "actualUnitField",
              name: "actualUnit",
              label: "Actual Unit",
              flex: "1 0 50%",
              cls: "b-inline",
              listeners: {
                change: ({ value }) => {
                  atCompletionUnit.value = 5 + value
                }
              }
            },
But it throws Error
ReferenceError: atCompletionUnit is not defined
    at NumberField.change (ganttConfig.js:153)
    at NumberField.trigger (gantt.module.js:5033)
    at NumberField.set value (gantt.module.js:21958)
    at NumberField.set value [as value] (gantt.module.js:34647)
    at GeneralTab.set record [as record] (gantt.module.js:17638)
    at GeneralTab.loadEvent (gantt.module.js:117770)
    at GeneralTab.loadEvent (gantt.module.js:117875)
    at GeneralTab.loadEvent (gantt.module.js:118103)
    at gantt.module.js:119410
    at TabPanel.eachWidget (gantt.module.js:17710)


Post by sergey.maltsev »

Hi, rahulranjan!

Widgets created with ref can be accessed by widgetMap
Your ref was atCompletionUnitField:
gantt.taskEdit.editor.widgetMap.atCompletionUnitField
Use it in listener like this
listeners : {
  change : ({ source, value }) => {
    gantt.taskEdit.editor.widgetMap.atCompletionUnitField.value = 5 + value;
  }
}

Post Reply