ViewPreset

A ViewPreset is a record of PresetStore which describes the granularity of the timeline view of a Scheduler and the layout and subdivisions of the timeline header.

You can create a new instance by specifying all fields:

const myViewPreset = new ViewPreset({
    id   : 'myPreset',              // Unique id value provided to recognize your view preset. Not required, but having it you can simply set new view preset by id: scheduler.viewPreset = 'myPreset'

    name : 'My view preset',        // A human-readable name provided to be used in GUI, e.i. preset picker, etc.

    tickWidth  : 24,                // Time column width in horizontal mode
    tickHeight : 50,                // Time column height in vertical mode
    displayDateFormat : 'HH:mm',    // Controls how dates will be displayed in tooltips etc

    shiftIncrement : 1,             // Controls how much time to skip when calling shiftNext and shiftPrevious.
    shiftUnit      : 'day',         // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
    defaultSpan    : 12,            // By default, if no end date is supplied to a view it will show 12 hours

    timeResolution : {              // Dates will be snapped to this resolution
        unit      : 'minute',       // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
        increment : 15
    },

    headers : [                     // This defines your header rows from top to bottom
        {                           // For each row you can define 'unit', 'increment', 'dateFormat', 'renderer', 'align', and 'thisObj'
            unit       : 'day',
            dateFormat : 'ddd DD/MM'
        },
        {
            unit       : 'hour',
            dateFormat : 'HH:mm'
        }
    ],

    columnLinesFor : 1              // Defines header level column lines will be drawn for. Defaults to the last level.
});

Or you can extend one of view presets registered in PresetManager:

const myViewPreset2 = new ViewPreset({
    id   : 'myPreset',                  // Unique id value provided to recognize your view preset. Not required, but having it you can simply set new view preset by id: scheduler.viewPreset = 'myPreset'
    name : 'My view preset',            // A human-readable name provided to be used in GUI, e.i. preset picker, etc.
    base : 'hourAndDay',                // Extends 'hourAndDay' view preset provided by PresetManager. You can pick out any of PresetManager's view presets: PresetManager.records

    timeResolution : {                  // Override time resolution
        unit      : 'minute',
        increment : 15                  // Make it increment every 15 mins
    },

    headers : [                         // Override headers
        {
            unit       : 'day',
            dateFormat : 'DD.MM.YYYY'   // Use different date format for top header 01.10.2020
        },
        {
            unit       : 'hour',
            dateFormat : 'LT'
        }
    ]
});

See PresetManager for the list of base presets. You may add your own presets to this global list:

PresetManager.add(myViewPreset);     // Adds new preset to the global scope. All newly created scheduler instances will have it too.

const scheduler = new Scheduler({
    viewPreset : 'myPreset'
    // other configs...
});

Or add them on an individual basis to Scheduler instances:

const scheduler = new Scheduler({...});

scheduler.presets.add(myViewPreset); // Adds new preset to the scheduler instance only. All newly created scheduler instances will **not** have it.

scheduler.viewPreset = 'myPreset';

Defining custom header rows

You can have any number of header rows by specifying headers, see ViewPresetHeaderRow for the config object format and DateHelper for the supported date formats, or use to render custom contents into the row cells.

 headers : [
     {
         unit       : 'month',
         dateFormat : 'MM.YYYY'
     },
     {
         unit       : 'week',
         renderer   : ({ startDate }) => `Week ${DateHelper.format(startDate, 'WW')}`
     }
 ]

//<code-header> CSSHelper.insertRule('.customHeader .b-sch-header-time-axis-cell { font-size:0.9em;border-left:1px solid rgb(160 160 160);border-bottom:1px solid rgb(160 160 160); font-weight:400;}', targetElement.getRootNode()); //</code-header> new Scheduler({ appendTo : targetElement, cls : 'customHeader', autoHeight : true, startDate : new Date(2022, 4, 1), endDate : new Date(2022, 6, 1), resources : [ { id : 1, name : 'Bob' }, { id : 2, name : 'John' }, { id : 3, name : 'Kate' }, { id : 4, name : 'Lisa' } ], events : [ { id : 1, resourceId : 1, startDate : new Date(2022, 4, 3), duration : 5, name : 'A cool task' } ], viewPreset : { timeResolution : { unit : 'day', increment : 1 }, headers : [ { unit : 'month', dateFormat : 'MMM YYYY', align : 'start' }, { unit : 'week', renderer : (startDate, endDate) => `Week ${DateHelper.format(startDate, 'WW')}` }, { unit : 'day', dateFormat : 'dd' }, { unit : 'day', dateFormat : 'DD' }, { unit : 'day', renderer : (startDate, endDate, headerConfig, index) => index % 4 === 0 ? Math.round(Math.random() * 5) : '' } ] }, columns : [ { field : 'name', text : 'Name', width : 100 } ] });

This live demo shows a custom ViewPreset with AM/PM time format:

new Scheduler({ appendTo : targetElement, autoHeight : true, startDate : new Date(2018, 4, 6), endDate : new Date(2018, 4, 8), viewPreset : { timeResolution : { unit : 'hour', increment : 1 }, headers : [ { unit : 'day', dateFormat : 'DD MMM YYYY' }, { unit : 'hour', dateFormat : 'hA' } ] }, columns : [ { field : 'name', text : 'Name', width : 100 } ] });

Using embedded text inside format string

Arbitrary text can be embedded in the format string by wrapping it with {}:

 headers : [
     {
         unit       : 'month',
         dateFormat : '{It is }MMMM{, yay!}' -> It is January, yay!
     },
     {
         unit       : 'week',
         renderer   : ({ startDate }) => `Week ${DateHelper.format(startDate, 'WW')}`
     }
 ]

Useful configs and functions

Member	Description
base	Base preset to extend from
tickWidth	Width of each time tick in pixels
rowHeight	Default row height in pixels
displayDateFormat	Date format string for tooltips
headers	Array of header row configurations
timeResolution	Resolution for snapping and rounding
shiftUnit	Unit used when shifting the time axis

Fields

Fields belong to a Model class and define the Model data structure

id : String/Number

Model

Unique identifier for the record. Might be mapped to another dataSource using idField, but always exposed as record.id. Will get a generated value if none is specified in records data.

Note that generated ids are meant to be temporary (phantom ids), they should not be serialized but instead replaced by the backend on commit
readOnly : Boolean

Model

Flag the record as read-only on the UI level, preventing the end user from manipulating it using editing features such as cell editing and event dragging.

Does not prevent altering the record programmatically, it can still be manipulated by application code.

For more info, see the "Read-only records" section above.
base : String

The name of an existing view preset to extend
columnLinesFor : Number

Index of a header level in the headers array for which column lines are drawn. See ColumnLines. Defaults to the bottom header.
defaultSpan : Number

The amount of time to show by default in a view (in the unit defined by mainUnit)
displayDateFormat : String

Defines how dates will be formatted in tooltips etc
headers : ViewPresetHeaderRow[]

An array containing one or more ViewPresetHeaderRow config objects, each of which defines a level of headers for the scheduler. The main unit will be the last header's unit, but this can be changed using the mainHeaderLevel field.
mainHeaderLevel : Number

Index of the headers array to define which header level is the main header. Defaults to the bottom header.
mainUnit : DurationUnit

Initially set to a unit. Defaults to the unit defined by the middle header.
name : String

The name of the view preset
rowHeight : Number

The height of the row in horizontal orientation
shiftIncrement : Number

The amount to shift (in shiftUnits)
shiftUnit : DurationUnit

The unit to shift when calling shiftNext/shiftPrevious to navigate in the chart. Valid values are "millisecond", "second", "minute", "hour", "day", "week", "month", "quarter", "year".
start : Number/String

Note: Currently, this field only applies when changing viewPreset with the ViewPresetCombo.

Set to a number and that amount of mainUnit will be added to the startDate. For example: A start value of 5 together with the mainUnit hours will add 5 hours to the startDate. This can achieve a "day view" that starts 5 AM.

Set to a string unit (for example week, day, month) and the startDate will be the start of that unit calculated from current startDate. A start value of week will result in a startDate in the first day of the week.

If set to a number or not set at all, the startDate will be calculated at the beginning of current mainUnit.
tickHeight : Number

The height of the time tick column in vertical orientation
tickWidth : Number

The width of the time tick column in horizontal orientation
timeResolution : ViewPresetTimeResolution
An object containing a unit identifier and an increment variable. This value means minimal task duration you can create using UI. For example when you drag create a task or drag & drop a task, if increment is 5 and unit is 'minute' that means that you can create a 5-minute-long task, or move it 5 min forward/backward. This config maps to scheduler's timeResolution config.
```
timeResolution : {
  unit      : 'minute',  //Valid values are "millisecond", "second", "minute", "hour", "day", "week", "month", "quarter", "year".
  increment : 5
}
```
useForSmoothZoom : Boolean

Set to false to exclude this preset from the smooth zooming algorithm. This means that when zooming in or out in a Scheduler configured with smoothZoom : true, the view will not switch to this preset.
children : Boolean/Object[]/Model[]

READONLY
TreeNode

Child nodes. To allow loading children on demand, specify children : true in your data. Omit the field for leaf tasks.

Note, if the tree store loads data from a remote origin, make sure readUrl is specified, and optionally parentIdParamName is set, otherwise loadChildren has to be implemented.
expanded : Boolean

READONLY
Model

Start expanded or not (only valid for tree data)
isFullyLoaded : Boolean

TreeNode
This field is added to the class at runtime when the Store is configured with lazyLoad. If set on a parent record at load time, that parent will not cause any more child load requests. If omitted, it will be automatically set to true when a load request receives fewer child records than requested.

To specifically set this field for a parent at its children load request, provide it as a property in the data response object:
```
return {
   data : [ ... ],
   isFullyLoaded : true
   total : 123
}
```
Or to include grandchildren for a parent, it can be provided as a property on the record data object:
```
return {
   data : [{
      id : 1,
      name : 'My Parent',
      isFullyLoaded : true,
      expanded : true,
      children : [{
         id : 2,
         name : 'My Child'
     }]
   }],
   total : 123
}
```
orderedParentIndex : Number

READONLY
TreeNode

This is a read-only field provided in server synchronization packets to specify which position the node takes in the parent's ordered children array. This index is set on load and gets updated on reordering nodes in tree. Sorting and filtering have no effect on it.
parentId : String/Number/null

READONLY
TreeNode

This is a read-only field provided in server synchronization packets to specify which record id is the parent of the record.
parentIndex : Number

READONLY
TreeNode

This is a read-only field provided in server synchronization packets to specify which position the node takes in the parent's children array. This index is set on load and gets updated automatically after row reordering, sorting, etc. To save the order, need to persist the field on the server and when data is fetched to be loaded, need to sort by this field.
remoteChildCount : Number

DEPRECATED
TreeNode

Deprecated:
This field has been deprecated. Please read the guide to find out if your app needs to use the new isFullyLoaded field.

This field is added to the class at runtime when the Store is configured with lazyLoad. The number specified should reflect the total amount of children of a parent node, including nested descendants.

Properties

Properties are getters/setters or publicly accessible variables on this class

isModelLink : Booleantrue

READONLY

static

ADVANCED
ModelLink

Identifies an object as an instance of ModelLink class, or subclass thereof.
isModelStm : Booleantrue

READONLY

static

ADVANCED
ModelStm

Identifies an object as an instance of ModelStm class, or subclass thereof.
isTreeNode : Booleantrue

READONLY

static

ADVANCED
TreeNode

Identifies an object as an instance of TreeNode class, or subclass thereof.
isViewPreset : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of ViewPreset class, or subclass thereof.
configurable : Object

internal

static
Model
A class property getter for the configuration properties of the class, which can be overridden by configurations passed at construction time.

Unlike a normal static property, this property is only ever used for the class that defines it (as in, hasOwnProperty). It is retrieved for all classes in a class hierarchy, to gather their configs individually and then combine them with those of derived classes.

For example, a Label might declare a text config like so:
```
 class Label extends Base {
     static configurable = {
         text : null
     };
 }
```
The text config is automatically inherited by classes derived from Label. By implementing get configurable(), derived classes can change the default value of inherited configs, or define new configs, or both.

When a config property is declared in this way, the class author can also implement either of two special methods that will be called when the config property is assigned a new value:
- changeText()
- updateText()
In the example above, the Label class could implement a changeText() method, an updateText() method, or both. The generated property setter ensures these methods will be called when the text property is assigned.

The generated setter (for text in this example) performs the following steps:
- If the class defines a changeText() method, call it passing the new value and the current value: changeText(newText, oldText).
  Then:
  - If changeText() exits without returning a value (i.e., undefined), exit and do nothing further. The assumption is that the changer method has done all that is required.
  - Otherwise, the return value of changeText() replaces the incoming value passed to the setter.
- If the new value (or the value returned by changeText()) is !== to the current value:
  - Update the stored config value in this._text.
  - If the class defines an updateText() method, call it passing the new value and the previous value. updateText(newText, oldText)
Resolving a value from an owner

By specifying a value starting with 'up.' for a config, the config system will resolve that value by examining the ownership hierarchy. It will walk up the hierarchy looking for a property matching the name (or dot separated path) after 'up.'. If one is found, the value will be read and used as the initial value.
```
class Parent extends Base {
    static get configurable() {
        return [
          'importantValue'
        ]
    }
}

class Child extends Base {
    static get configurable() {
        return [
          'value'
        ]
    }
}

const parent = new Parent({
    importantValue : 123
});

const child = new Child({
    owner : parent,
    // Will be resolved from the owner
    value : 'up.importantValue'
});

console.log(child.value); // logs 123
```
Please note that this is for now a one way one time binding, the value will only be read initially and not kept up to date on later changes.

Value Merging

When a config property value is an object, the value declared by the base class is merged with values declared by derived classes and the value passed to the constructor.
```
 class Example extends Base {
     static configurable = {
         config : {
             foo : 1,
             bar : 2
         }
     };
 }

 class Example2 extends Example {
     static configurable = {
         config : {
             bar : 42,
             zip : 'abc'
         }
     };
 }

 let ex = new Example2({
     config : {
         zip : 'xyz'
     }
 });
```
The result of the merge would set config to:
```
 ex.foo = {
     foo : 1,    // from Example
     bar : 42,   // from Example2
     zip : 'xyz' // from constructor
 }
```
Config Options

Some config properties require additional options such as declarative information about the config that may be useful to automate some operation. Consider a Button. It could declare that its text config affects the rendered HTML by applying a render property to the config definition. Its base class could then examine the config definition to find this property.

To support this, config options ca be declared like so:
```
 class Button extends Widget {
     static configurable = {
         text : {
             value   : null,
             $config : {
                 render : true
             }
         }
     };
 }
```
The $config property can alternatively be just the names of the options that should be enabled (set to true).

For example, the following is equivalent to the above:
```
 class Button extends Widget {
     static configurable = {
         text : {
             value   : null,
             $config : 'render'
         }
     };
```
Default Value

It is common to set a config to a null value to take advantage of internal optimizations for null values. In most cases the fact that this produces undefined as the actual initial value of the config is acceptable. When this is not acceptable, a config can be declared like so:
```
 class Widget {
     static configurable = {
         disabled : {
             $config : null,
             value   : null,
             default : false
         }
     };
```
The default property above determines the value of the config while still gaining the benefits of minimal processing due to the null value of the value property.
declarable : String[]

internal

static
Model
A class property getter to add additional, special class properties.

For example, a class adds a declarable class property like so:
```
 class Something extends Base {
     static get declarable() {
         return ['extra'];
     }

     static setupExtra(cls, meta) {
         // use cls.extra
     }
 }
```
A derived class can then specify this property like so:
```
 class Derived extends Something {
     static get extra() {
         // return extra information
     }
 }
```
When the Derived class is initialized, the setupExtra() method is called and Derived is passed as the argument. It is also the this pointer, but the parameter is minifiable. The second argument passed is the $meta object for the class.

Classes are initialized at the first occurrence of the following:
- An instance is created
- The class $meta property is accessed
defaultConfig : Object

internal

static
Model
A legacy class property getter for the default configuration of the class, which can be overridden by configurations passed at construction time. We recommend using configurable instead.

Unlike a normal static property, this property is only ever used for the class that defines it (as in, hasOwnProperty). It is retrieved for all classes in a class hierarchy, to gather their configs individually and then combine them with those of derived classes.

For example, a Store might declare its url config like so:
```
 class Store extends Base {
     static get defaultConfig() {
         return {
             url : null
         };
     }
 }
```
The url config is automatically inherited by classes derived from Store. By implementing get defaultConfig(), derived classes can change the default value of inherited configs, or define new configs, or both. When defining new configs, however, configurable is preferred.

Config properties introduced to a class by this declaration do not participate in value merging and do not get a generated setter. Config properties introduced by a base class using configurable can be set to a different value using defaultConfig and in doing so, the values will be merged as appropriate for configurable.
properties : Object

internal

static
Model

A class property getter for the default values of internal properties for this class.
allFields : DataField[]

READONLY

static
Model

An array containing all the defined fields for this Model class. This will include all superclass's defined fields.
autoExposeFields : Boolean

static
Model

Flag checked from Store when loading data that determines if fields found in first records should be exposed in same way as predefined fields.

Note that we for all but the most basic use cases recommend explicitly defining the fields. Having them auto exposed can lead to unexpected behavior, if the first record is not complete (fields missing, null etc).

childrenField : String

static

Model

The name of the data field which holds children of this Model when used in a tree structure

MyModel.childrenField = 'kids';
const parent = new MyModel({
    name : 'Dad',
    kids : [
        { name : 'Daughter' },
        { name : 'Son' }
    ]
});

defaults : Object

static
Model
Template static getter which is supposed to be overridden to define default field values for the Model class. Overrides defaultValue config specified by the fields getter. Returns a named object where key is a field name and value is a default value for the field.

NOTE: This is a legacy way of defining default values, we recommend using fields moving forward.
```
class Person extends Model {
    static get fields() {
        return [
            { name : 'username', defaultValue : 'New person' }
        ];
    }
}

class Bot extends Person {
    static get defaults() {
        return {
            username : 'Bot' // default value of 'username' field is overridden
        };
    }
}
```
fieldMap : Object<String, DataField>

READONLY

static
Model

An object containing all the defined fields for this Model class. This will include all superclass's defined fields through its prototype chain. So be aware that Object.keys and Object.entries will only access this class's defined fields.

fields : (String|DataFieldConfig|DataField)[]

READONLY

static

Model

Array of defined fields for this model class. Subclasses add new fields by implementing this static getter:

// Model defining two fields
class Person extends Model {
    static get fields() {
        return [
            { name : 'username', defaultValue : 'New person' },
            { name : 'birthdate', type : 'date' }
        ];
    }
}

// Subclass overriding one of the fields
class Bot extends Person {
    static get fields() {
        return [
            // Default value of 'username' field is overridden, any other setting from the parents
            // definition is preserved
            { name : 'username', defaultValue : 'Bot' }
        ];
    }
}

Fields in a subclass are merged with those from the parent class, making it easy to override mappings, formats etc.

Note that later accessing Bot.fields will refer to the block with the redefinition of the username field seen above, not to all fields available (username, birthdate). To access all fields, use either allFields on the Model class, or the fields property on a record.

idField : String

static
Model

The data source for the id field which provides the ID of instances of this Model.
$meta : Object

internal

READONLY

static
Model
An object owned by this class that does not share properties with its super class. This object may contain other properties which are added as needed and are not documented here.
- class : Function
  
  The class constructor that owns the meta object
- super : Object
  
  The $meta object for the super class. This is null for Base
- config : Object
  
  The object holding the default configuration values for this class
- configs : Object
  
  An object keyed by config name that holds the defined configs for the class The value of each property is a Config instance
- forkConfigs : Boolean
  
  This will be true if the default configuration values for this class (in the config property of the meta object) must be forked to avoid object sharing, or if the object can be passed to Object.create() for efficiency
- hierarchy : Function[]
  
  The array of classes in the ancestry of this class. This will start with Base at index 0 and ends with this class
- properties : Function[]
  
  The array of classes that define a "static get properties()" getter
$name : String

static

ADVANCED
Model
Class name getter. Used when original ES6 class name is minified or mangled during production build. Should be overridden in each class which extends Model or it descendants.
```
class MyNewClass extends Model {
    static $name = 'MyNewClass';
}
```

relations : Object<String, RelationConfig>

static

Model

Override in a subclass of Model to define relations to records in other stores.

Always defined on the "one" side, not the "many" side.

Expects an object where keys are relation names and values are relation configs.

This snippet will define a relation called team, allowing access to the foreign record via player.team. It will point to a record in the teamStore (must be available as record.firstStore.teamStore) with an id matching the players teamId field. The team record in turn, will have a field called players which is a collection of all players in the team.

class Player extends Model {
    static relations = {
        // Define a relation between a player and a team
        team : {
            foreignKey            : 'teamId',
            foreignStore          : 'teamStore',
            relatedCollectionName : 'players'
        }
    }
}

const teamStore = new Store({
    data : [
        { id : 1, name : 'Brynas' },
        { id : 2, name : 'Leksand' }
    ]
});

const playerStore = new Store({
    modelClass : Player,
    // Matches foreignStore, allowing records of playerStore to find the related store
    teamStore,
    data       : [
        // teamId is specified as foreignKey, will be used to match the team
        { id : 1, name : 'Nicklas Backstrom', teamId : 1  },
        { id : 2, name : 'Elias Lindholm',   teamId : 1  },
        { id : 3, name : 'Filip Forsberg',  teamId : 2  }
    ],
}

playerStore.first.team.name // > Brynas
playerStore.last.team.name // > Leksand
teamStore.first.players // > [nick, elias]
teamStore.last.players // > [filip]

To access the related record from the many side, use dot notation for the field name. For example in a Grid column:

const grid = new Grid({
   store : playerStore,
   columns : [
       { field : 'name', text : 'Name' },
       { field : 'team.name', text : 'Team' }
   ]
});

convertEmptyParentToLeaf : Boolean/Objectfalse

static
TreeNode
This static configuration option allows you to control whether an empty parent task should be converted into a leaf. Enable/disable it for a whole class:
```
Model.convertEmptyParentToLeaf = false;
```
By specifying true, all empty parents will be considered leafs. Can also be assigned a configuration object with the following Boolean properties to customize the behaviour:
```
Model.convertEmptyParentToLeaf = {
    onLoad   : false,
    onRemove : true
}
```
- onLoad : Boolean
  
  Apply the transformation on load to any parents without children (children : [])
- onRemove : Boolean
  
  Apply the transformation when all children have been removed from a parent

emptyArray : Array

internal

READONLY
Model

An empty array that can be used as a default value.
emptyObject : Object

internal

READONLY
Model

An empty object that can be used as a default value.
isModel : Booleantrue

READONLY

ADVANCED
Model

Identifies an object as an instance of Model class, or subclass thereof.
isViewPreset : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of ViewPreset class, or subclass thereof.
copyOf : Model

READONLY
Model

For copied records, this property links to the original model instance from which it was copied.
isBatchUpdating : Boolean

READONLY
Model

True if this Model is currently batching its changes.
isCommitting : Boolean

READONLY
Model

True if this models changes are currently being committed.
isCreating : Boolean
Model

Set this property to true when adding a record on a conditional basis, that is, it is yet to be confirmed as an addition.

When this is set, the isPersistable value of the record is false, and upon being added to a Store it will not be eligible to be synced with the server as an added record.

Subsequently, clearing this property means this record will become persistable and eligible for syncing as an added record.
isModified : Boolean

READONLY
Model

True if this model has any uncommitted changes.
isValid : Boolean

READONLY
Model

Check if record has valid data. Default implementation returns true, override in your model to do actual validation.
modificationData : Object

READONLY
Model

Get a map of the modified fields in form of an object. The field´s dataSource is used as the property name in the returned object. The record's id is included unless its persist config is false.
modificationDataToWrite : Object

READONLY
Model

Get a map of the modified data fields along with any alwaysWrite fields, in form of an object. The field´s dataSource is used as the property name in the returned object. Used internally by AjaxStore / CrudManager when sending updates.
modifications : Object

READONLY
Model

Get a map of the modified fields in form of an object. The field names are used as the property names in the returned object, and the property values are the latest field values.

The id field is included unless its persist config is false.
persistableData : Object

internal

READONLY
Model

Returns data for allpersistable fields in form of an object, using dataSource if present.
rawModificationData : Object

internal

READONLY
Model

Returns a map of the modified persistable fields
classDisplayName : String

READONLY
Model

Returns the string value for display purposes of an instance of this Model class. Needs to be overridden in subclasses.
fieldNames : String[]

READONLY
Model

Get the names of all properties in the data object.

Note that this is not the same as the fields defined for the model, in most cases you probably want to use fields instead.
groupChildren : Model[]/undefined

READONLY
Model

When called on a group header row returns list of records in that group. Returns undefined otherwise.
isGroupHeader : Boolean

READONLY
Model

Returns true for a group header record
generatedParent : Boolean

READONLY
Model

Reports true when the record is a parent record generated by the TreeGroup feature.

Only valid for stores used with TreeGroup feature enabled.
hasGeneratedId : Boolean

READONLY
Model

Checks if record has a generated id.

New records are assigned a generated id based on a UUID (starting with _generated), which is intended to be temporary and should be replaced by the backend on commit.
internalId : Number

READONLY
Model

Gets the records internalId. It is assigned during creation, guaranteed to be globally unique among models.
isPhantom : Boolean

READONLY
Model

Returns true if the record is new and has not been persisted (and received a proper id).
key : *

READONLY
Model

Holds the value that a generated group parent represents when using the TreeGroup feature.

Only valid for stores used with TreeGroup feature.

json : String

Model

Get the records data as a json string.

const record = new Model({
    title    : 'Hello',
    children : [
        ...
    ]
});

const jsonString = record.json;

//jsonString:
'{"title":"Hello","children":[...]}'

config : Object

READONLY

ADVANCED
Model

Returns a copy of the full configuration which was used to configure this object.
isConstructing : Boolean

READONLY

ADVANCED
Model

This property is set to true before the constructor returns.
isDestroyed : Boolean

READONLY
Model

This property is set to true by destroy after destruction.

It is also one of the few properties that remains on the object after returning from destroy(). This property is often checked in code paths that may encounter a destroyed object (like some event handlers) or in the destruction path during cleanup.
isDestroying : Boolean

READONLY

ADVANCED
Model

This property is set to true on entry to the destroy method. It remains on the objects after returning from destroy(). If isDestroyed is true, this property will also be true, so there is no need to test for both (for example, comp.isDestroying || comp.isDestroyed).
hasLinks : Boolean

READONLY
ModelLink

Are other records linked to this record?
isLinked : Boolean

READONLY
ModelLink

Is this record linked to another record?
originalRecord : Model[]

READONLY
ModelLink

Get the original record this record is linked to.
recordLinks : Model[]

READONLY
ModelLink

Get links to this record.
firstStore : Store

READONLY
Model

Get the first store that this model is assigned to.
stm : StateTrackingManager
ModelStm

Reference to STM manager, if used
isPersistable : Boolean

READONLY
Model

This yields true if this record is eligible for syncing with the server. It can yield false if the record is in the middle of a batched update, or if it is a tentative record yet to be confirmed as a new addition.
isRemoved : Boolean

internal

READONLY
Model

Returns true if this record is not part of any store.
allChildren : Model[]

READONLY
TreeNode

Retrieve all children, excluding filtered out nodes (by traversing sub nodes)
allUnfilteredChildren : Model[]

READONLY
TreeNode

Retrieve all children, including filtered out nodes (by traversing sub nodes)
childLevel : Number

READONLY
TreeNode

Depth in the tree at which this node exists. First visual level of nodes are at level 0, their direct children at level 1 and so on.
descendantCount : Number
TreeNode

Count all children (including sub-children) for a node (in its `firstStore´)
firstChild : Model

READONLY
TreeNode

Get the first child of this node
indexPath : Number[]

private

READONLY
Model

Returns index path to this node. This is the index of each node in the node path starting from the topmost parent. (only relevant when its part of a tree store).
isLeaf : Boolean

READONLY
TreeNode

Is a leaf node in a tree structure?
isLoaded : Boolean

READONLY
TreeNode

Returns true for parent nodes with children loaded (there might still be no children)
isParent : Boolean

READONLY
TreeNode

Is a parent node in a tree structure?
isRoot : Boolean

READONLY
TreeNode

Returns true if this node is the root of the tree
lastChild : Model

READONLY
TreeNode

Get the last child of this node
nextSibling : Model

READONLY
TreeNode

Get the next sibling of this node
orderedChildren : Model[]/null

READONLY
TreeNode

The direct children of this node in their original structural order, unaffected by sorting and filtering. Returns null for leaf nodes.

Unlike children, which reflects the current sort order and active filters, this property always returns all children in the order they were originally inserted.
parent : Model

READONLY
TreeNode

This is a read-only property providing access to the parent node.
parentId : Number/String/null
TreeNode

Reading this property returns the id of the parent node, if this record is a child of a node.

Setting this property appends this record to the record with the passed id in the same store that this record is already in.

Note that setting this property is only valid if this record is already part of a tree store.

This is not intended for general use. This is for when a server responds to a record mutation and the server decides to move a record to a new parent. If a parentId property is passed in the response data for a record, that record will be moved.
previousSibling : Model

READONLY
TreeNode

Get the previous sibling of this node
previousSiblingsTotalCount : Number

READONLY
TreeNode

Returns count of all preceding sibling nodes (including their children).
unfilteredChildren : Model[]/null

private
TreeNode

Array of tree nodes without any filter applied. On first filter, will take order from sorted children, but is not thereafter kept in sorted order, so order should not be relied upon.
visibleDescendantCount : Number
TreeNode

Count visible (expanded) children (including sub-children) for a node (in its firstStore)
hierarchyModificationDataToWrite : Object

internal

READONLY
TreeNode

Returns values of the persistable tree-defining fields: parentId, orderedParentIndex, and parentIndex or sparseIndex. parentIndex is omitted when sparseIndex is used.

Functions

Functions are methods available for calling on the class

hasConfigPath( object, path )
: Boolean

internal

static
Model

Determines if the specified config property exists in an instance of Base
mergeConfigs( baseConfig, ...configs )
: Object

internal

static
Model

Returns the merge of the baseConfig and config config objects based on the configs defined by this class.
new( ...configs )
: Base

private

static
Model

Factory version of the Base constructor. Merges all arguments to create a config object that is passed along to the constructor.
onClassMixedIn( )

internal

static
Model

This optional class method is called when a class is mixed in using the mixin() method.
getDefaultConfiguration( )
: Object

internal

static
Model

Gets the full defaultConfig block for this object's entire inheritance chain all the way up to but not including Base
setupConfigs( meta, configs, simple )

private

static
Model

This method is called as part of setupClass(). It will process the configurable() return object and the defaultConfig return object.
addField( fieldDef )
: DataField

static
Model

Add a field definition in addition to those predefined in fields.
applyDefaults( defaults )

static

ADVANCED
Model
Overrides applyDefaults to also handle Model field defaults.

When a key in the provided object matches a defined field name, the field's default value is updated so that new instances will use the new default. Non-field keys are passed through to the superclass implementation to handle config defaults.
```
EventModel.applyDefaults({ durationUnit : 'week' });
```
exposeProperties( data, rawtrue )

internal

static
Model

Makes getters and setters for fields (from definitions and data). Called once when class is defined and once when data is loaded first time.
processData( data, updatingfalse )
: Object

private

static
Model

Processes raw data, converting values and setting defaults.
processField( fieldName, value )
: *

static
Model

Processes input to a field, converting to expected type.
removeField( fieldName )

static
Model

Remove a field definition by name.
asId( model )
: String/Number

static
Model

Gets the id of specified model or model data object, or the value if passed string/number.
generateId( text )
: String/Number

static
Model
Generates an id for a new record (a phantom id), based on a UUID by default.

This function can be overridden to provide custom id generation logic.
```
let idCounter = 0;
// Override the default logic with app specific
Model.generateId = () => `id${new Date().getTime()}${idCounter++}`;
```
destroy( ...args )

static

ADVANCED
Model
Destroys the provided objects by calling their destroy method. Skips empty values or objects that are already destroyed.
```
Base.destroy(myButton, toolbar1, helloWorldMessageBox);
```
initClass( )

static

ADVANCED
Model

Registers this class type with its Factory
isOfTypeName( type )
: Boolean

static

ADVANCED
Model

Checks if an obj is of type using object's $name property and doing string comparison of the property with the type parameter.
mixin( ...mixins )
: Function

static

ADVANCED
Model
Applies one or more mixins to this class and returns the produced class constructor.

For example, instead of writing this:
```
 class A extends Delayable(Events(Localizable(Base))) {
     // ...
 }
```
Using this method, one would write this:
```
 class A extends Base.mixin(Localizable, Events, Delayable) {
     // ...
 }
```
If one of the mixins specified has already been mixed into the class, it will be ignored and not mixed in a second time.
setupClass( meta )

internal

static
Model

This method is called only once for any class. This can occur when the first instance is created or when the $meta object is first requested.
fieldSorter( a, b )
: Number

private

static
Model

This function forces correct field order. Correct order is parentId before id. If we process id field before parentId, idMap won't be updated and changing parent node will lead to duplicated records in storage
getFieldDataSource( fieldName )
: String

internal

static
Model

Returns dataSource configuration for a given field name
exposeRelations( )

internal

static
Model

Makes getters and setters for related records. Populates a Model#relation array with the relations, to allow it to be modified later when assigning stores.

constructor( config, store, meta )
Model

Constructs a new record from the supplied data config.
_thisIsAUsedExpression( expression )

internal
Model

This method is required to help unused getters to survive production build process. Some tools, like angular, will remove unused code in production build, making our side-effected getters behind, breaking code heavily.
bindConfigs( target, mapping, options )
: Function

internal
Model

Creates a binding between the specified config properties of this object and the specified target object. Changes to these config properties of this object will be reflected to the target object as they occur, and (optionally), vise-versa.

Returns a function to call to remove the binding.
delay( fn, delay, name )
: Number

private
Model

Delays the execution of the passed function by the passed time quantum, or if the time is omitted or not a number, delays until the next animation frame. Note that this will use setTimeout || requestAnimationFrame if this class mixes in Delayable, otherwise it uses the global methods. The function will be called using this object as its execution scope.
hasConfig( name )
: Boolean

internal
Model

Returns true if this instance has a non-null value for the specified config. This will not activate a lazy config.
peekConfig( name )
: *

internal
Model

Returns the value of an uningested config without ingesting the config or transforming it from its raw value using its changeXxxxx method.
trackDetacher( name, detacher )

private
Model

Tracks a detacher function for the specified listener name.
triggerConfig( name )
: Boolean

internal
Model

Ensures that the specified config is initialized if it is needed. If there is a config value specified, and it was initialized by this call, this method returns true. If there was a config value specified, and it was already initialized, this method returns false. If there was no value specified for the given config, this method returns null.

This is not the same as just reading the property, because some property getters exist that do not actually just read the config value back, but instead produce some result. Reading such properties to incidentally trigger a possible config initializer can lead to incorrect results. For example, the Combo items config.
triggerConfigs( group )
: String[]

internal
Model

This call will activate any pending lazy configs that were assigned a string value equal to the group parameter.
untrackDetachers( eventer )

private
Model

Removes all detacher functions for the specified Events object. This is called by the removeAllListeners method on that object which is typically called by its destroy invocation.
updateConfiguration( props )

internal
Model

This is intended to set a block of configs during configuration. It is not intended to be used outside of the configuration phase.

If any of the properties are not yet ingested from the configuration object, they will be set and ingested in the normal order.

Properties which are already ingested are set immediately.
classHierarchy( topClass )
: Function[]

private
Model

Used by the Widget and GridFeatureManager class internally. Returns the class hierarchy of this object starting from the topClass class (which defaults to Base).

For example classHierarchy(Widget) on a Combo would yield [Widget, Field, TextField, PickerField, Combo]
getConfig( name, ...names )
: *

internal
Model
Returns the value of the specified config property. This is a method to allow property getters to be explicitly called in a way that does not get optimized out.

The following triggers the getter call, but optimizers will remove it:
```
 inst.foo;   // also raises "expression has no side-effects" warning
```
Instead, do the following to trigger a getter:
```
 inst.getConfig('foo');
```
getProperties( )
: Object

private
Model

Gets the full properties block for this class's entire inheritance chain all the way up to but not including Base
onConfigChange( info )

internal
Model

This method is called when any config changes.
beginBatch( )
Model
Begin a batch, which stores changes and commits them when the batch ends. Prevents events from being fired during batch.
```
record.beginBatch();
record.name = 'Mr Smith';
record.team = 'Golden Knights';
record.endBatch();
```
Please note that you can also set multiple fields in a single call using set, which in many cases can replace using a batch:
```
record.set({
  name : 'Mr Smith',
  team : 'Golden Knights'
});
```
cancelBatch( )
Model

Cancels current batch operation. Any changes during the batch are discarded.
clearChanges( includeDescendantstrue )
Model

Clears tracked changes, used on commit. Does not revert changes.
copy( newIdOrData, deep )
: Model

Model
Makes a copy of this model, assigning the specified id or a generated id and also allowing you to pass field values to the created copy. A copyOf property is set on the copy to reference the original record.
```
const record = new Model({ name : 'Super model', hairColor : 'Brown' });
const clone = record.copy({ name : 'Super model clone' });
```
endBatch( silentfalse )
Model

End a batch, triggering events if data has changed.
getData( fieldName )
: *

Model

Returns raw data from the encapsulated data object for the passed field name
getUnmodified( fieldName )
: *

Model

Returns the unmodified value of the field, as in the value it had after the last commit. If the field has not been modified, the current value is returned.
hasBatchedChange( fieldName )
: Boolean

Model

Returns true if this Model currently has outstanding batched changes for the specified field name.
isFieldModified( fieldName )
: Boolean

Model

Returns true if this model has uncommitted changes for the provided field.
remove( silentfalse )
Model

Removes this record from all stores (and in a tree structure, also from its parent if it has one).
revertChanges( )
Model

Reverts changes in this back to their original values.
set( field, value, silentfalse )
Model
Set value for the specified field. You can also use the generated setters if loading through a Store.

Setting a single field, supplying name and value:
```
record.set('name', 'Clark');
```
Setting multiple fields, supplying an object:
```
record.set({
    name : 'Clark',
    city : 'Metropolis'
});
```
NOTE: Do not modify fields using dataSource, as it is intended only for reading and writing from the raw data object. Fields should be modified using name as it is the public interface.

Triggers: idChange, update, change

setData( )

internal

Model

Internal function used to update a records underlying data block (record.data) while still respecting field mappings. Needed in cases where a field needs setting without triggering any associated behaviour and it has a dataSource with a different name.

For example:

// startDate mapped to data.beginDate
{ name : 'startDate', dataSource : 'beginDate' }

// Some parts of our code needs to update the data block without triggering any of the behaviour associated with
// calling set. This would then not update "beginDate":
record.data.startDate = xx;

// But this would
record.setData('startDate', xx);

detachListeners( name )

ADVANCED
Model

Removes all event listeners that were registered with the passed names.
get( fieldName )
: *

Model

Get value for specified field name. You can also use the generated getters if loading through a Store. If model is currently in batch operation this will return updated batch values which are not applied to Model until endBatch() is called.
getDataSource( fieldName )
: String

Model

Get the data source used by specified field. Returns the fieldName if no data source specified.
getFieldDefinition( fieldName )
: DataField

Model

Convenience function to get the definition for a field from class.
getFieldPersistentValue( nameOrField )

private
Model

Returns field value that should be persisted, or undefined if field is configured with persist: false.

toJSON( )

: Object

Model

Used by JSON.stringify() to correctly convert this record to json.

In most cases no point in calling it directly.

// This will call `toJSON()`
const json = JSON.stringify(record);

If called manually, the resulting object is a clone of record.data + the data of any children:

const record = new Model({
    title    : 'Hello',
    children : [
        ...
    ]
});

const jsonObject = record.toJSON();

// jsonObject:
{
    title : 'Hello',
    children : [
        ...
    ]
}

toString( )
: String

Model
Represent the record as a string, by default as a JSON string. Tries to use an abbreviated version of the object's data, using id + name/title/text/label/description. If no such field exists, the full data is used.
```
const record = new Model({ id : 1, name : 'Steve Rogers', alias : 'Captain America' });
console.log(record.toString()); // logs { "id" : 1, "name" : "Steve Rogers" }
```
afterConfigure( )

internal
Model

Base implementation so that all subclasses and mixins may safely call super.afterConfigure. This is called by the Base class after the configure method has been called. At this point, all configs have been applied.

This method allows all classes in the hierarchy to inject functionality either before or after the super.afterConstruct();
afterConstruct( )

internal
Model

Base implementation so that all subclasses and mixins may safely call super.afterConstruct.

This is called by the Base class after the construct method has been called.

At this point, all configs have been applied.

This method allows all classes in the hierarchy to inject functionality either before or after the super.afterConstruct();
configure( config )

internal
Model

Called by the Base constructor to apply configs to this instance. This must not be called.
construct( ...args )

ADVANCED
Model

Base implementation applies configuration.

Subclasses need only implement this if they have to initialize instance specific properties required by the class. Often a construct method is unnecessary. All initialization of incoming configuration properties can be done in a set propName implementation.
destroyProperties( ...properties )

internal
Model
Destroys the named properties if they have been initialized, and if they have a destroy method. Deletes the property from this object. For example:
```
 this.destroyProperties('store', 'resourceStore', 'eventStore', 'dependencyStore', 'assignmentStore');
```
doDestroy( )

ADVANCED
Model
Classes implement this method to provide custom cleanup logic before calling super.doDestroy(). The general pattern is as follows:
```
 class Foo extends Base {
     doDestroy() {
         // perform custom cleanup

         super.doDestroy();
     }
 }
```
This method is called by destroy which also prevents multiple calls from reaching doDestroy. Prior to calling doDestroy, isDestroying is set to true. Upon return, the object is fully destructed and isDestroyed is set to true.

Do not call this method directly. Instead call destroy.
finishConfigure( )

internal
Model

Base implementation so that all subclasses and mixins may safely call super.finishConfigure.

This is called by the Base class before exiting the configure method.

At this point, all configs have been applied, but the isConfiguring property is still set.

This method allows all classes in the hierarchy to inject functionality into the config phase.
setConfig( config )

ADVANCED
Model

Sets configuration options this object with all the properties passed in the parameter object. Timing is taken care of. If the setter of one config is called first, and references the value of another config which has not yet been set, that config will be set just in time, and the new value will be used.
startConfigure( )

internal
Model

Base implementation so that all subclasses and mixins may safely call super.startConfigure.

This is called by the Base class before setting configuration properties, but after the active initial getters have been set, so all configurations are available.

This method allows all classes in the hierarchy to force some configs to be evaluated before others.
animateProperty( propertyName, newValue, duration1000, easing'linear' )
Model

Changes the value of a numeric property of this object smoothly over the specified duration.
callback( fn, thisObject, args )

ADVANCED
Model

Provides a way of calling callbacks which may have been specified as the name of a function and optionally adds scope resolution.

For example, if the callback is specified as a string, then if it is prefixed with 'this.' then the function is resolved in this object. This is useful when configuring listeners at the class level.

If the callback name is prefixed with 'up.' then the ownership hierarchy is queried using the owner property until an object with the named function is present, then the named function is called upon that object.

If a named function is not found, an error is thrown. If the function should be only called when present, and may not be present, add a ? as a suffix.
downloadTestCase( )
Model

Experimental helper function, extracts the currently used configs and wraps them as an app, downloading the resulting JS file.

This function is intended to simplify creating test cases for issue reporting on Bryntum's support forum.
equals( other )
: Boolean

Model

Compares this Model instance to the passed instance. If they are of the same type, and all fields (except, obviously, id) are equal, this returns true.
instanceMeta( instanceOrId )

private
Model

Used to set per external instance meta data. For example useful when using a record in multiple grids to store some state per grid.
isPartOfStore( store )
: Boolean

internal
Model

Returns true if this record is contained in the specified store, or in any store if store param is omitted.
joinStore( store )

internal
Model

Joins this record and any children to specified store, if not already joined.
link( )
: Proxy

ModelLink

Creates a proxy record (using native Proxy) linked to this record (the original). The proxy records shares most data with the original, except for its id (which is always generated), and ordering fields such as parentIndex and parentId etc.

Any change to the proxy record will be reflected on the original, and vice versa. A proxy record is not meant to be persisted, only the original record should be persisted. Thus, proxy records are not added to stores change tracking (added, modified and removed records).

Removing the original record removes all proxies.

Creating a proxy record allows a Store to seemingly contain the record multiple times, something that is otherwise not possible. It also allows a record to be used in both a tree store and in a flat store.

Not all UI features support linked records
resolveCallback( handler, thisObj, enforceCallabilitytrue )
: Object

ADVANCED
Model

Provides a way of locating callbacks which may have been specified as the name of a function and optionally adds scope resolution.

For example, if the callback is specified as a string, then if it is prefixed with 'this.' then the function is resolved in this object. This is useful when configuring listeners at the class level.

If the callback name is prefixed with 'up.' then the ownership hierarchy is queried using the owner property until an object with the named function is present, then the named function is called upon that object.
unjoinStore( store, isReplacingfalse )

internal
Model

Unjoins this record and any children from specified store, if already joined.
isEditable( fieldName )
: Boolean/undefined

Model

Defines if the given event field should be manually editable in UI. You can override this method to provide your own logic.
refreshCalculatedField( field )
: *

internal
Model

Recalculates the value of a calculated field
syncId( value )

private
Model

Silently updates record's id with no flagging the property as modified. Triggers onModelChange event for changed id.
triggerBeforeUpdate( changes )
: Boolean

private
Model

Triggers beforeUpdate event for each store and checks if changes can be made from event return value.
getStoreLinks( store, limit0 )
: Model[]

private
ModelLink

Returns all links of the record in the provided store.
afterInsertChild( )

private
ModelStm

Called from insertChild to notify StateTrackingManager about children insertion. Provides it with all necessary context information collected in beforeInsertChild required to undo/redo the action.
afterRemoveChild( )

private
ModelStm

Called from removeChild to notify StateTrackingManager about children removing. Provides it with all necessary context information collected in beforeRemoveChild required to undo/redo the action.
afterSet( )

private
ModelStm

Overridden to store initial data of the changed fields and to notify STM manager about the change action if anything has been changed in result.

The method is called from within set method.
beforeInsertChild( childRecords )
: Array

private
ModelStm

Called from insertChild to obtain inserted records initial parents and parent index, to be able to restore the state back upon undo.
beforeRemoveChild( childRecords, isMove )
: Array

private
ModelStm

Called from removeChild to obtain removed records initial parent index, to be able to restore the state back upon undo.
ancestorsExpanded( store )
: Boolean

TreeNode

This method returns true if this record has all expanded ancestors and is therefore eligible for inclusion in a UI.
appendChild( childRecord, silentfalse )
: Model/Model[]/null

TreeNode

Append a child record(s) to any current children.
bubble( fn, skipSelffalse )
TreeNode

Bubbles up from this node, calling the specified function with each node.
bubbleWhile( fn, skipSelffalse )
: Boolean

TreeNode

Bubbles up from this node, calling the specified function with each node, while the function returns true.
clearChildren( silentfalse )
: Model[]

TreeNode

Removes all child nodes from this node.
contains( childOrId, skipSelffalse, options )
: Boolean

TreeNode

Checks if this model contains another model as one of it's descendants
convertToParent( silentfalse )
TreeNode

Converts a leaf node to a parent node, assigning an empty array as its children
getDescendantCount( onlyVisiblefalse, store )
: Number

TreeNode

Count visible (expanded)/all children for this node, optionally specifying for which store.
insertChild( childRecord, before, silentfalse )
: Model/Model[]/null

TreeNode

Insert a child record(s) before an existing child record.
isExpanded( store )
: Boolean

TreeNode

Used by stores to assess the record's collapsed/expanded state in that store.
processChildren( )

internal
TreeNode

Called during creation to also turn any children into Models joined to the same stores as this model
removeChild( childRecords, isMovefalse, silentfalse )
: Model[]

TreeNode

Remove a child record. Only direct children of this node can be removed, others are ignored.
replaceChildren( childRecords )
: Model[]

TreeNode

Replaces all child nodes with the new node set.
traverse( fn, skipSelffalse, options )
TreeNode

Traverses all child nodes recursively calling the passed function on a target node before iterating the child nodes.
traverseBefore( fn, skipSelffalse, options )
TreeNode

Traverses all child nodes recursively calling the passed function on child nodes of a target before calling it on the node.
traverseWhile( fn, skipSelffalse, options )
: Boolean

TreeNode

Traverses child nodes recursively while fn returns true
getRelationConfig( name )
: Object

private
Model

Get a relation config by name, from the first store.
initRelation( config )
: Model

private
Model

Initializes/updates a single relation.
initRelations( )

private
Model

Initializes model relations. Called from store when adding a record.
clear( )

private
TreeNode

Removes all records from the rootNode
sortOrderedChildren( deeptrue, usePreviousOrderfalse )
: Set

private
TreeNode

Iterates orderedChildren array to apply sorting order according to orderedParentIndex. Normally sorting is not required because order is maintained on append/insert. But is useful when pasting number of records to restore their original order.

Type definitions

ViewPresetTimeResolution
An object containing a unit identifier and an increment variable, used to define the timeResolution of a ViewPreset.
Properties
- unit : String
  
  The unit of the resolution, e.g. 'minute'
- increment : Number
  
  The increment of the resolution, e.g. 15

ViewPresetHeaderRow

Defines a header level for a ViewPreset.

A sample header configuration can look like below

headers    : {
    {
        unit        : "month",
        renderer(start, end, headerConfig, index) {
            var month = start.getMonth();
            // Simple alternating month in bold
            if (start.getMonth() % 2) {
                return '<strong>' + month + '</strong>';
            }
            return month;
        },
        align       : 'start' // `start` or `end`, omit to center content (default)
    },
    {
        unit        : "week",
        increment   : 1,
        renderer(start, end, headerConfig, index) {
            return 'foo';
        }
    },
}

Properties

align : 'start'/'center'/'end'

The text alignment for the cell. Valid values are start or end, omit this to center text content (default). Can also be added programmatically in the renderer.
unit : DurationUnit

The unit of time represented by each cell in this header row. See also increment property. Valid values are "millisecond", "second", "minute", "hour", "day", "week", "month", "quarter", "year".
headerCellCls : String

A CSS class to add to the cells in the time axis header row. Can also be added programmatically in the renderer.
increment : Number

The number of units each header cell will represent (e.g. 30 together with unit: "minute" for 30 minute cells)
dateFormat : String

Defines how the cell date will be formatted

renderer : Function

A custom renderer function used to render the cell content. It should return text/HTML to put in the header cell.

function (startDate, endDate, headerConfig, i) {
  // applies special CSS class to align header left
  headerConfig.align = "start";
  // will be added as a CSS class of the header cell DOM element
  headerConfig.headerCellCls = "myClass";

  return DateHelper.format(startDate, 'YYYY-MM-DD');
}

The render function is called with the following parameters:

startDate : Date

The start date of the cell.
endDate : Date

The end date of the cell.
headerConfig : Object

An object containing the header config.
align : 'start'/'center'/'end'

The text alignment for the cell. See align above.
headerCellCls : String

A CSS class to add to the cells in the time axis header row. See headerCellCls above.
index : Number

The index of the cell in the row.
timeline : TimelineBase

The timeline widget (e.g. Scheduler or Gantt)
returns : DomConfig/String/null

The rendered content for the header cell
thisObj : Object

this reference for the renderer function

cellGenerator : Function

A function that should return an array of objects containing 'start', 'end' and 'header' properties. Use this if you want full control over how the header rows are generated.

Note:cellGenerator cannot be used for the bottom level of your headers.

Example :

viewPreset : {
    displayDateFormat : 'H:mm',
    shiftIncrement    : 1,
    shiftUnit         : 'WEEK',
    timeResolution    : {
        unit      : 'MINUTE',
        increment : 10
    },
    headers           : [
        {
            unit          : 'year',
            // Simplified scenario, assuming view will always just show one US fiscal year
            cellGenerator : (viewStart, viewEnd) => [{
                start  : viewStart,
                end    : viewEnd,
                header : `Fiscal Year ${viewStart.getFullYear() + 1}`
            }]
        },
        {
            unit : 'quarter',
            renderer(start, end, cfg) {
                const
                    quarter       = Math.floor(start.getMonth() / 3) + 1,
                    fiscalQuarter = quarter === 4 ? 1 : (quarter + 1);

                return `FQ${fiscalQuarter} ${start.getFullYear() + (fiscalQuarter === 1 ? 1 : 0)}`;
            }
        },
        {
            unit       : 'month',
            dateFormat : 'MMM Y'
        }
    ]
 },

Source path

Scheduler/preset/ViewPreset.js

ViewPreset

Defining custom header rows

Using embedded text inside format string

Useful configs and functions

See also

Fields

Properties

Resolving a value from an owner

Value Merging

Config Options

Default Value

Functions

Type definitions

Properties

Properties

Source path

Inheritance tree3

Mixins3

Contents