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.

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.

Useful configs

Config	Description
widgets	Array of widget configs to render in each cell

Configs

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

widgets : WidgetConfig[]

An array of Widget config objects

Has a corresponding runtime widgets property.
afterRenderCell : Function
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;
             }
        }
    ]
});
```
Parameters
- renderData : Object
  
  Object containing renderer parameters
- cellElement : HTMLElement
  
  Cell element, for adding CSS classes, styling etc. Can be null in case of export
- value : *
  
  Value to be displayed in the cell
- record : Model
  
  Record for the row
- column : Column
  
  This column
- widgets : Widget[]
  
  An array of the widgets rendered into this cell
- grid : Grid
  
  This grid
- row : Row
  
  Row object. Can be null in case of export. Use the row's API to manipulate CSS class names.
- 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
- height : Number
  
  Set this to request a certain row height
- configuredHeight : Number
  
  Row height that will be used if none is requested
- isExport : Boolean
  
  true if the record is being exported to Excel or a textual format, enabling special handling during export.
- isTreeGroup : Boolean
  
  True if record is a generated tree group parent record
- 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
Has a corresponding runtime afterRenderCell property.
renderer : Function

DEPRECATED
Deprecated:
6.0 In favor of using afterRenderCell

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;
             }
        }
    ]
});
```
Parameters
- renderData : Object
  
  Object containing renderer parameters
- cellElement : HTMLElement
  
  Cell element, for adding CSS classes, styling etc. Can be null in case of export
- value : *
  
  Value to be displayed in the cell
- record : Model
  
  Record for the row
- column : Column
  
  This column
- widgets : Widget[]
  
  An array of the widgets rendered into this cell
- grid : Grid
  
  This grid
- row : Row
  
  Row object. Can be null in case of export. Use the row's API to manipulate CSS class names.
- 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
- height : Number
  
  Set this to request a certain row height
- configuredHeight : Number
  
  Row height that will be used if none is requested
- isExport : Boolean
  
  true if the record is being exported to Excel or a textual format, enabling special handling during export.
- isTreeGroup : Boolean
  
  True if record is a generated tree group parent record
- 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
Has a corresponding runtime renderer property.

Properties

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

isWidgetColumn : Booleantrue

READONLY

static

ADVANCED

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

widgets : WidgetConfig[]

An array of Widget config objects

Has a corresponding widgets config.
isWidgetColumn : Booleantrue

READONLY

ADVANCED

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

afterRenderCell : Function

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

Has a corresponding afterRenderCell config.

renderer : Function

DEPRECATED

Deprecated:

6.0 In favor of using afterRenderCell

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

Has a corresponding renderer config.

Functions

Functions are methods available for calling on the class

defaultRenderer( renderData )

private

Renderer that displays a widget in the cell.
onAfterWidgetCreate( widget, renderData )

private

Called after widget is created on rendering
onAfterWidgetSetValue( widget, renderData )

Called after the widget gets its value on rendering.
onBeforeWidgetCreate( widgetCfg, renderData )

private

Called before widget is created on rendering
onBeforeWidgetSetValue( widget, renderData )

PREVENTABLE

Called before the widget gets its value on rendering. Pass false to skip value setting while rendering

WidgetColumn

Data binding to fields

Useful configs

See also

Configs

Parameters

Returns

Parameters

Returns

Properties

Functions

Source path

Inheritance tree4

Mixins5

Contents