EventDrag

Feature

The plugin/feature disabled state.

For a feature that is off by default that you want to enable later during runtime, configure it with disabled : true.

const grid = new Grid({
     features : {
         featureName : {
             disabled : true // on and disabled, can be enabled later
         }
     }
});

// enable the feature
grid.features.featureName.disabled = false;

If the feature is disabled by default, and you want to include and enable the feature, configure it as true:

const grid = new Grid({
     features : {
         featureName : true // on and enabled, can be disabled later
     }
});

// disable the feature
grid.features.featureName.disabled = true;

If the feature is on by default, but you want to turn it off, configure it as false:

const grid = new Grid({
     features : {
         featureName : false // turned off, not included at all
     }
});

If the feature is enabled by default and you have no need of reconfiguring it, you can omit the feature configuration.

Has a corresponding runtime disabled property.

The listener set for this object.

An object whose property names are the names of events to handle, or options which modifiy how the handlers are called.

See addListener for details about the options.

Listeners can be specified in target class config and they will be merged with any listeners specified in the instantiation config. Class listeners will be fired first:

class MyStore extends Store({
    static configurable = {
        listeners : {
            myCustomEvent() {
            },
            load : {
                prio : 10000,
                fn() { // this load listener handles things first }
            }
        }
    };
});

let store = new MyStore({
  listeners: {
    load: () => { // This load listener runs after the class's },
    ...
  }
});

Handlers as function name

Object event handlers may be specified as a function name. If a string is specified, it is the name of the function in the thisObj object.

If the string begins with up., this object's ownership hierarchy (if present) is scanned for an object which implements that function name:

new Popup({
    tbar : {
        items : {
            myCombo : {
                type      : 'combo',
                editable  : false,
                label     : 'Type',
                listeners : {
                    // Look in owner chain for this function name
                    change : 'up.onFilterChange'
                },
                items     : [
                    'Event',
                    'Task',
                    'Appointment'
                ]
            }
        }
    },
    items : {
        ...
    },
    onFilterChange({ value }) {
        // Handle event type selection here
    }
});

Whether to allow the SNET constraint generated by an event drag to be placed in non- working time. When true and the event is dragged so that its startDate is in non-working time, the SNET constraint date will be kept on the non-working date where the task is dropped. When false, snaps the SNET date to working time in the same way as the startDate. The startDate is not affected by this config.

Applies only to Scheduler Pro and Gantt.

Specifies how the Engine should constrain the dragged event dates - whether it should adjust them according to the event (and its parents) constraints and dependencies. Providing true to the config enables constraining by both constraints and dependencies and providing false disables both of them.

Use an object to enable constraining by only constraints or dependencies:

constrainDragByEngine : {
    // honor dependencies but ignore constraints
    dependencies : true,
    constraints  : false
}

A hook that allows manipulating the position the drag proxy snaps to. Manipulate the snapTo property to alter snap position.

const scheduler = new Scheduler({
    features : {
        eventDrag : {
            snapToPosition({ eventRecord, snapTo }) {
                if (eventRecord.late) {
                    snapTo.x = 400;
                }
            }
        }
    }
});

Defaults to true, which snaps events to resources while dragging, i.e. vertical row snap in horizontal mode and vice versa. Requires Scheduler to be configured to snap to have any effect:

const scheduler = new Scheduler({
    ...
    // Snap to time & resource
    snap : true
});

If you want to customize the number of pixels from the dragged event that will trigger the snapping behavior to the new resource, you can set the threshold property:

const scheduler = new Scheduler({
    ...
    snap     : true,
    features : {
        eventDrag : {
            // Customized snap threshold
            snapToResource : {
                threshold : 30
            }
        }
    },
    ...
});

Has a corresponding runtime snapToResource property.

Template used to generate drag tooltip contents.

const scheduler = new Scheduler({
    features : {
        eventDrag : {
            tooltipTemplate({eventRecord, startText}) {
                return `${eventRecord.name}: ${startText}`
            }
        }
    }
});

When the host Scheduler is multiEventSelect: true then, there are two modes of dragging within the same Scheduler.

Non unified means that all selected events are dragged by the same number of resource rows.

Unified means that all selected events are collected together and dragged as one, and are all dropped on the same targeted resource row at the same targeted time.

Has a corresponding runtime unifiedDrag property.

Function that updates the dragged records. Use this config to customize how the drag changes are applied to the data.

Providing this function replaces the internal calls to the updateRecords method on drop, replacing it with your own logic. If you instead want to extend the default logic, you can can call it from the provided function:

eventDrag : {
    async updateRecordsFn(...args) {
        // call default logic first
        await this.updateRecords(...args);

        // some additional custom code goes here
        ...
    }
}

An empty function by default, but provided so that you can perform custom validation on the item being dragged. This function is called during the drag and drop process and also after the drop is made. Return true if the new position is valid, false to prevent the drag.

features : {
    eventDrag : {
        validatorFn({ eventRecords, newResource }) {
            const
                task  = eventRecords[0],
                valid = newResource.role === task.resource.role;

            return {
                valid   : newResource.role === task.resource.role,
                message : valid ? '' : 'Resource role does not match required role for this task'
            };
        }
    }
}

By default, if an event handler throws an exception, the error propagates up the stack and the application state is undefined. Code which follows the event handler will not be executed.

Set this to true to catch exceptions thrown by this object's event handlers and continue processing the event. The exception will be rethrown on a zero millisecond timeout, so it will not destroy the stack.

Has a corresponding runtime catchEventHandlerExceptions property.

An object where property names with a truthy value indicate which events should bubble up the ownership hierarchy when triggered.

const container = new Container({
    items : [
       { type : 'text', bubbleEvents : { change : true }}
    ],

    listeners : {
        change() {
            // Will catch change event from the text field
        }
    }
});

Set to true to call onXXX method names (e.g. onShow, onClick), as an easy way to listen for events.

const container = new Container({
    callOnFunctions : true

    onHide() {
         // Do something when the 'hide' event is fired
    }
});

Has a corresponding runtime callOnFunctions property.

A class translations of which are used for translating this entity. This is often used when translations of an item are defined on its container class. For example:

// Toolbar class that has some predefined items
class MyToolbar extends Toolbar {

    static $name = 'MyToolbar';

    static configurable = {
        // this specifies default configs for the items
        defaults : {
            // will tell items to use the toolbar locale
            localeClass : this
        },

        items : {
            // The toolbar has 2 buttons and translation for their texts will be searched in
            // the toolbar locales
            agree :{ text : 'Agree' },
            disagree :{ text : 'Disagree' }
        }
    };

   ...
}

So if one makes a locale for the MyToolbar class that will include Agree and Disagree string translations:

    ...
    MyToolbar : {
        Agree    : 'Yes, I agree',
        Disagree : 'No, I do not agree'
    }

They will be used for the toolbar buttons and the button captions will say Yes, I agree and No, I do not agree.

List of properties which values should be translated automatically upon a locale applying. In case there is a need to localize not typical value (not a String value or a field with re-defined setter/getter), you could use 'localeKey' meta configuration. Example:

 static configurable = {
      localizableProperties : ['width'],

      width : {
          value   : '54em', // default value here
          $config : {
              localeKey : 'L{editorWidth}' // name of the property that will be used in localization file
          }
      }
  };