You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/USING_BULK_SELECTION.md
+21-22Lines changed: 21 additions & 22 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,27 +1,29 @@
1
1
# Bulk & Selection Plugins
2
2
3
-
The Bulk and Selection plugins compliment each other. After selecting multiple rows, the user will most likely want to perform a bulk action on the selected rows such as altering them to have the same value.
3
+
The Bulk and Selection plugins compliment each other. After selecting multiple rows, the user will most likely want to perform a bulk action on the selected rows such as altering them to have the same value.
4
4
5
-
The selection plugin turns the first column into checkboxes so that rows can be selected and unselected. The selected rows are captured in the selection state.
5
+
When using the selection plugin, the selected rows are captured in the selection state.
6
6
7
-
#### grid vs dataSource vs selection reducers
7
+
#### The subdivision of state
8
+
9
+
Each slice of state managed by grid is stored in separate objects inside the grid state atom:
8
10
9
11
```
10
12
// grid
11
-
const columnData = this.props.grid.get('sticky');
12
-
console.log(JSON.stringify(columnData) ); <-- only column data
In order to get the selected ids, you need to use the selection state.
26
+
In general, as with all redux components/app, if you care about a piece of state, you must declare that by using `connect`. In this example, we will connect our component to listen to the grid and selection state:
25
27
26
28
```
27
29
const mapStateToProps = (state) => ({
@@ -35,17 +37,14 @@ Selection state is an [Immutablejs Ordered Map](https://facebook.github.io/immut
35
37
```
36
38
const getSelectedIds = ()=> {
37
39
38
-
const bulkMap = selection.get("bulk"); // selection is React-Redux-Grid reducer available from the store
If you set activeCls to false, the rows will change color as you hover over and click on them but the checkbox will not toggle state until you actually click on the checkox.
63
+
If you set activeCls to false, the rows will change color as you hover over and click on them but the checkbox will not toggle state until you actually click on the checkox.
65
64
66
65
67
66
```
@@ -72,18 +71,18 @@ SELECTION_MODEL: {
72
71
activeCls: 'false',
73
72
selectionEvent: 'false'
74
73
},
75
-
```
74
+
```
76
75
77
-
#### Bulk & Selection Plugins
76
+
#### Bulk & Selection Plugins
78
77
79
78
```
80
79
export const plugins = {
81
80
SELECTION_MODEL: {
82
81
mode: 'checkbox-multi',
83
82
enabled: true,
84
83
allowDeselect: true,
85
-
activeCls: 'active', // the css for the active cell
86
-
selectionEvent: 'singleclick' // singleclick vs doubleclick
84
+
activeCls: 'active', // the css for the active cell
85
+
selectionEvent: 'singleclick' // singleclick vs doubleclick
0 commit comments