LockRows
Feature

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.

Please note that this feature will not work with the Split feature.

This feature will not work properly when Store uses lazyLoad

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.

To access the original store, use the originalStore property of the grid instance.

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

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

fieldName : String'fixed'

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.
filterFn : Function/String
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.
Parameters
- record : Model
  
  The record to decide upon.
Returns

Boolean
:

Return true to lock the record at the top.

bottomGridConfig : GridConfig

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

const App = props => {
    const lockRowsFeature : {
        bottomGridConfig : {
            hideHeaders : false,
            features : {
                filterBar : true
            }
        }
    }

    return <bryntum-grid lockRowsFeature={lockRowsFeature} />
}

<bryntum-grid :lock-rows-feature="lockRowsFeature" />

export default {
    setup() {
        return {
            lockRowsFeature : {
                 bottomGridConfig : {
                     hideHeaders : false,
                     features : {
                         filterBar : true
                     }
                 }
             }
        };
    }
}

<bryntum-grid [lockRowsFeature]="lockRowsFeature"></bryntum-grid>

export class AppComponent {
     lockRowsFeature : {
         bottomGridConfig : {
             hideHeaders : false,
             features : {
                 filterBar : true
             }
         }
     }
 }

Properties

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

isLockRows : Booleantrue

READONLY

static

ADVANCED

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

originalStore : Store

ON-OWNER
Locking rows results in 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
```
isLockRows : Booleantrue

READONLY

ADVANCED

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

Functions

Functions are methods available for calling on the class

lockRows( options )
: Promise

ASYNC

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.

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

lockRows

ON-OWNER

Fires when row locking is enabled.

Note that this event is triggered on the owning widget:
unlockRows

ON-OWNER

Fires when row locking is disabled.

Note that this event is triggered on the owning widget:

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onLockRows

ON-OWNER

Called when row locking is enabled.

Note that this handler is called on the owning widget:
onUnlockRows

ON-OWNER

Called when row locking is disabled.

Note that this handler is called on the owning widget:

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-locked-rows-separator-color	Color of the separator between the locked rows and the body. Matches the splitter color by default.
--b-locked-rows-separator-width	Width of the separator between the locked rows and the body

id: lockRows

Source path

Grid/feature/LockRows.js

Demo

examples/lock-rows

LockRows
Feature

Caveats

See also

Configs

Parameters

Returns

Properties

Functions

Events

Event handlers

CSS variables

Source path

Demo

Inheritance tree4

Mixins2

Contents

LockRows Feature

Caveats

See also

Configs

Parameters

Returns

Properties

Functions

Events

Event handlers

CSS variables

Source path

Demo

Inheritance tree4

Mixins2

Contents

LockRows
Feature