Task Editor Auto Calculate columns

Our state of the art Gantt chart
Post Reply
User avatar
rahulranjan
Premium Member
Premium Member
Posts: 229
Joined: Mon Apr 29, 2019 8:43 pm

Task Editor Auto Calculate columns

Post by rahulranjan » Wed Aug 14, 2019 3:09 pm

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.

Code: Select all

 {
              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.28 KiB) Viewed 61 times

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 2204
Joined: Fri Apr 01, 2016 11:08 am

Re: Task Editor Auto Calculate columns

Post by pmiklashevich » Fri Aug 16, 2019 10:45 am

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
Pavel Miklashevich - Core Developer

User avatar
rahulranjan
Premium Member
Premium Member
Posts: 229
Joined: Mon Apr 29, 2019 8:43 pm

Re: Task Editor Auto Calculate columns

Post by rahulranjan » Sun Aug 18, 2019 9:37 am

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

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 2204
Joined: Fri Apr 01, 2016 11:08 am

Re: Task Editor Auto Calculate columns

Post by pmiklashevich » Mon Aug 19, 2019 4:34 pm

Please see an example:

Code: Select all

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.93 KiB) Viewed 22 times
Pavel Miklashevich - Core Developer

Post Reply