PdfExport
Feature

Generates PDF/PNG files from the Grid component.

A server-side service is required to perform the export operation. Check out PDF Export Server documentation and installation steps here

When your server is up and running, it listens to requests. The Export feature sends a request to the specified URL with the HTML fragments. The server generates a PDF (or PNG) file and returns a download link (or binary, depending on sendAsBinary config). Then the Export feature opens the link in a new tab and the file is automatically downloaded by your browser. This is configurable, see openAfterExport config.

The exportServer URL must be configured. The URL can be localhost if you start the server locally, or your remote server address.

This feature will not work properly when Store uses lazyLoad

Usage

const grid = new Grid({
    features : {
        pdfExport : {
            exportServer : 'http://localhost:8080' // Required
        }
    }
})

// Opens popup allowing to customize export settings
grid.features.pdfExport.showExportDialog();

// Simple export
grid.features.pdfExport.export({
    columns : grid.columns.map(c => c.id)
}).then(result => {
    // Response instance and response content in JSON
    let { response } = result;
});

Exporting large datasets

PDF Export feature supports streaming generated pages using WebSocket connection. If server does not support it, then feature will use single HTTP request with all the data. For big datasets that can lead to page crashing when running out of memory. WebSocket support allows feature to send pages to the server one by one and then wait for the server to respond with a link to the file or the file itself.

Feature will check API status of the export server and starting from version 2.0.1, the server response will allow WebSocket connections.

Exporters

There are three exporters available by default: singlepage, multipage and multipagevertical:

singlepage - generates single page with content scaled to fit the provided paperFormat
multipage - generates as many pages as required to fit all requested content, unscaled
multipagevertical - a combination of two above: it scales content horizontally to fit into page width and then puts overflowing content on vertical pages. Like a scroll.

Loading resources

If you face a problem with loading resources when exporting, the cause might be that the application and the export server are hosted on different servers. This is due to Cross-Origin Resource Sharing (CORS). There are 2 options how to handle this:

Allow cross-origin requests from the server where your export is hosted to the server where your application is hosted;
Copy all resources keeping the folder hierarchy from the server where your application is hosted to the server where your export is hosted and setup paths using translateURLsToAbsolute config and configure the export server to give access to the path:

const grid = new Grid({
    features : {
        pdfExport : {
            exportServer : 'http://localhost:8080',
            // '/resources' is hardcoded in WebServer implementation
            translateURLsToAbsolute : 'http://localhost:8080/resources'
        }
    }
})

// Following path would be served by this address: http://localhost:8080/resources/
node ./src/server.js -h 8080 -r web/application/styles

where web/application/styles is a physical root location of the copied resources, for example:

This feature is disabled by default. For info on enabling it, see GridFeatures.

Configs

Configs are options you supply in a configuration object when creating an instance of this class

disabled : Booleanfalse

InstancePlugin

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.

listeners : Object

Events

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
    }
});

alignRows : Booleanfalse

Set to true to align row top to the page top on every exported page. Only applied to multipage export.
clientURL : String

Export server will navigate to this url first and then will change page content to whatever client sent. This option is useful with react dev server, which uses a strict CORS policy.
exportDialog : ExportDialogConfig

A config object to apply to the ExportDialog widget.

Has a corresponding runtime exportDialog property.
exportMask : String"Generating pages..."

A message to be shown when Export feature is performing export.
exportProgressMask : String"Waiting for response from server..."

A message to be shown when export is almost done.
exportServer : String

URL of the print server.
exporterConfig : Object

private

Config for exporter.
exporterType : 'singlepage'/'singlepageunscaled'/'multipage'/'multipagevertical'/Stringsinglepage

Type of the exporter to use. Should be one of the configured exporters
exporters : Exporter[]["SinglePageExporter","SinglePageUnscaledExporter","MultiPageExporter","MultiPageVerticalExporter"]

List of exporter classes to use in export feature
fetchOptions : FetchOptions

An object containing the Fetch options to pass to the export server request. Use this to control if credentials are sent and other options, read more at MDN.

footerTpl : Function

A template function used to generate a page footer. It is passed an object with ´currentPage´ and `totalPages´ properties.

let grid = new Grid({
     appendTo   : 'container',
     features : {
         pdfExport : {
             exportServer : 'http://localhost:8080/',
             footerTpl    : () => '<div class="demo-export-footer"><h3>© 2020 CoolCorp Inc</h3></div>'
         }
     }
});

Parameters

data : Object

Data object
currentPage : Number

Current page number
totalPages : Number

Tolal pages count

Returns

String

headerTpl : Function

A template function used to generate a page header. It is passed an object with ´currentPage´ and `totalPages´ properties.

let grid = new Grid({
    appendTo   : 'container',
    features : {
        pdfExport : {
            exportServer : 'http://localhost:8080/',
            headerTpl : ({ currentPage, totalPages }) => `
                <div class="demo-export-header">
                    <img src="coolcorp-logo.png"/>
                    <dl>
                        <dt>Date: ${DateHelper.format(new Date(), 'll LT')}</dt>
                        <dd>${totalPages ? `Page: ${currentPage + 1}/${totalPages}` : ''}</dd>
                    </dl>
                </div>`
         }
    }
});

Parameters

data : Object

Data object
currentPage : Number

Current page number
totalPages : Number

Tolal pages count

Returns

String

keepPathName : Booleantrue

When true links are converted to absolute by combining current window location (with replaced origin) with resource link. When false links are converted by combining new origin with resource link (for angular)
keepRegionSizes : Object<String, Boolean>
By default, subGrid width is changed to fit all exported columns. To keep certain subGrid size specify it in the following form:
```
keepRegionSizes : {
    locked : true
}
```
lockPaperSize : Booleanfalse

Defines if printed/exported page should contain @page style with paper size and orientation specified.
openAfterExport : Booleantrue

When true, page will attempt to download generated file.
openInNewTab : Booleanfalse

False to open in the current tab, true - in a new tab
repeatHeader : Booleanfalse

Set to true to show column headers on every page. This will also set alignRows to true. Only applies to MultiPageVertical exporter.
rowReadyCondition : Function
A function that determines when to capture the HTML for exported rows. When set to null (the default), the export happens immediately without waiting. The function receives the export configuration as a parameter. The rendering process works in chunks, using the same approach as the Grid component - displaying visible rows with an additional buffer.

Examples:
```
// simple timeout
new Grid({
    features : {
        pdfExport : {
            rowReadyCondition : async () => await new Promise(resolve => setTimeout(resolve, 100))
        }
    }
});

// waiting for a condition
new Grid({
    features : {
        pdfExport : {
            rowReadyCondition : async () => await promiseWithCondition
        }
    }
});
```
Returns

void

Has a corresponding runtime rowReadyCondition property.
sendAsBinary : Booleanfalse

Set to true to receive binary file from the server instead of download link.
showErrorToast : Booleantrue

Set to false to not show Toast message on export error.
translateURLsToAbsolute : Boolean/Stringtrue

True to replace all linked CSS files URLs to absolute before passing HTML to the server. When passing a string the current origin of the CSS files URLS will be replaced by the passed origin.

For example: css files pointing to /app.css will be translated from current origin to {translateURLsToAbsolute}/app.css
useBrowserPrint : Booleanfalse

private

When true, export feature will use an iframe and browser's default print dialog, which allows saving as PDF. Content is optimized for chrome/edge to exact page size in the specified orientation and no margins. If you only see grid header or blank pages, try using different scale value in the print dialog NOTE: Not supported in Safari. Print works, but Safari cannot seem to fit content to one page correctly.
useRenderedColumnWidth : Boolean

private

This config forces exporter to always use rendered column width. Used by Agenda view in Calendar
webSocketAvailable : Boolean

Determines whether to stream exported pages directly to the export server using WebSocket connection to offload client application. false - use legacy mode which first collected all pages locally and then passed them in a single request true - stream pages directly to the server null (default) - ask export server for WebSocket support and use it if possible

Has a corresponding runtime webSocketAvailable property.
webSocketRequestTimeout : Number

Maximum time in ms to wait for the response over the websocket connection

Has a corresponding runtime webSocketRequestTimeout property.
catchEventHandlerExceptions : Booleanfalse

ADVANCED
Events

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.
internalListeners : Object

internal
Events

Internal listeners, that cannot be removed by the user.
fileFormat : 'pdf'/'png'pdf

Format of the exported file, either pdf or png.
fileName : String

Name of the exported file.
orientation : 'portrait'/'landscape'portrait

Orientation. Options are portrait and landscape.
paperFormat : 'A0'/'A1'/'A2'/'A3'/'A4'+ 3 moreA4

Export paper format. Available options are A1...A5, Legal, Letter.
rowsRange : 'all'/'visible'all

Specifies which rows to export. all for complete set of rows, visible for only rows currently visible.

bubbleEvents : Object

Events

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
        }
    }
});

callOnFunctions : Booleanfalse
Events
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.
client : Widget

ADVANCED
InstancePlugin

The widget which this plugin is to attach to.

Has a corresponding runtime client property.

localeClass : Base

ADVANCED

Localizable

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.

localizable : Booleantrue

ADVANCED
Localizable

Set to false to disable localization of this object.
localizableProperties : String[]

ADVANCED
Localizable
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
          }
      }
  };
```

Properties

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

isEvents : Booleantrue

READONLY

static

ADVANCED
Events

Identifies an object as an instance of Events class, or subclass thereof.
isLocalizable : Booleantrue

READONLY

static

ADVANCED
Localizable

Identifies an object as an instance of Localizable class, or subclass thereof.
isPdfExport : Booleantrue

READONLY

static

ADVANCED

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

internal

static
InstancePlugin
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
InstancePlugin
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
InstancePlugin
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
InstancePlugin

A class property getter for the default values of internal properties for this class.
$meta : Object

internal

READONLY

static
InstancePlugin
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

pluginConfig : PluginConfigObject

READONLY

static

InstancePlugin

Defines how the plugin's methods integrate with its client (the widget it is attached to). Override this static getter in subclasses.

class MyFeature extends InstancePlugin {
    static get pluginConfig() {
        return {
            assign   : ['newMethod'],           // client.newMethod() calls plugin
            before   : ['onElementKeyDown'],    // plugin runs first
            after    : ['onElementClick'],      // client runs first
            override : ['processData']          // plugin replaces, uses this.overridden
        };
    }

    processData(data) {
        // Call original: this.overridden.processData(data)
        return this.overridden.processData(this.transform(data));
    }
}

disabled : Booleanfalse

InstancePlugin

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 disabled config.

currentExportPromise : Promise/null

When export is started from GUI (ExportDialog), export promise can be accessed via this property.
exportDialog : ExportDialog

Returns the instantiated export dialog widget as configured by exportDialog

Has a corresponding exportDialog config.
isExporting : Boolean

READONLY

This yields true if an export/print operation is ongoing.
rowReadyCondition : Function
A function that determines when to capture the HTML for exported rows. When set to null (the default), the export happens immediately without waiting. The function receives the export configuration as a parameter. The rendering process works in chunks, using the same approach as the Grid component - displaying visible rows with an additional buffer.

Examples:
```
// simple timeout
new Grid({
    features : {
        pdfExport : {
            rowReadyCondition : async () => await new Promise(resolve => setTimeout(resolve, 100))
        }
    }
});

// waiting for a condition
new Grid({
    features : {
        pdfExport : {
            rowReadyCondition : async () => await promiseWithCondition
        }
    }
});
```
Has a corresponding rowReadyCondition config.
webSocketAvailable : Boolean

Determines whether to stream exported pages directly to the export server using WebSocket connection to offload client application. false - use legacy mode which first collected all pages locally and then passed them in a single request true - stream pages directly to the server null (default) - ask export server for WebSocket support and use it if possible

Has a corresponding webSocketAvailable config.
webSocketRequestTimeout : Number

Maximum time in ms to wait for the response over the websocket connection

Has a corresponding webSocketRequestTimeout config.
emptyArray : Array

internal

READONLY
InstancePlugin

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

internal

READONLY
InstancePlugin

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

READONLY

ADVANCED
InstancePlugin

Identifies an object as an instance of InstancePlugin class, or subclass thereof.
isPdfExport : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of PdfExport class, or subclass thereof.
catchEventHandlerExceptions : Booleanfalse

ADVANCED
Events

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 catchEventHandlerExceptions config.
enabled : Boolean

internal

READONLY
InstancePlugin
Simple wrapper for disabled to make optional chaining simple:
```
grid.features.myFeature?.enabled // returns true when feature exists and is enabled
```
config : Object

READONLY

ADVANCED
InstancePlugin

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

READONLY

ADVANCED
InstancePlugin

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

READONLY
InstancePlugin

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
InstancePlugin

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).
callOnFunctions : Booleanfalse
Events
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 callOnFunctions config.
client : Widget

READONLY

ADVANCED
InstancePlugin

The Widget which was passed into the constructor, which is the Widget we are providing extra services for.

Has a corresponding client config.
localeHelper : LocaleHelper

READONLY

ADVANCED
Localizable

Get the global LocaleHelper
localeManager : LocaleManager

READONLY

ADVANCED
Localizable

Get the global LocaleManager

Functions

Functions are methods available for calling on the class

hasConfigPath( object, path )
: Boolean

internal

static
InstancePlugin

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

internal

static
InstancePlugin

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

private

static
InstancePlugin

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

internal

static
InstancePlugin

This optional class method is called when a class is mixed in using the mixin() method.
applyDefaults( defaultsObj )

static

ADVANCED
InstancePlugin
Merges the provided default configuration values with the existing defaults for this class (and its subclasses).

This method allows you to define additional or override existing default property values that apply to all instances of the class.
```
// All my input fields should be clearable
 Field.applyDefaults({
     clearable : true
});
```
getDefaultConfiguration( )
: Object

internal

static
InstancePlugin

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
InstancePlugin

This method is called as part of setupClass(). It will process the configurable() return object and the defaultConfig return object.
initPlugin( plugInto, PluginClass, config )
: InstancePlugin

internal

static
InstancePlugin

Call from another instance to add a plugin to it
initPlugins( plugInto, ...plugins )

internal

static
InstancePlugin
Call from another instance to add plugins to it.
```
InstancePlugin.initPlugins(this, Search, Stripe);
```
destroy( ...args )

static

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

localize( text, templateData )

: String

internal

static

Localizable

Get localized string, returns null if no localized string found.

// Simple localization
const someText = SomeClass.localize('L{text}');

// With template data
const someText = SomeClass.localize('L{template}', { count : 5 }); // Number in object
const someText = SomeClass.localize('L{template}', { name : 'John' }); // String in object
const someText = SomeClass.localize('L{template}', 'John'); // Strings parameter

initClass( )

static

ADVANCED
InstancePlugin

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

static

ADVANCED
InstancePlugin

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
InstancePlugin
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
InstancePlugin

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.

constructor( ...args )

ADVANCED
InstancePlugin

Base constructor, passes arguments to construct.
downloadLink( name, href )

private

Creates link to download the file.
export( config )
: Promise

ASYNC

Starts the export process. Accepts a config object which overrides any default configs. NOTE. Component should not be interacted with when export is in progress

filterStyles( styles )

: String[]

This method accepts all stylesheets (link and style tags) which are supposed to be put on the page. Use this hook method to filter or modify them.

new Grid({
    features: {
        pdfExport: {
            // filter out inline styles and bootstrap.css
            filterStyles: styles => styles.filter(item => !/(link|bootstrap.css)/.test(item))
        }
    }
});

getConsumer( config )
: Promise

private

ASYNC

Returns consumer instance
getExporter( config )
: ExporterBase

private

Returns instance of the exporter
processExportContent( response, config )
: Promise

ASYNC
Handles output of the receiveExportContent. Server response can be of two different types depending on sendAsBinary config:
- application/json In this case JSON response contains url of the file to download
- application/octet-stream In this case response contains stream of file binary data
If openAfterExport is true, this method will try to download content.

receiveExportContent( pages, config )

: Promise

ASYNC

Sends request to the export server and returns Response instance. This promise can be cancelled by the user by clicking on the toast message. When the user clicks on the toast, abort method is called on the promise returned by this method. If you override this method you can implement abort method like in the snippet below to cancel the request.

class MyPdfExport extends PdfExport {
    receiveExportContent(pages, config) {
        let controller;

        const promise = new Promise(resolve => {
            controller = new AbortController();
            const signal = controller.signal;

            fetch(url, { signal })
                .then(response => resolve(response));
        });

        // This method will be called when user clicks on the toast message to cancel the request
        promise.abort = () => controller.abort();

        return promise;
    }
}

const grid = new Grid({ features: { myPdfExport : {...} } });

grid.features.myPdfExport.export().catch(e => {
    // In case of aborted request do nothing
    if (e.name !== 'AbortError') {
        // handle other exceptions
    }
});

responseBlobToObjectURL( response, mimeType )
: Promise

private

ASYNC

Creates object URL from response content with given mimeType
showExportDialog( )
: Promise

ASYNC

Shows export dialog
_thisIsAUsedExpression( expression )

internal
InstancePlugin

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
InstancePlugin

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
InstancePlugin

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
InstancePlugin

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

internal
InstancePlugin

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
InstancePlugin

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

internal
InstancePlugin

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
InstancePlugin

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

private
InstancePlugin

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
InstancePlugin

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
InstancePlugin

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
InstancePlugin
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
InstancePlugin

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

internal
InstancePlugin

This method is called when any config changes.
addListener( config, thisObj, oldThisObj )
: Function

Events
Adds an event listener. This method accepts parameters in the following format:
```
 myObject.addListener({
     thisObj    : this,          // The this reference for the handlers
     eventname2 : 'functionName' // Resolved at invocation time using the thisObj,
     otherevent : {
         fn      : 'handlerFnName',
         once    : true          // Just this handler is auto-removed on fire
     },
     yetanother  : {
         fn      : 'yetAnotherHandler',
         args    : [ currentState1, currentState2 ] // Capture info to be passed to handler
     },
     prio        : 100           // Higher prio listeners are called before lower
 });
```
When listeners have a thisObj option, they are linked to the lifecycle of that object. When it is destroyed, those listeners are removed.

The config parameter allows supplying options for the listener(s), for available options see BryntumListenerConfig.

A simpler signature may be used when only adding a listener for one event and no extra options (such as once or delay) are required:
```
myObject.addListener('click', myController.handleClicks, myController);
```
The args in this simple case are eventName, handler and thisObj

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 the catchEventHandlerExceptions config to true to catch exceptions thrown by this object's event handlers and allow the event to continue processing. The exception will be rethrown on a zero millisecond timeout,
attachAutoDetacher( )

private
Events

Internal function used to hook destroy() calls when using thisObj
await( eventName, options )
: Promise

private

ASYNC
Events
detachAutoDetacher( )

private
Events

Internal function used restore hooked destroy() calls when using thisObj
detachListeners( name )

ADVANCED
InstancePlugin

Removes all event listeners that were registered with the passed names.
doDestroy( )

internal
Events

Auto detaches listeners registered from start, if set as detachable
findListener( eventName, listenerToFind, defaultThisObj )

internal
Events

Finds the index of a particular listener to the named event. Returns -1 if the passed function/thisObj listener is not present.
hasListener( eventName )
: Boolean

ADVANCED
Events

Returns true if any listener is registered for the specified eventName, or if null, for any event.
ion( )

internal
Events

Internal convenience method for adding an internal listener, that cannot be removed by the user.

Alias for on({ $internal : true, ... }). Only supports single argument form.
numListeners( eventName )
: Number

internal
Events

Returns the number of attached listener for the specified eventName, or if null, for any event.

on( config, thisObj, oldThisObj )

: Function

Events

Alias for addListener. Adds an event listener. This method accepts parameters in the following format:

 myObject.on({
     thisObj    : this,          // The this reference for the handlers
     eventname2 : 'functionName' // Resolved at invocation time using the thisObj,
     otherevent : {
         fn      : 'handlerFnName',
         once    : true          // Just this handler is auto-removed on fire
     },
     yetanother  : {
         fn      : 'yetAnotherHandler',
         args    : [ currentState1, currentState2 ] // Capture info to be passed to handler
     },
     prio        : 100           // Higher prio listeners are called before lower
 });

When listeners have a thisObj option, they are linked to the lifecycle of that object. When it is destroyed, those listeners are removed.

The config parameter allows supplying options for the listener(s), for available options see BryntumListenerConfig.

A simpler signature may be used when only adding a listener for one event and no extra options (such as once or delay) are required:

myObject.on('click', myController.handleClicks, myController);

The args in this simple case are eventName, handler and thisObj

onListen( eventName )

internal
Events

This method is called when the first listener for an event is added.
onUnlisten( eventName )

internal
Events

This method is called when the last listener for an event is removed.
once( )

private
Events

Internal function used to run a callback function after an event is triggered

relayAll( through, prefix, transformCasetrue )

ADVANCED

Events

Relays all events through another object that also implements Events mixin. Adds a prefix to the event name before relaying, for example add -> storeAdd

// Relay all events from store through grid, will make it possible to listen for store events prefixed on grid:
'storeLoad', 'storeChange', 'storeRemoveAll' etc.
store.relayAll(grid, 'store');

grid.on('storeLoad', () => console.log('Store loaded');

removeAllListeners( )
Events

Removes all listeners registered to this object by the application.
removeListener( config, thisObj, oldThisObj )
: Boolean

Events

Removes an event listener. Same API signature as addListener
resumeEvents( )
: Boolean

ADVANCED
Events

Resume event triggering after a call to suspendEvents(). If any triggered events were queued they will be triggered.
suspendEvents( queuefalse )

ADVANCED
Events

Prevents events from being triggered until resumeEvents() is called. Optionally queues events that are triggered while suspended. Multiple calls stack to require matching calls to resumeEvents() before actually resuming.
trigger( eventName, param )
: Boolean/Promise

ASYNC

ADVANCED
Events

Triggers an event, calling all registered listeners with the supplied arguments. Returning false from any listener makes function return false.

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 the catchEventHandlerExceptions config to true to catch exceptions thrown by this object's event handlers and allow the event to continue processing. The exception will be rethrown on a zero millisecond timeout,
un( config, thisObj, oldThisObj )
: Boolean

Events

Shorthand for removeListener
applyAfter( plugInto, functions, aftertrue )

private
InstancePlugin

Applies after/before hooks for specified functions.
applyAssign( plugInto, fnNames )

private
InstancePlugin

Applies assigning for specified functions.
applyOverride( plugInto, fnNames )

private
InstancePlugin

Applies override for specified functions.
applyPluginConfig( plugInto )

private
InstancePlugin

Applies config as found in plugInto.pluginConfig, or published all if no config found.
assign( plugInto, fnName )

private
InstancePlugin

Assigns specified functions.
doAfterHook( plugInto, intoName, hookName, aftertrue )

private
InstancePlugin

Hooks functions. When the function is called on the target class all functions in the hook chain will be called in the order they were added.
functionChainRunner( chain, params )
: *

private
InstancePlugin

Used to run multiple plugged in functions with the same name, see after() above. Returning false from a function will abort the hook chain.
updateKeyMap( )

private
InstancePlugin

This will merge a feature's (subclass of InstancePlugin) keyMap with it's client's keyMap.
afterConfigure( )

internal
InstancePlugin

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
InstancePlugin

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
InstancePlugin

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

ADVANCED
InstancePlugin

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
InstancePlugin
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');
```
finishConfigure( )

internal
InstancePlugin

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
InstancePlugin

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
InstancePlugin

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.

L( text, templateData )

: String

ADVANCED

Localizable

Localization function on the class instance that mixes Localizable.

// Simple localization
const someText = someClass.L('L{text}');

// With template data
const someText = someClass.L('L{template}', { count : 5 }); // Number in object
const someText = someClass.L('L{template}', { name : 'John' }); // String in object
const someText = someClass.L('L{template}', 'John'); // Strings parameter

animateProperty( propertyName, newValue, duration1000, easing'linear' )
InstancePlugin

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

ADVANCED
InstancePlugin

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.
doDisable( )

ADVANCED
InstancePlugin

Called when disabling/enabling the plugin/feature, not intended to be called directly. To enable or disable a plugin/feature, see disabled.

By default removes the cls of the plugin from its client. Override in subclasses to take any other actions necessary.
downloadTestCase( )
InstancePlugin

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.

optionalL( text, templateData, preventThrowfalse )

: String

internal

Localizable

Localization function to get an optional translation. The difference compared to L() is that it won't throw an error when the translation is missing even if configured with throwOnMissingLocale.

button.text = grid.optionalL('L{text}');

// With template data
const someText = someClass.optionalL('L{template}', { count : 5 }); // Number in object
const someText = someClass.optionalL('L{template}', { name : 'John' }); // String in object
const someText = someClass.optionalL('L{template}', 'John'); // Strings parameter

resolveCallback( handler, thisObj, enforceCallabilitytrue )
: Object

ADVANCED
InstancePlugin

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.
updateLocalization( )

ADVANCED
Localizable

Method that is triggered when applying a locale to the instance (happens on the instance construction steps and when switching to another locale).

The method can be overridden to dynamically translate the instance when locale is switched. When overriding the method please make sure you call super.updateLocalization().

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

beforeDestroy
Events

Fires before an object is destroyed.
beforePdfExport

PREVENTABLE

ON-OWNER

Fires on the owning Grid before export started. Return false to cancel the export.

Note that this event is triggered on the owning widget:
catchAll
Events

Fires when any other event is fired from the object.

Note: catchAll is fired for both public and private events. Please rely on the public events only.
destroy
Events

Fires when an object is destroyed.
disable
InstancePlugin

Fired when the plugin/feature is disabled.
enable
InstancePlugin

Fired when the plugin/feature is enabled.
exportStep

Fires when export progress changes
pdfExport

ON-OWNER

Fires on the owning Grid when export has finished

Note that this event is triggered on the owning widget:

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onBeforeDestroy
Events

Called before an object is destroyed.
onBeforePdfExport

PREVENTABLE

ON-OWNER

Called on the owning Grid before export started. Return false to cancel the export.

Note that this handler is called on the owning widget:
onCatchAll
Events

Called when any other event is called from the object.

Note: catchAll is called for both public and private events. Please rely on the public events only.
onDestroy
Events

Called when an object is destroyed.
onDisable
InstancePlugin

Called when the plugin/feature is disabled.
onEnable
InstancePlugin

Called when the plugin/feature is enabled.
onExportStep

Called when export progress changes
onPdfExport

ON-OWNER

Called on the owning Grid when export has finished

Note that this handler is called on the owning widget:

id: pdfExport

Source path

Grid/feature/export/PdfExport.js

Demo

examples/export

PdfExport
Feature

Usage

Exporting large datasets

Exporters

Loading resources

See also

Configs

Handlers as function name

Parameters

Returns

Parameters

Returns

Returns

Properties

Resolving a value from an owner

Value Merging

Config Options

Default Value

Functions

Events

Event handlers

Source path

Demo

Inheritance tree3

Mixins2

Contents

PdfExport Feature

Usage

Exporting large datasets

Exporters

Loading resources

See also

Configs

Handlers as function name

Parameters

Returns

Parameters

Returns

Returns

Properties

Resolving a value from an owner

Value Merging

Config Options

Default Value

Functions

Events

Event handlers

Source path

Demo

Inheritance tree3

Mixins2

Contents

PdfExport
Feature