1 | # Bulk & Selection Plugins
|
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.
|
4 |
|
5 | When using the selection plugin, the selected rows are captured in the selection state.
|
6 |
|
7 | #### The subdivision of state
|
8 |
|
9 | Each slice of state managed by grid is stored in separate objects inside the grid state atom:
|
10 |
|
11 | ```
|
12 | // grid
|
13 | const columnData = this.props.grid.get('state-key');
|
14 | console.log(columnData.toJS()); <-- only column data
|
15 |
|
16 | // dataSource
|
17 | const rowData = this.props.dataSource.get('state-key');
|
18 | console.log(rowData.toJS()); <-- only row data
|
19 |
|
20 | // selection
|
21 | const selectedIds = this.props.selection.get('state-key').get("indexes");
|
22 | ```
|
23 |
|
24 | #### Get Selected Ids
|
25 |
|
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:
|
27 |
|
28 | ```
|
29 | const mapStateToProps = (state) => ({
|
30 | grid: state.grid,
|
31 | selection: state.selection,
|
32 | });
|
33 | ```
|
34 |
|
35 | Selection state is an [Immutablejs Ordered Map](https://facebook.github.io/immutable-js/docs/#/OrderedMap)
|
36 |
|
37 | ```
|
38 | const getSelectedIds = ()=> {
|
39 |
|
40 | const selectedIds = selection.get('state-key').get('indexes');
|
41 |
|
42 | if (selectedIds !== undefined) {
|
43 | return selectedIds;
|
44 | } else {
|
45 | console.warn('no indexes were found');
|
46 | return [];
|
47 | }
|
48 | };
|
49 | ```
|
50 |
|
51 | If you set activeCls to true, the rows will change color as you hover over and click on them and the checkbox will also toggle state.
|
52 |
|
53 | ```
|
54 | SELECTION_MODEL: {
|
55 | mode: 'checkbox-multi',
|
56 | enabled: true,
|
57 | allowDeselect: true,
|
58 | activeCls: 'active',
|
59 | selectionEvent: 'singleclick'
|
60 | },
|
61 | ```
|
62 |
|
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.
|
64 |
|
65 |
|
66 | ```
|
67 | SELECTION_MODEL: {
|
68 | mode: 'checkbox-multi',
|
69 | enabled: true,
|
70 | allowDeselect: true,
|
71 | activeCls: 'false',
|
72 | selectionEvent: 'false'
|
73 | },
|
74 | ```
|
75 |
|
76 | #### Bulk & Selection Plugins
|
77 |
|
78 | ```
|
79 | export const plugins = {
|
80 | SELECTION_MODEL: {
|
81 | mode: 'checkbox-multi',
|
82 | enabled: true,
|
83 | allowDeselect: true,
|
84 | activeCls: 'active', // the css for the active cell
|
85 | selectionEvent: 'singleclick' // singleclick vs doubleclick
|
86 | },
|
87 | BULK_ACTIONS: {
|
88 | enabled: true,
|
89 | actions: [
|
90 | {
|
91 | text: 'Move',
|
92 | EVENT_HANDLER: () => {
|
93 |
|
94 | }
|
95 | },
|
96 | {
|
97 | text: 'Add',
|
98 | EVENT_HANDLER: () => {
|
99 |
|
100 | }
|
101 | }
|
102 | ]
|
103 | }
|
104 | };
|
105 | ```
|