Row Selection
index
Description
For row selection, you can simply play with couple of grid options (see below) and subscribe to onSelectedRowsChanged
(a SlickGrid Event that is, it's not an Observable). However please note that onSelectedRowsChanged
is a function available on the Grid
object and you will need bind to (gridChanged)
to get the object when grid is ready. There are 2 types of row selection(s) which you can do.
Note: enableCheckboxSelector
and enableExcelCopyBuffer
do not work well together, this is because they both share the same Row.SelectionModel
and one cancels the other. It is recommended to not use enableExcelCopyBuffer
in that case.
Demo
Single Row Selection
For a single row selection, you need to have enableCellNavigation: true
, enableRowSelection: true
and multiSelect: false
and as described earlier, subscribe to onSelectedRowsChanged
(for that you need to bind to (gridChanged)
). There are 2 ways to choose for the implementation of a row selection, option 1. is the most common option and is the recommend way of doing it.
1. with Delegate (preferred way)
You can also do it through a delegate
since all SlickGrid events are exposed as delegate
. For more info see Wiki - OnEvents - 3. delegate
ViewModel
2. with SlickGrid object & onEvent
It's preferable to use the with delegate
, but if you really wish, you can also use directly the SlickGrid event that you can subscribe to. However, don't forget to unsubscribe to a SlickGrid event.
ViewModel
Multiple Row Selections
As for multiple row selections, you need to disable enableCellNavigation
and enable enableCheckboxSelector
and enableRowSelection
. Then as describe earlier, you will subscribe to onSelectedRowsChanged
(for that you need to bind to (gridChanged)
). There are 2 ways to choose for the implementation of a row selection, option 1. is the most common option and is the recommend way of doing it.
1. with Delegate (preferred way)
You can also do it through a delegate
since all SlickGrid events are exposed as delegate
. For more info see Wiki - OnEvents - 3. delegate
ViewModel
2. with SlickGrid object & onEvent
It's preferable to use the with delegate
, but if you really wish, you can also use directly the SlickGrid event that you can subscribe to. However, don't forget to unsubscribe to a SlickGrid event.
ViewModel
Changing Dynamically from Single to Multiple Selections (and vice-versa)
If you want to change from Multiple Selections to Single Selection (and vice-versa), you could toggle the grid options enableCellNavigation
flag (False
when you want Single Selection), however this is not possible when using Inline Editors since this flag is required. Note that there is currently no other ways of toggling dynamically without re-creating the grid.
Mixing Single & Multiple Row Selections
SlickGrid is so powerful and customizable, you could if you wish mix the multiple row selections (cell column 1) and single row selection (any other cell click). For that though, you will need to use 2 SlickGrid Events (onClick
and onSelectedRowsChanged
). For example with a delegate
we can do it this way:
ViewModel
Disable Custom Rows Selections via selectableOverride
selectableOverride
You can use selectableOverride
to provide custom logic to disable certain rows selections, for example the code below will remove the row selection on every second row.
Component
Disable External Button when having Empty Selection
When having an external button that you want to work only when there's row selection, there are 2 ways of doing this.
use the
onSelectedRowsChanged
event (via your View in HTML or via ViewModel)
use the
onGridStateChanged
event (see Grid State & Presets Wiki)
Change Row Selections
You can change which row(s) are selected by using the built-in SlickGrid method setSelectedRows(rowIndexes)
(passing an empty array will clear all selection), however please note that it requires an array of row indexes as you see them in the UI and it won't work that great with Pagination (if that is what you are looking for then take a look at this Stack Overflow Q&A)
Troubleshooting
Adding a Column dynamically is removing the Row Selection, why is that?
The reason is because the Row Selection (checkbox) plugin is a special column and Slickgrid-Universal is adding an extra column dynamically for the Row Selection checkbox and that is not reflected in your local copy of columnDefinitions
. To address this issue, you need to get the Slickgrid-Universal internal copy of all columns (including the extra columns), you can get it via getAllColumnDefinitions()
from the Grid Service and then you can use to that array and that will work.
Last updated