Support for v6.x of our Scheduling components


Post by kgjha »

Hi Team,

We have a column(Effort) in Bryntum codebase which extends 'Gnt.column.Effort'.
It is an editable widget field with duration value(ex - 4,5,6) & duration units(Hours as default). As the field is editable we can edit duration unit(hours) & convert it into s(by deleting 4 letters) . As the default behaviour of bryntum(Gnt.field.Duration used by Gnt.column.Effort) the s letter in duration unit is converted to seconds.
I wanted to restrict the conversion of s to seconds(It is an intermittent issue happens only for the first time when we are editing fields.) & also restrict the users from using s or S character.
I tried few approaches.

  1. Adding validator in editor field -> It restricted some of the functionality of column, so avoided using it.
  2. Tried adding some eventlisteners such as onchange & edit.Also used some renders However, none of these are working.
    Pls let me know what approach can we take to solve the issue.

Thanks,
Gaurav


Post by saki »

One of the approaches could be to use HTML5 pattern attribute. Please see https://www.bryntum.com/docs/grid/#Core/widget/TextField#config-inputAttributes. The following snippet illustrates it:

    columns : [
        {
            text   : 'Name',
            field  : 'name',
            flex   : 2,
            editor : {
                type     : 'textfield',
                required : true,

                inputAttributes : {
                    pattern : '[^s]+'
                }
            }
        }

Post by kgjha »

I tried above suggested solution, but it is not working. As per the requirements, we are working on an editable component (Gnt.column.Effort) we can edit the word hours and change it into s(by deleting first four characters.) When the word(hours) is edited to S, it is itself translated to seconds, The requirement is stopping the editing of word hours , so that we can't reach to character s by deleting characters. Please suggest.


Post by saki »

Then you would need to install listeners that would filter out keystrokes you want to prevent. This could be a starting point:

            editor : {
                type     : 'textfield',
                required : true,

                listeners : {
                    keydown : ({ event }) => {
                        console.log(event.keyCode);
                        if ([8, 46].includes(event.keyCode)) {
                            event.preventDefault();
                            return false;
                        }
                    }
                }
            }

The above example only filters backspace and delete; you may need a more sophisticated logic.


Post by kgjha »

Thank you for the response, I tried out the suggested approach before however it is not working, the code is not responding to any changes in editor field.

 editor: {
        instantUpdate: false,
        baseChars: '0123456789',
        disableKeyFilter: false,
        listeners : {
            keydown : ({ event }) => {
                console.log(event.keyCode);
                if ([8, 46].includes(event.keyCode)) {
                    event.preventDefault();
                    return false;
                }
            }
        }
    }

This is what I tried.

I wanted to reiterate that inside the text field(Gnt.column.Effort) we have two field separated by space. Value is something like
5 hours, 6 hours etc. The problem with suggested approach is that if we restrict the use of backspace and delete events, it will restrict the use of these events when we are trying to edit the numeric part of value as well(i.e in 5 hours text value, we should be able to edit numeric value (5) , but not text value(hours)).

Thanks


Post by Maxim Gorkovsky »

Hello.
I added a validator using isValid and getErrors methods and it worked:

Ext.define('MyEffortField', {
    extend : 'Gnt.field.Effort',
    alias  : 'widget.myeffortfield',

    isValid : function () {
        var isValid = this.callParent(arguments);

        if (this.getDurationValue().unit === 's') {
            isValid = false;
        }

        return isValid;
    },

    getErrors : function (value) {
        var parsed;

        if (value) {
            parsed   = this.getDurationValue();

            if (parsed && parsed.unit === 's') {
                return ['Seconds are not allowed as effort unit'];
            }
        }

        return this.callParent(arguments);
    }
});

Post by Maxim Gorkovsky »

You posted and ExtGantt question in the Bryntum Gantt forum. This can lead to confusion. I moved your topic. Please try to use correct forum when requesting assistance.


Post by kgjha »

Hi Maxim,

Thank you for your response.

As intimated in my original query, the use of validators breaks some functionality of the column, so we have decided to not use the validator. Here is the code which was used for your reference.


Ext.define('column.Effort', {
    extend: 'Gnt.column.Effort',
    xtype: 'pjteffortcolumn',
    alias: ['widget.pjteffortcolumn', 'widget.ganttcolumn.pjteffortcolumn'],
    requires: ['Gnt.column.Effort'],
    width: 100,
    align: 'right',
    filter: {
        type: 'number'
    },
    editor: {
        instantUpdate: false,
        baseChars: '0123456789',
        disableKeyFilter: false
       /* listeners : {
            keydown : ({ event }) => {
                console.log(event.keyCode);
                if ([8, 46].includes(event.keyCode)) {
                    event.preventDefault();
                    return false;
                }
            }
        }*/,
        validator:function(value){
            var isValid = this.callParent(arguments);;
            if (this.getDurationValue().unit === 's' || 
            this.getDurationValue().unit === 'S' || 
            this.getDurationValue().unit === 'Seconds' || this.getDurationValue().unit === 'seconds') {
                Ext.Msg.alert('Error','Please dont use second as units.');
                isValid = false;
            }
            return isValid;
        }

},
isValid : function () {
    var isValid = this.callParent(arguments);

    if (this.getDurationValue().unit === 's') {
        isValid = false;
    }

    return isValid;
},

getErrors : function (value) {
    var parsed;

    if (value) {
        parsed   = this.getDurationValue();

        if (parsed && parsed.unit === 's') {
            return ['Seconds are not allowed as effort unit'];
        }
    }

    return this.callParent(arguments);
}
});

What we want to acheive is restriction of use of backspace and delete events on this.getDurationValue().unit field.
Please let me know if there is a way to achieve it.

I used the implementation of validator suggested, but it doesn't work.


Post by mats »

Adding validator in editor field -> It restricted some of the functionality of column, so avoided using it.

I used the implementation of validator suggested, but it doesn't work.

When you write things like this, always be more specific. What "doesn't work", please provide more context.

Tired of debugging javascript errors in web applications? Try our powerful error logging service RootCause


Post by kgjha »

Adding validator in editor field -> It restricted some of the functionality of column, so avoided using it. -->
Please find the breakage below.

  1. The default behaviour of column changes, if s is typed as a character as it is invalid, the column shows default behaviour caused by invalidity of validator. We don't want this to happen.

  2. The column is represented by P1 parent node(Main effort column) ( followed by few Child nodes C1, C2, C3 etc -- sub effort columns ). The default behaviour is summation of all the child node values and the resultant value is populated in parent node value. However after use of validator, this functionality is breaking.

I used the implementation of validator suggested, but it doesn't work. --> During debugging the debug cursor doesn't go inside the functions.


Post Reply