SchedulerExportDialog

Extends the Grid's ExportDialog and adds a few extra fields specific to the scheduler.

Default widgets

The default widgets of this dialog are:

>

first level of submenu

The default buttons are:

Configuring default widgets

Widgets can be customized with exportDialog config:

const scheduler = new Scheduler({
    features : {
        pdfExport : {
            exportDialog : {
                items : {
                    // hide the field
                    orientationField  : { hidden : true },

                    // reorder fields
                    exporterTypeField : { weight : 150 },

                    // change default format in exporter
                    fileFormatField   : { value : 'png' },

                    // Configure nested fields
                    rangesContainer : {
                        items : {
                            rangeStartField : { value : new Date() },
                            rangeEndField : { value : new Date() }
                        }
                    }
                }
            }
        }
    }
});

scheduler.features.pdfExport.showExportDialog();

Using DateTime fields for range start/end

This config system is also capable (but not limited to) of changing layout of the container and replacing widget type:

const scheduler = new Scheduler({
    features : {
        pdfExport : {
            exportDialog : {
                items : {
                    rangesContainer : {
                        // DateTime fields are longer, so we better lay them out
                        // vertically
                        layoutStyle : {
                            flexDirection : 'column'
                        },
                        items : {
                            rangeStartField : {
                                // Use DateTime widget for ranges
                                type       : 'datetime',

                                // Sync label width with other fields
                                labelWidth : '12em'
                            },
                            rangeEndField : {
                                type       : 'datetime',
                                labelWidth : '12em'
                            },
                            // Add a filler widget that would add a margin at the bottom
                            filler : {
                                height : '0.6em',
                                weight : 900
                            }
                        }
                    }
                }
            }
        }
    }
});

Configuring default columns

By default all visible columns are selected in the export dialog. This is managed by autoSelectVisibleColumns config. To change default selected columns you should disable this config and set field value. Value should be an array of valid column ids (or column instances). This way you can preselect hidden columns:

const scheduler = new Scheduler({
    columns : [
        { id : 'name', text : 'Name', field : 'name' },
        { id : 'age', text : 'Age', field : 'age' },
        { id : 'city', text : 'City', field : 'city', hidden : true }
    ],
    features : {
        pdfExport : {
            exportDialog : {
                autoSelectVisibleColumns : false,
                items : {
                    columnsField : { value : ['name', 'city'] }
                }
            }
        }
    }
})

// This will show export dialog with Name and City columns selected
// even though City column is hidden in the UI
scheduler.features.pdfExport.showExportDialog();

Adding fields

You can add your own fields to the export dialog. To make such field value acessible to the feature it should follow naming pattern - it should have ref config ending with Field, see other fields for reference - orientationField, columnsField, etc. Fields not matching this pattern are ignored. When values are collected from the dialog, Field part of the widget reference is removed, so orientationField becomes orientation, fooField becomes foo, etc.

const grid = new Grid({
    features : {
        pdfExport : {
            exportDialog : {
                items : {
                    // This field gets into export config
                    fooField : {
                        type : 'text',
                        label : 'Foo',
                        value : 'FOO'
                    },

                    // This one does not, because name doesn't end with `Field`
                    bar : {
                        type : 'text',
                        label : 'Bar',
                        value : 'BAR'
                    },

                    // Add a container widget to wrap some fields together
                    myContainer : {
                        type : 'container',
                        items : {
                            // This one gets into config too despite the nesting level
                            bazField : {
                                type : 'text',
                                label : 'Baz',
                                value : 'BAZ'
                            }
                        }
                    }
                }
            }
        }
    }
});

// Assuming export dialog is opened and export triggered with default values
// you can receive custom field values here
grid.on({
    beforePdfExport({ config }) {
        console.log(config.foo) // 'FOO'
        console.log(config.bar) // undefined
        console.log(config.baz) // 'BAZ'
    }
});

Configuring widgets at runtime

If you don't know column ids before grid instantiation or you want a flexible config, you can change widget values before dialog pops up:

const scheduler = new Scheduler({
    columns : [
        { id : 'name', text : 'Name', field : 'name' },
        { id : 'age', text : 'Age', field : 'age' },
        { id : 'city', text : 'City', field : 'city', hidden : true }
    ],
    features : {
        pdfExport : true
    }
});

// Such listener would ignore autoSelectVisibleColumns config. Similar to the snippet
// above this will show Name and City columns
scheduler.features.pdfExport.exportDialog.on({
    beforeShow() {
        this.widgetMap.columnsField.value = ['age', 'city']
    }
});