LockRows
This feature allows records which satisfy a certain condition to be locked at the top of the grid.
By default, the condition is that a certain named field have a truthy value. The field which decides this status
defaults to 'fixed', but that is configurable using the fieldName property.
When used with fieldName, the CellMenu context menu appears with an extra option to toggle the value of that field in the contextual record.
For more granular control, use the filterFn to decide which records should be locked.
//<code-header>
fiddle.title = 'Lock rows';
//</code-header>
const data = DataGenerator.generateData(50);
data[0].fixed = true;
const grid = new Grid({
appendTo : targetElement,
height : '30em',
features : {
group : false,
lockRows : true
},
data,
columns : [
{ field : 'firstName', text : 'First name', width : 150 },
{ field : 'fixed', text : 'Fixed', type : 'check' },
{ field : 'surName', text : 'Surname', width : 150 },
{ field : 'city', text : 'City', width : 150 },
{ type : 'date', field : 'start', text : 'Start', width : 150 },
{ type : 'date', field : 'finish', text : 'Finish', width : 150 },
{ type : 'number', field : 'score', text : 'Score', width : 150 },
{ type : 'number', field : 'age', text : 'Age', width : 150 },
{ type : 'rating', field : 'rank', text : 'Rank', width : 150 }
]
});-
Caveats
This features utilizes the Split feature behinds the scenes to create a split view of the grid. Each part of the view is a separate grid instance, which means that certain operations are limited to one part of the grid at the time - for example drag selection and shift + click selection.
The top view (locked rows) is the original grid instance, and the bottom view is a clone of the original grid instance. During locking, both views use stores chained of the original store to filter out the records that should be locked or not.
When using RowCopyPaste, cutting and pasting among locked rows is not allowed. The results of those actions would be confusing, since for example cutting a locked row and pasting it among the normal rows would return it to the locked rows again.
Additionally, these features are currently not supported while using LockRows:
- Summary feature
- RowReorder feature: Rows cannot be dragged between different sections
- PdfExport feature
- Export to Excel
- Tree
This feature is disabled by default.
Configs
13
Configs
13Misc
An object containing grid configuration for the bottom grid instance.
Configuring the bottom grid instance:
new Grid({
features : {
lockRows : {
bottomGridConfig : {
hideHeaders : false,
features : {
filterBar : true
}
}
}
}
});Other
The field name whose truthy/falsy state decides whether a record is locked at the top of the grid.
Is overridden if a filterFn is provided.
A function, or the name of a function in the Grid's ownership hierarchy, that decides whether a record is locked at the top of the grid.
If a function is provided, it will be called with this feature as its this reference.
Overrides the fieldName property.
| Parameter | Type | Description |
|---|---|---|
record | Model | The record to decide upon. |
Return true to lock the record at the top.
Properties
18
Properties
18Class hierarchy
Other
Locking rows leads to two chained stores that holds a subset of the records, one for the locked records and one for the rest. This property holds the original store, if you need to access it.
// With 100 rows, 5 of which are locked
console.log(grid.store.count); // 5
console.log(grid.originalStore.count); // 100
Functions
31
Functions
31Other
Enables row locking by splitting the grid into two synchronized views and filtering records
into a top locked section and a bottom unlocked section.
Provide either fieldName or filterFn (or both) via the options
object. If both are provided, filterFn takes precedence.
| Parameter | Type | Description |
|---|---|---|
options | Object | |
options.fieldName | String | Field whose truthy values lock rows. |
options.filterFn | function | String | Function (or function name) that returns |
Resolves with subViews after locking.
Configuration
Events
Misc
Events
9
Events
9Fires when row locking is enabled.
// Adding a listener using the "on" method
lockRows.on('lockRows', ({ clone }) => {
});| Parameter | Type | Description |
|---|---|---|
clone | GridBase | The created clone |
Fires when row locking is disabled.
// Adding a listener using the "on" method
lockRows.on('unlockRows', ({ clone }) => {
});| Parameter | Type | Description |
|---|---|---|
clone | GridBase | The locked clone that will be destroyed |
Event handlers
9
Event handlers
9Called when row locking is enabled.
new LockRows({
onLockRows({ clone }) {
}
});| Parameter | Type | Description |
|---|---|---|
clone | GridBase | The created clone |
Called when row locking is disabled.
new LockRows({
onUnlockRows({ clone }) {
}
});| Parameter | Type | Description |
|---|---|---|
clone | GridBase | The locked clone that will be destroyed |
Typedefs
1
Typedefs
1CSS variables
2
CSS variables
2| Name | Description |
|---|---|
--b-locked-rows-separator-width | Width of the separator between the locked rows and the body |
--b-locked-rows-separator-color | Color of the separator between the locked rows and the body. Matches the splitter color by default. |