Column Lock Modes
The grid has 3 column lock modes:
Note Please note, column lock modes only make sense if the horizontalScrollMode of the grid is set to "on"
If set to left, the column will be locked to the left and not scroll horizontally. If set to right, the column will be locked to the right and not scroll horizontally. If set to none, the column will scroll horizontally with the rest of the grid.
Please ensure The grid is wide enough to accommodate the left and right locked columns, otherwise the grid will not render correctly.
- For nested grids, both left and right locked sections are wide enough to accommodate the widest left and right locked columns at each level of the grid.
- This is especially true for mobile devices, where a few columns can easily take up the entire width of the screen.
Let's take a look at an example of a grid with locked columns:
You can also use the API to set the lock mode of a column. Here is an example:
Although the two examples above do the same thing, there is a difference in the way the API is used. In the first example, the lock mode is set on the column definition. In the second example, the lock mode is set on the column after the grid has been rendered. In the second example, you are emulating the user clicking on the column header to change the lock mode. The grid internally stores all the actions that the user performs. When the grid is rendered, it will apply the actions that the user performed. This is the same mechanism that is used to apply the sort order, filter, and other actions that the user performs, and replay those actions when the user restores their saved settings.
Column lock modes are also supported in nested grids. Here is an example in action:
For each of the example above, you should see a View Source Link that will take you to the code for that example.