{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/vue-data-grid/server-side-model-selection/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Selecting rows and groups in the Server-Side Row Model is supported.\nJust set the property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowSelection"}]},{"type":"text","value":" to either "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'single'"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'multiple'"}]},{"type":"text","value":" as with any other row model."}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Server-Side Row Selection requires "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/server-side-model-configuration/#providing-row-ids"},"children":[{"type":"text","value":"Row ID's"}]},{"type":"text","value":" to be supplied to grid."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"enabling-row-selection","style":"position:relative;"},"children":[{"type":"text","value":"Enabling Row Selection"},{"type":"element","tagName":"a","properties":{"href":"#enabling-row-selection","ariaLabel":"enabling row selection permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Row selection can be enabled in the grid by setting the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowSelection"}]},{"type":"text","value":" property to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"single"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"multiple"}]},{"type":"text","value":". The below example demonstrates this property configured as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"multiple"}]},{"type":"text","value":", note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Selecting a single row can be achieved by clicking it. Clicking another row selects it and de-selects any other rows."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Selecting multiple rows can be achieved by holding down "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":" and mouse clicking the rows. A range of fully loaded rows can be selected by using "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Shift"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The selected rows are preserved when the grid is sorted or filtered and are displayed as selected when scrolled into view.  Select a row, apply a column filter so that the selected row is in the filter results and it will appear as selected in the filter results. If a selected row doesn’t match the applied filter, it will still be selected when the filter is removed."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Click Selection","name":"click-selection","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 590, \"extras\": [\"alasql\"], \"modules\": [\"serverside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"checkbox-selection","style":"position:relative;"},"children":[{"type":"text","value":"Checkbox Selection"},{"type":"element","tagName":"a","properties":{"href":"#checkbox-selection","ariaLabel":"checkbox selection permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Checkboxes can be enabled on any column by setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"checkboxSelection: true"}]},{"type":"text","value":" in the column defs. To enable a checkbox on a group column,\nsee the snippet on the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/javascript-data-grid/row-selection/#example-groups--checkbox-selection-with-unselectable-leaf-nodes"},"children":[{"type":"text","value":"Row Selection"}]},{"type":"text","value":" page."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates checkbox selection with the SSRM. Note the following;"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Checkbox selection on the group column allowing selection of any group after 2004."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Checkbox selection on the group sport column. Selection is again restricted to rows after 2004 only via "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridOptions.isRowSelectable(rowNode)"}]},{"type":"text","value":" callback."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-options/properties.json","section":"selection","names":"[\"isRowSelectable\"]"},"children":[]}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Checkbox Selection","name":"checkbox","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 590, \"extras\": [\"alasql\"], \"modules\": [\"serverside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"header-checkbox-selection","style":"position:relative;"},"children":[{"type":"text","value":"Header Checkbox Selection"},{"type":"element","tagName":"a","properties":{"href":"#header-checkbox-selection","ariaLabel":"header checkbox selection permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The header select-all checkbox can be enabled by setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"headerCheckboxSelection: true"}]},{"type":"text","value":" on any column. This checkbox will toggle the selection state of every node loaded into the grid."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates select-all with the SSRM. Note the following;"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Selecting the header checkbox selects every row in the grid, even rows not matching the currently applied column filter (if one is applied). Setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"headerCheckboxSelectionFilteredOnly=true"}]},{"type":"text","value":" or  "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"headerCheckboxSelectionCurrentPageOnly=true"}]},{"type":"text","value":" is not supported when using the server-side row model."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Deselecting one row puts the header checkbox into an indeterminate state, clicking this again asserts every row is selected."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Header Checkbox Selection","name":"select-all","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 590, \"extras\": [\"alasql\"], \"modules\": [\"serverside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When using header checkbox selection with the server-side row model, you should "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"not"}]},{"type":"text","value":" use the api functions "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getSelectedNodes()"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getSelectedRows()"}]},{"type":"text","value":". See the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/server-side-model-selection/#selection-api"},"children":[{"type":"text","value":"Selection API"}]},{"type":"text","value":" section below for suggested alternatives."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"group-selection","style":"position:relative;"},"children":[{"type":"text","value":"Group Selection"},{"type":"element","tagName":"a","properties":{"href":"#group-selection","ariaLabel":"group selection permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid can be configured to select children with their parents. This can be enabled by setting the grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupSelectsChildren: true"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupSelectsChildren"}]},{"type":"text","value":" with the SSRM. Note the following;"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Selecting the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"United States"}]},{"type":"text","value":" group selects all of its children."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Deselecting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"United States"}]},{"type":"text","value":" → "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"2004"}]},{"type":"text","value":" also deselects all of its children, and puts the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"United States"}]},{"type":"text","value":" row in an indeterminate state."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Changing the row group columns resets the selection state."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Group Selection","name":"group-selects-children","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 590, \"extras\": [\"alasql\"], \"modules\": [\"serverside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When using group selection with the server-side row model, you should "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"not"}]},{"type":"text","value":" use the api functions "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getSelectedNodes()"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getSelectedRows()"}]},{"type":"text","value":". See the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/server-side-model-selection/#selection-api"},"children":[{"type":"text","value":"Selection API"}]},{"type":"text","value":" section below for suggested alternatives."}]}]}]},{"type":"element","tagName":"h3","properties":{"id":"transactions","style":"position:relative;"},"children":[{"type":"text","value":"Transactions"},{"type":"element","tagName":"a","properties":{"href":"#transactions","ariaLabel":"transactions permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When adding a new row via transaction, the new row will be treated as if it conforms to the parents selection. Therefore, if the parent row was selected the new row will be treated as selected upon creation. For indeterminate groups, this will follow the last non-indeterminate state. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When clicking the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Add new Aggressive"}]},{"type":"text","value":" button, the new row is unselected"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"After selecting the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Aggressive"}]},{"type":"text","value":" group, new rows created by the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Add new Aggressive"}]},{"type":"text","value":" button will be selected."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"After toggling one of the child rows of the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Aggressive"}]},{"type":"text","value":" group, new rows follow the groups previous selection state."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Transactions Example","name":"group-selects-children-transactions","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 590, \"extras\": [\"alasql\"], \"modules\": [\"serverside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"selection-api","style":"position:relative;"},"children":[{"type":"text","value":"Selection API"},{"type":"element","tagName":"a","properties":{"href":"#selection-api","ariaLabel":"selection api permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following API functions exist for the Server-Side Row Model when using "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/row-selection/#grid-selection-api"},"children":[{"type":"text","value":"Row Selection"}]},{"type":"text","value":". These can be used to get the currently selected rows and nodes if all of the selected rows have been loaded by the grid. These cannot be used while using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupSelectsChildren"}]},{"type":"text","value":" or when any select all functionality is required."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-api/api.json","section":"selection","names":"[\"getSelectedNodes\", \"getSelectedRows\"]"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When using selection where all selected rows may not have been loaded, it is instead advised to use "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.getServerSideSelectionState"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.setServerSideSelectionState"}]},{"type":"text","value":", as these functions can be used to identify selected rows without having ever loaded the rows."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-api/api.json","section":"serverSideRowModel","names":"[\"getServerSideSelectionState\", \"setServerSideSelectionState\"]"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"api-selection","style":"position:relative;"},"children":[{"type":"text","value":"API Selection"},{"type":"element","tagName":"a","properties":{"href":"#api-selection","ariaLabel":"api selection permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The below snippet demonstrates how to set all nodes as selected, except for the row which has the ID "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"United States"}]},{"type":"text","value":", and the row with the ID "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"United States2004"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"snippet","properties":{"spacebetweenproperties":"true"},"children":[{"type":"text","value":"\n| gridOptions.api.setServerSideSelectionState({\n|     selectAll: true,\n|     toggledNodes: ['United States', 'United States2004'],\n| });\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the example below, note the following;"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The above snippet has been included inside of the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"firstDataRendered"}]},{"type":"text","value":" callback, which sets the initial selection state."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Save Selection"}]},{"type":"text","value":" button has been configured to store the result of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.getServerSideSelectionState()"}]},{"type":"text","value":", it also logs the saved state to the console when clicked."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Load Selection"}]},{"type":"text","value":" button can subsequently re-apply the previously saved selection rules using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.setServerSideSelectionState(state)"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Select All API","name":"api-select-all","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 590, \"extras\": [\"alasql\"], \"modules\": [\"serverside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"group-selection-api","style":"position:relative;"},"children":[{"type":"text","value":"Group Selection API"},{"type":"element","tagName":"a","properties":{"href":"#group-selection-api","ariaLabel":"group selection api permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The below snippet demonstrates how to set all nodes as selected, except for the row which has the ID "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"United States"}]},{"type":"text","value":", and its child row with the ID "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"United States2004"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"snippet","properties":{"spacebetweenproperties":"true"},"children":[{"type":"text","value":"\n| params.api.setServerSideSelectionState({\n|     // this root level config can be used to determine a global select-all\n|     selectAllChildren: true,\n|     // all of the top level group nodes which do not conform with the select all value will have an entry here\n|     // including indeterminate nodes\n|     toggledNodes: [{\n|         // as this is a group node with toggledNodes, this node will be marked as indeterminate\n|         nodeId: 'United States',\n|         // selectAllChildren can be used to determine whether this groups children are all selected\n|         selectAllChildren: false,\n|         toggledNodes: [{\n|             // this group node has no toggledNodes, and so it will respect its own `selectAllChildren` property along\n|             // with its descendants.\n|             nodeId: 'United States2004',\n|             selectAllChildren: true,\n|         }],\n|     }],\n| });\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the example below, note the following;"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The above snippet has been included inside of the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"firstDataRendered"}]},{"type":"text","value":" callback, which sets the initial selection state."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Save Selection"}]},{"type":"text","value":" button has been configured to store the result of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.getServerSideSelectionState()"}]},{"type":"text","value":", it also logs the saved state to the console when clicked."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Load Selection"}]},{"type":"text","value":" button can subsequently re-apply the previously saved selection rules using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.setServerSideSelectionState(state)"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Group Selection API","name":"api-group-selects-children","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 590, \"extras\": [\"alasql\"], \"modules\": [\"serverside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"tree-data","style":"position:relative;"},"children":[{"type":"text","value":"Tree Data"},{"type":"element","tagName":"a","properties":{"href":"#tree-data","ariaLabel":"tree data permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Row selection is also supported when using tree data. See this documented on the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/server-side-model-tree-data/#selection-with-tree-data"},"children":[{"type":"text","value":"SSRM Tree Data"}]},{"type":"text","value":" page."}]},{"type":"element","tagName":"h2","properties":{"id":"next-up","style":"position:relative;"},"children":[{"type":"text","value":"Next Up"},{"type":"element","tagName":"a","properties":{"href":"#next-up","ariaLabel":"next up permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Continue to the next section to learn how to "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/server-side-model-changing-columns/"},"children":[{"type":"text","value":"Change Columns"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"SSRM Row Selection","version":null,"enterprise":true,"sideMenu":null,"description":null},"headings":[{"id":"enabling-row-selection","depth":2,"value":"Enabling Row Selection"},{"id":"checkbox-selection","depth":2,"value":"Checkbox Selection"},{"id":"header-checkbox-selection","depth":2,"value":"Header Checkbox Selection"},{"id":"group-selection","depth":2,"value":"Group Selection"},{"id":"transactions","depth":3,"value":"Transactions"},{"id":"selection-api","depth":2,"value":"Selection API"},{"id":"api-selection","depth":3,"value":"API Selection"},{"id":"group-selection-api","depth":3,"value":"Group Selection API"},{"id":"tree-data","depth":2,"value":"Tree Data"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"vue","srcPath":"/server-side-model-selection","pageName":"server-side-model-selection"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}