WidgetColumn

A column that displays one or more widgets in the grid cells.

When rendered into a cell, all widgets will have a special cellInfo context property injected into them so that event handlers can ascertain the context in which they are operating.

Widget column

//<code-header>
fiddle.title = 'Widget column';
//</code-header>
// grid with WidgetColumn
const grid = new Grid({
    appendTo : targetElement,

    // makes grid as high as it needs to be to fit rows
    autoHeight : true,
    store      : {
        fields : ['price', 'inflightMeal', 'priorityBoarding'],
        data   : DataGenerator.generateData(5).map(data => {
            data.price = Math.round(Math.random() * 1000) + 100;
            return data;
        })
    },
    rowHeight : 100,
    columns   : [
        { field : 'city', text : 'Destination', flex : 1 },
        {
            type    : 'widget',
            text    : 'Extras',
            align   : 'center',
            width   : 300,
            widgets : [
                {
                    type  : 'checkbox',
                    name  : 'inflightMeal',
                    label : 'In-flight Meal'
                },
                {
                    type  : 'checkbox',
                    name  : 'priorityBoarding',
                    label : 'Priority boarding'
                }
            ]
        },
        {
            text       : 'Total price',
            align      : 'right',
            htmlEncode : false,
            renderer({ record }) {
                let total = record.price;

                if (record.inflightMeal) {
                    total += 30;
                }
                if (record.priorityBoarding) {
                    total += 50;
                }

                return `<strong>$ ${total}</strong>`;
            }
        },
        {
            type    : 'widget',
            text    : 'Button column',
            width   : 140,
            widgets : [{
                type      : 'button',
                rendition : 'filled',
                icon      : 'b-icon fa-plane',
                text      : 'Book now',
                flex      : 1,
                // 'up.' will find the implementation in the Grid
                onClick   : 'up.bookFlight'
            }]
        }
    ],

    bookFlight({ source : button }) {
        // The cell's widget has a cellInfo context block
        const { record } = button.cellInfo;

        Toast.show(
            `Booking a flight to ${record.city}.` +
            (record.inflightMeal ? ' Meal: \u2713' : '') +
            (record.priorityBoarding ? ' Priority: \u2713' : '')
        );
    }
});

new Grid({
    columns : [{
        type    : 'widget',
        widgets : [{
            type     : 'button',
            menuIcon : false,
            icon     : 'fa fa-ellipsis-v',
            menu     : {
                type  : 'menu',
                items : {
                    viewResponses : {
                        icon : 'fa fa-fw fa-file-signature',
                        text : 'View Responses'
                    },
                    clearConsent : {
                        icon : 'fa fa-fw fa-times-circle',
                        text : 'Clear Consent',
                    },
                    surveyList : {
                        icon : 'fa fa-fw fa-file-signature',
                        text : 'Survey List (Read-Only)'
                    }
                },

                // Method is called for all descendant levels.
                // 'up.' will find it defined on the Grid.
                onItem : 'up.onWidgetColumnMenuClick'
            }
        }
    }],

    onWidgetColumnMenuClick({ source }) {
        // Find the source widget's Button ancestor. It's the cell widget.
        // A WidgetColumn's cell widget gets a cellInfo property injected
        const { cellInfo } = source.up('button');

        console.log(`Clicked ${source.ref} on ${cellInfo.record.name}`);
    }
});

Data binding to fields

If you use Fields inside this column, the field widget can optionally bind its value to a field in the data model using the name (shown in the snippet below). This will provide two-way data binding and update the underlying row record as you make changes in the field.

new Grid({
    columns : [{
        type    : 'widget',
        widgets : [{
            type : 'numberfield',
            name : 'percentDone'
        }]
    }]
});

If you use a Button and want it to display the value from the cell as its text, set its defaultBindProperty to 'text':

new Grid({
    columns : [{
        type    : 'widget',
        widgets : [{
            type                : 'button',
            name                : 'age',
            defaultBindProperty : 'text'
        }]
    }]
});

There is no editor provided. It is the configured widget's responsibility to provide editing if needed.

Configs

Common

widgets: ContainerItemConfig[]Also a property

An array of Widget config objects

autoHeightColumn

autoWidthColumn

fieldColumn

fitModeColumn

flexColumn

listenersEvents

maxWidthColumn

textColumn

widthColumn

Rendering

afterRenderCell: functionAlso a property

A renderer function, which gives you access to render data like the current record, cellElement and the widgets of the column. See renderer for more information.

new Grid({
    columns : [
        {
             type: 'check',
             field: 'allow',
             // In the column afterRenderCell callback, we get access to the record and column widgets
             afterRenderCell({ record, widgets }) {
                 // Hide checkboxes in certain rows
                 widgets[0].hidden = record.readOnly;
             }
        }
    ]
});

Parameter	Type	Description
`renderData`	Object	Object containing renderer parameters
`renderData.cellElement`	HTMLElement	Cell element, for adding CSS classes, styling etc. Can be `null` in case of export
`renderData.value`	*	Value to be displayed in the cell
`renderData.record`	Model	Record for the row
`renderData.column`	Column	This column
`renderData.widgets`	Widget[]	An array of the widgets rendered into this cell
`renderData.grid`	Grid	This grid
`renderData.row`	Row	Row object. Can be null in case of export. Use the row's API to manipulate CSS class names.
`renderData.size`	Object	Set `size.height` to specify the desired row height for the current row. Largest specified height is used, falling back to configured rowHeight in case none is specified. Can be null in case of export
`renderData.size.height`	Number	Set this to request a certain row height
`renderData.size.configuredHeight`	Number	Row height that will be used if none is requested
`renderData.isExport`	Boolean	`true` if the record is being exported to Excel or a textual format, enabling special handling during export.
`renderData.isTreeGroup`	Boolean	True if record is a generated tree group parent record
`renderData.isMeasuring`	Boolean	True if the column is being measured for a `resizeToFitContent` call. In which case an advanced renderer might need to take different actions.

Returns: void

renderer: functiondeprecatedAlso a property

A renderer function, which gives you access to render data like the current record, cellElement and the widgets of the column. See renderer for more information.

new Grid({
    columns : [
        {
             type: 'check',
             field: 'allow',
             // In the column afterRenderCell callback, we get access to the record and column widgets
             afterRenderCell({ record, widgets }) {
                 // Hide checkboxes in certain rows
                 widgets[0].hidden = record.readOnly;
             }
        }
    ]
});

Parameter	Type	Description
`renderData`	Object	Object containing renderer parameters
`renderData.cellElement`	HTMLElement	Cell element, for adding CSS classes, styling etc. Can be `null` in case of export
`renderData.value`	*	Value to be displayed in the cell
`renderData.record`	Model	Record for the row
`renderData.column`	Column	This column
`renderData.widgets`	Widget[]	An array of the widgets rendered into this cell
`renderData.grid`	Grid	This grid
`renderData.row`	Row	Row object. Can be null in case of export. Use the row's API to manipulate CSS class names.
`renderData.size`	Object	Set `size.height` to specify the desired row height for the current row. Largest specified height is used, falling back to configured rowHeight in case none is specified. Can be null in case of export
`renderData.size.height`	Number	Set this to request a certain row height
`renderData.size.configuredHeight`	Number	Row height that will be used if none is requested
`renderData.isExport`	Boolean	`true` if the record is being exported to Excel or a textual format, enabling special handling during export.
`renderData.isTreeGroup`	Boolean	True if record is a generated tree group parent record
`renderData.isMeasuring`	Boolean	True if the column is being measured for a `resizeToFitContent` call. In which case an advanced renderer might need to take different actions.

Returns: void

cellClsColumn

clsColumn

groupRendererColumn

headerRendererColumn

iconColumn

tooltipColumn

tooltipRendererColumn

Accessibility

ariaLabelColumn

cellAriaLabelColumn

Export

exportableColumn

exportedTypeColumn

Integration

vueColumn

Interaction

cellEditorColumn

collapsedColumn

collapseModeColumn

collapsibleColumn

draggableColumn

editorColumn

filterableColumn

finalizeCellEditColumn

groupableColumn

hideableColumn

invalidActionColumn

managedCellEditingColumn

resizableColumn

revertOnEscapeColumn

sealedColumn

searchableColumn

sortableColumn

toggleAllHiddenColumn

Layout

alignColumn

hiddenColumn

lockedColumn

minWidthColumn

regionColumn

Merge cells

mergeableColumn

mergeCellsColumn

mergedRendererColumn

Misc

alwaysClearCellColumn

autoSyncHtmlColumn

bubbleEventsEvents

callOnFunctionsEvents

editTargetSelectorColumn

filterTypeColumn

headerWidgetsColumn

headerWritingModeColumn

htmlEncodeColumn

htmlEncodeHeaderTextColumn

instantUpdateColumn

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

responsiveLevelsColumn

tagsColumn

touchConfigColumn

treeColumn

Other

catchEventHandlerExceptionsEvents

formulaColumn

pinnedColumn

pinnedWidthColumn

readOnlyColumn

Summary

sumColumn

summariesColumn

summaryRendererColumn

Properties

151

Common

widgets: ContainerItemConfig[]Also a config

An array of Widget config objects

autoHeightColumn

autoWidthColumn

fieldColumn

fitModeColumn

flexColumn

maxWidthColumn

textColumn

widthColumn

Class hierarchy

isWidgetColumn: Boolean= truereadonly

Identifies an object as an instance of WidgetColumn class, or subclass thereof.

isWidgetColumn: Boolean= truereadonlystatic

Identifies an object as an instance of WidgetColumn class, or subclass thereof.

isColumnColumn

isEventsEvents

isLocalizableLocalizable

isModelModel

isModelLinkModelLink

isModelStmModelStm

isTreeNodeTreeNode

Rendering

afterRenderCell: functionAlso a config

A renderer function, which gives you access to render data like the current record, cellElement and the widgets of the column. See renderer for more information.

new Grid({
    columns : [
        {
             type: 'check',
             field: 'allow',
             // In the column afterRenderCell callback, we get access to the record and column widgets
             afterRenderCell({ record, widgets }) {
                 // Hide checkboxes in certain rows
                 widgets[0].hidden = record.readOnly;
             }
        }
    ]
});

Parameter	Type	Description
`renderData`	Object	Object containing renderer parameters
`renderData.cellElement`	HTMLElement	Cell element, for adding CSS classes, styling etc. Can be `null` in case of export
`renderData.value`	*	Value to be displayed in the cell
`renderData.record`	Model	Record for the row
`renderData.column`	Column	This column
`renderData.widgets`	Widget[]	An array of the widgets rendered into this cell
`renderData.grid`	Grid	This grid
`renderData.row`	Row	Row object. Can be null in case of export. Use the row's API to manipulate CSS class names.
`renderData.size`	Object	Set `size.height` to specify the desired row height for the current row. Largest specified height is used, falling back to configured rowHeight in case none is specified. Can be null in case of export
`renderData.size.height`	Number	Set this to request a certain row height
`renderData.size.configuredHeight`	Number	Row height that will be used if none is requested
`renderData.isExport`	Boolean	`true` if the record is being exported to Excel or a textual format, enabling special handling during export.
`renderData.isTreeGroup`	Boolean	True if record is a generated tree group parent record
`renderData.isMeasuring`	Boolean	True if the column is being measured for a `resizeToFitContent` call. In which case an advanced renderer might need to take different actions.

Returns: void

renderer: functiondeprecatedAlso a config

A renderer function, which gives you access to render data like the current record, cellElement and the widgets of the column. See renderer for more information.

new Grid({
    columns : [
        {
             type: 'check',
             field: 'allow',
             // In the column afterRenderCell callback, we get access to the record and column widgets
             afterRenderCell({ record, widgets }) {
                 // Hide checkboxes in certain rows
                 widgets[0].hidden = record.readOnly;
             }
        }
    ]
});

Parameter	Type	Description
`renderData`	Object	Object containing renderer parameters
`renderData.cellElement`	HTMLElement	Cell element, for adding CSS classes, styling etc. Can be `null` in case of export
`renderData.value`	*	Value to be displayed in the cell
`renderData.record`	Model	Record for the row
`renderData.column`	Column	This column
`renderData.widgets`	Widget[]	An array of the widgets rendered into this cell
`renderData.grid`	Grid	This grid
`renderData.row`	Row	Row object. Can be null in case of export. Use the row's API to manipulate CSS class names.
`renderData.size`	Object	Set `size.height` to specify the desired row height for the current row. Largest specified height is used, falling back to configured rowHeight in case none is specified. Can be null in case of export
`renderData.size.height`	Number	Set this to request a certain row height
`renderData.size.configuredHeight`	Number	Row height that will be used if none is requested
`renderData.isExport`	Boolean	`true` if the record is being exported to Excel or a textual format, enabling special handling during export.
`renderData.isTreeGroup`	Boolean	True if record is a generated tree group parent record
`renderData.isMeasuring`	Boolean	True if the column is being measured for a `resizeToFitContent` call. In which case an advanced renderer might need to take different actions.