ColumnStore
A store specialized in handling columns. Used by the Grid to hold its columns and used as
a chained store by each SubGrid to hold theirs. Should not be instantiated directly, instead access it through
grid.columns or subGrid.columns.
Observing for changes
If you want to listen for changes to the columns in the ColumnStore. For example, if you are interested in when
a column has been moved, simply use the on method to listen for the move event:
grid.columns.on({
move({ records }) {
// The `records` object contains the moved column records
}
});
Modifying columns in the ColumnStore
// resize first column
grid.columns.first.width = 200;
// remove city column
grid.columns.get('city').remove();
// add new column
grid.columns.add({text : 'New column'});
// add new column to specific region (SubGrid)
grid.columns.add({text : 'New column', region : 'locked'});
// add new column to 'locked' region (SubGrid)
grid.columns.add({text : 'New column', locked : true});
Storing column state
To store the size and position of columns after a user makes a change, please see GridState.
Configs
57
Configs
57Common
Other
Automatically adds a field definition to the store used by the Grid when adding a new Column displaying a non-existing field.
To enable this behaviour:
const grid = new Grid({
columns : {
autoAddField : true,
data : [
// Column definitions here
]
}
}
ColumnStore uses syncDataOnLoad by default (with threshold : 1), to ensure good performance when
binding to columns in frameworks.
See syncDataOnLoad for more information.
Advanced
Chained store
Filtering
Paging
Records
Remote
Properties
64
Properties
64Class hierarchy
Other
Bottom columns are the ones displayed in the bottom row of a grouped header, or all columns if not using a grouped header. They are the columns that actually display any data.
Returns the top level columns. If using grouped columns, this is the top level columns. If no grouped columns are being used, this is the leaf columns.
Returns the visible leaf headers which drive the rows' cell content.
Advanced
Filtering
Misc
Records
Functions
99
Functions
99CRUD
Removes all columns.
| Parameter | Type | Description |
|---|---|---|
silent | Boolean | Specify |
true unless the action was prevented, in which case it returns false
Other
Get column by field. To be sure that you are getting exactly the intended column, use Store#getById() with the columns id instead.
| Parameter | Type | Description |
|---|---|---|
field | String | Field name |
indexOf extended to also accept a columns field, for backward compatibility.
grid.columns.indexOf('name');
| Parameter | Type | Description |
|---|---|---|
recordOrId | Model | String |
Call from custom column to register it with ColumnStore. Required to be able to specify type in column config.
| Parameter | Type | Description |
|---|---|---|
columnClass | function | The Column subclass to register. |
simpleRenderer | Boolean | Pass |
Configuration
Events
Records
Search
Sort, group & filter
Events
36
Events
36Fires when a column has been hidden.
// Adding a listener using the "on" method
columnStore.on('columnHide', ({ source, column }) => {
});| Parameter | Type | Description |
|---|---|---|
source | ColumnStore | The store which triggered the event. |
column | Column | The column which status has been changed. |
Fires when a column is shown.
// Adding a listener using the "on" method
columnStore.on('columnShow', ({ source, column }) => {
});| Parameter | Type | Description |
|---|---|---|
source | ColumnStore | The store which triggered the event. |
column | Column | The column which status has been changed. |
Event handlers
36
Event handlers
36Called when a column has been hidden.
new ColumnStore({
onColumnHide({ source, column }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | ColumnStore | The store which triggered the event. |
column | Column | The column which status has been changed. |
Called when a column is shown.
new ColumnStore({
onColumnShow({ source, column }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | ColumnStore | The store which triggered the event. |
column | Column | The column which status has been changed. |