{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/react-data-grid/row-selection/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Select a row by clicking on it. Selecting a row will remove any previous selection unless you\nhold down "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":" while clicking. Selecting a row and holding down "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Shift"}]},{"type":"text","value":"\nwhile clicking a second row will select the range."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Configure row selection with the following properties:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowSelection"}]},{"type":"text","value":": Type of row selection, set 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":" to enable selection. "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'single'"}]},{"type":"text","value":" will use single row selection, such that when you select a row, any previously selected row gets unselected. "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'multiple'"}]},{"type":"text","value":" allows multiple rows to be selected."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowMultiSelectWithClick"}]},{"type":"text","value":": Set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" to allow multiple rows to be selected with clicks. For example, if you click to select one row and then click to select another row, the first row will stay selected as well. Clicking a selected row in this mode will deselect the row. This is useful for touch devices where "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":" and "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Shift"}]},{"type":"text","value":" clicking is not an option."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressRowDeselection"}]},{"type":"text","value":": Set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" to prevent rows from being deselected if you hold down "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":" and click the row (i.e. once a row is selected, it remains selected until another row is selected in its place). By default the grid allows deselection of rows."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressRowClickSelection"}]},{"type":"text","value":": If "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":", rows won't be selected when clicked. Use, for example, when you want checkbox selection or your managing selection from a custom component and don't want to select the row when the row is clicked."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When you pass data to the grid, it wraps each data item in a node object. This is explained in the section "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/client-side-model/"},"children":[{"type":"text","value":"Client-Side Row Model"}]},{"type":"text","value":". When you query for the selected rows, there are two method types: ones that return nodes, and ones that return data items. To get the selected nodes / rows from the grid, use the following API methods:"}]},{"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":"Working with AG Grid nodes is preferred over the row data as it provides you with more information and maps better to the internal representation of AG Grid."}]},{"type":"element","tagName":"h3","properties":{"id":"example-single-row-selection","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-single-row-selection","ariaLabel":"example single row selection permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Single Row Selection"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows single row selection."}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowSelection='single'"}]},{"type":"text","value":" is set to enable single row selection. It is not possible to select multiple rows."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Single Row Selection","name":"single-row-selection","type":"generated"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"example-multiple-row-selection","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-multiple-row-selection","ariaLabel":"example multiple row selection permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Multiple Row Selection"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows multi-row selection."}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowSelection='multiple'"}]},{"type":"text","value":" is set to enable multiple row selection. 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 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":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Multiple Row Selection","name":"multiple-row-selection","type":"generated"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"example-multi-select-with-click","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-multi-select-with-click","ariaLabel":"example multi select with click permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Multi Select With Click"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows multi-select with click. Clicking multiple rows will select a range of rows without the need for "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":" or "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Shift"}]},{"type":"text","value":" keys. Clicking a selected row will deselect it. This is useful for touch devices where "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":" and "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Shift"}]},{"type":"text","value":" clicks are not available."}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowMultiSelectWithClick=true"}]},{"type":"text","value":" is set to enable multiple row selection with clicks."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking multiple rows will select multiple rows without needing to press "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":" or "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Shift"}]},{"type":"text","value":" keys."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking a selected row will deselect that row."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Multi Select With Click","name":"multi-select-single-click","type":"generated"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"checkbox-selection","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#checkbox-selection","ariaLabel":"checkbox selection permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Checkbox Selection"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Checkbox selection can be used in two places: row selection and group selection."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"column-properties/properties.json","section":"columns","names":"[\"checkboxSelection\", \"showDisabledCheckboxes\"]"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To include checkbox selection for a column, set the attribute "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'checkboxSelection'"}]},{"type":"text","value":" to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" on the column definition.\nYou can set this attribute on as many columns as you like, however it doesn't make sense to have it in more than one\ncolumn in a table."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To enable checkbox selection for groups, set the attribute "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'checkbox'"}]},{"type":"text","value":" to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" for the group renderer. See the\ngrouping section for details on the group renderer."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"checkboxSelection"}]},{"type":"text","value":" can also be specified as a function. This allows dynamically setting whether a cell\nhas a checkbox or not. The callback is called when the Cell is drawn, and called again if there are any changes\nto the row's data or the column positions (e.g. the callback could be showing the checkbox depending on what\nvalue is displayed, or if the column in question is the first column to show a checkbox for the first column only)."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If the function returns false, a selection checkbox will still be created and in the DOM,\nhowever it will not be visible using CSS "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"visibility: hidden"}]},{"type":"text","value":". This is to ensure the following UX properties:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Where a column has a checkbox for only some cells, the values will remain aligned."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When a checkbox visibility changes, the cells contents don't jump."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To be clear, there is a slight difference between a callback returning false, and false value provided explicitly.\nWhen a callback is used and returns false, the grid assumes a checkbox is sometimes used and as such creates one\nthat is not visible."}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"ts"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-ts"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-ts"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// do not create checkbox"}]},{"type":"text","value":"\ncolDef"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"checkboxSelection "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"false"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// create checkbox, make checkbox not visible"}]},{"type":"text","value":"\ncolDef"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function-variable","function"]},"children":[{"type":"text","value":"checkboxSelection"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"false"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"h3","properties":{"id":"example-displaying-disabled-checkboxes","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-displaying-disabled-checkboxes","ariaLabel":"example displaying disabled checkboxes permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Displaying Disabled Checkboxes"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to change the default behaviour for when a checkbox is not displayed, and instead have the checkbox visible but disabled. This can be done by enabling the column property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"showDisabledCheckboxes"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Displaying Disabled Checkboxes","name":"disabled-checkboxes","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"example-forcing-checkboxes-as-selected","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-forcing-checkboxes-as-selected","ariaLabel":"example forcing checkboxes as selected permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Forcing Checkboxes As Selected"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to select a row via API and disable its checkbox to prevent users from de-selecting it. This can be achieved by providing a predicate to the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"checkboxSelection"}]},{"type":"text","value":" property which will determine whether a row’s checkbox is selectable or disabled."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the example below please note that only rows with Year=2012 are selectable. All remaining rows have disabled checkboxes and cannot be selected by the user."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Please note that clicking the header checkbox selects all rows even if their checkboxes are disabled."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Forcing Checkboxes As Selected","name":"force-enable-checkboxes","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"group-selection","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#group-selection","ariaLabel":"group selection permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Group Selection"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When doing grouping, you control what selecting a group means. This is controlled with the two grid properties "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupSelectsChildren"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupSelectsFiltered"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupSelectsChildren"}]},{"type":"text","value":": When "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":", selecting a group will have the impact of selecting all its children. The group will then display "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'selected'"}]},{"type":"text","value":" when all children are selected, "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'unselected'"}]},{"type":"text","value":" when none are selected and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'intermediate'"}]},{"type":"text","value":" when children have a mix of selected and unselected. When the node is selecting children, it will never appear in the selected set when calling "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.getSelectedNodes()"}]},{"type":"text","value":"."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":" When "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"false"}]},{"type":"text","value":", the group is selectable independently of the child nodes. When selecting the group node independently of the children, it will appear in the set when calling "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.getSelectedNodes()"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupSelectsFiltered"}]},{"type":"text","value":": Used when "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupSelectsChildren=true"}]},{"type":"text","value":". When "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" only filtered children of the group will be selected / unselected. This means you can apply a filter, then try to select a group, and the group will end up in the intermediate state as only as subset of the children will be selected."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"h3","properties":{"id":"example-groups--checkbox-selection","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-groups--checkbox-selection","ariaLabel":"example groups  checkbox selection permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Groups & Checkbox Selection"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows checkbox selection with groups. Selecting the group has the effect of selecting the children. Likewise selecting all the children automatically selects the group. In this scenario the group itself will never appear in the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"selectedRows"}]},{"type":"text","value":" list."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example also shows a checkbox for selection on the age column. In practice, it is not normal to have more than one column for selection, the below is just for demonstration. Having a checkbox within a non-group row is best for grids that are not using grouping."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Groups & Checkbox Selection","name":"group-selection","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"example-groups--checkbox-selection-with-unselectable-leaf-nodes","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-groups--checkbox-selection-with-unselectable-leaf-nodes","ariaLabel":"example groups  checkbox selection with unselectable leaf nodes permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Groups & Checkbox Selection With Unselectable Leaf Nodes"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below is similar to the previous example except it does not put checkboxes on the leaf level nodes, allowing only entire groups to be selected. This is achieved by providing functions for "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.checkboxSelection"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoGroupColumnDef.cellRendererParams.checkbox"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Groups & Checkbox Selection With Unselectable Leaf Nodes","name":"selection-checkbox","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"example-groups--checkbox-selection-with-only-filtered-children","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-groups--checkbox-selection-with-only-filtered-children","ariaLabel":"example groups  checkbox selection with only filtered children permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Groups & Checkbox Selection With Only Filtered Children"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Lastly we show an example using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupSelectsFiltered=true"}]},{"type":"text","value":". Here, when you filter the grid and select a group, only the filtered children get selected."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To demonstrate, try this in the example:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Filter on swimming"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Select a country"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Notice that all filtered rows get selected. If you remove the filter, the non-filtered rows are not selected."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Notice that the group checkbox becomes indeterminate while all its filtered children get selected. This is because the selected state of the group node is independent to the filter, so it becomes indeterminate as not all of its children are selected."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Groups & Checkbox Selection With Only Filtered Children","name":"selection-checkbox-filtered","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 590, \"modules\": [\"clientside\", \"rowgrouping\", \"setfilter\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"header-checkbox-selection","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#header-checkbox-selection","ariaLabel":"header checkbox selection permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Header Checkbox Selection"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to have a checkbox in the header for selection. To configure the column to have a checkbox, set "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.headerCheckboxSelection=true"}]},{"type":"text","value":". "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"headerCheckboxSelection"}]},{"type":"text","value":" can also be a function, if you want the checkbox to appear sometimes (e.g. if the column is ordered first in the grid)."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"column-properties/properties.json","section":"header","names":"[\"headerCheckboxSelection\"]"},"children":[]}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        // the name column header always has a checkbox in the header\n        {\n            field: 'name',\n            headerCheckboxSelection: true\n        },\n        // the country column header only has checkbox if it is the first column\n        {\n            field: 'country',\n            headerCheckboxSelection: params => {\n                const displayedColumns = params.columnApi.getAllDisplayedColumns();\n                return displayedColumns[0] === params.column;\n            }\n        },\n    ],\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"headerCheckboxSelection"}]},{"type":"text","value":" is a function, the function will be called every time there is a change to the displayed columns, to check for changes."}]},{"type":"element","tagName":"h2","properties":{"id":"select-everything-or-just-filtered","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#select-everything-or-just-filtered","ariaLabel":"select everything or just filtered permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Select Everything or Just Filtered"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The header checkbox has two modes of operation, "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'normal'"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'filtered only'"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"colDef.headerCheckboxSelectionFilteredOnly=false"}]},{"type":"text","value":": The checkbox will select all rows when checked, and un-select all rows when unchecked. The checkbox will update its state based on all rows."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"colDef.headerCheckboxSelectionFilteredOnly=true"}]},{"type":"text","value":": The checkbox will select only filtered rows when checked and un-select only filtered rows when unchecked. The checkbox will update its state based only on filtered rows."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The examples below demonstrate both of these options."}]},{"type":"element","tagName":"h3","properties":{"id":"example-just-filtered","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-just-filtered","ariaLabel":"example just filtered permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Just Filtered"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This example has the following characteristics:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The checkbox works on filtered rows only. That means if you filter first, then hit the checkbox to select or un-select, then only the filtered rows are affected."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The checkbox is always on the athlete column, even if the athlete column is moved."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Just Filtered","name":"header-checkbox","type":"generated","options":"{ \"exampleHeight\": 590 }"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"example-select-everything","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-select-everything","ariaLabel":"example select everything permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Select Everything"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The next example is similar to the one above with the following changes:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The checkbox selects everything, not just filtered."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The column that the selection checkbox appears in is always the first column. This can be observed by dragging the columns to reorder them."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Select Everything","name":"header-checkbox-entire-set","type":"generated","options":"{ \"exampleHeight\": 590 }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"specify-selectable-rows","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#specify-selectable-rows","ariaLabel":"specify selectable rows permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Specify Selectable Rows"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to specify which rows can be selected via the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridOptions.isRowSelectable(rowNode)"}]},{"type":"text","value":" callback function."}]},{"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":"p","properties":{},"children":[{"type":"text","value":"For instance if we only wanted to allow rows where the 'year' property is less than 2007, we could implement the following:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    isRowSelectable: rowNode => rowNode.data ? rowNode.data.year < 2007 : false,\n}\n"}]},{"type":"element","tagName":"h3","properties":{"id":"example-selectable-rows-with-header-checkbox","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-selectable-rows-with-header-checkbox","ariaLabel":"example selectable rows with header checkbox permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Selectable Rows with Header Checkbox"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This example demonstrates the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"isRowSelectable(node)"}]},{"type":"text","value":" callback only allows selections on rows where the year < 2007."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The country column has "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"headerCheckboxSelection: true"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"checkboxSelection: true"}]},{"type":"text","value":", but only rows which are selectable will obtain a selectable checkbox. Similarly, the header checkbox will only select selectable rows."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Selectable Rows with Header Checkbox","name":"specify-selectable-rows","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"example-specifying-selectable-rows-with-groups","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-specifying-selectable-rows-with-groups","ariaLabel":"example specifying selectable rows with groups permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Specifying Selectable Rows with Groups"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This example demonstrates the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"isRowSelectable(node)"}]},{"type":"text","value":" callback allows rows with a year of 2004 or 2008 to be selectable."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"As "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridOptions.groupSelectsChildren = true"}]},{"type":"text","value":" selecting groups will also select 'selectable' children."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"As "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridOptions.groupSelectsFiltered = true"}]},{"type":"text","value":" selecting groups will only select 'selectable' children that pass the filter."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To demonstrate, follow these steps:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Click 'Filter by Year 2008 & 2012'."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Select checkbox beside 'United States'."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Click 'Clear Filter'."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Notice that only 'United States' for 2008 is selected."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Specifying Selectable Rows with Groups","name":"specify-selectable-rows-with-groups","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 590, \"modules\": [\"clientside\", \"rowgrouping\", \"setfilter\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"selection-events","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#selection-events","ariaLabel":"selection events permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Selection Events"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There are two events with regards to selection:"},{"type":"element","tagName":"br","properties":{},"children":[]}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-events/events.json","section":"selection","names":"[\"rowSelected\", \"selectionChanged\"]"},"children":[]}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Selection Events","name":"selection-events","type":"generated"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"node-selection-api","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#node-selection-api","ariaLabel":"node selection api permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Node Selection API"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To select rows programmatically, use the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"node.setSelected(params)"}]},{"type":"text","value":" method."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"row-object/resources/methods.json","section":"rowNodeMethods","names":"[\"setSelected\", \"isSelected\"]"},"children":[]}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n|// set selected, keep any other selections\n|node.setSelected(true);\n|\n|// set selected, exclusively, remove any other selections\n|node.setSelected(true, true);\n|\n|// un-select\n|node.setSelected(false);\n|\n|// check status of node selection\n|const selected = node.isSelected();\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"isSelected()"}]},{"type":"text","value":" method returns "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" if the node is selected, or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"false"}]},{"type":"text","value":" if it is not selected. If the node is a group node and the group selection is set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'children'"}]},{"type":"text","value":", this will return "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" if all child (and grandchild) nodes are selected, "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"false"}]},{"type":"text","value":" if all unselected, or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":" if a mixture."}]},{"type":"element","tagName":"h2","properties":{"id":"grid-selection-api","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#grid-selection-api","ariaLabel":"grid selection api permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Grid Selection API"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid API has the following methods for selection:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-api/api.json","section":"selection","names":"[\"selectAll\",\"deselectAll\",\"selectAllFiltered\",\"deselectAllFiltered\",\"getSelectedNodes\", \"getSelectedRows\"]"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you want to select only filtered-out row nodes, you could do this using the following:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n// loop through each node when it is filtered out\ngridOptions.api.forEachNodeAfterFilter(node => {\n    // select the node\n    node.setSelected(true);\n});\n"}]},{"type":"element","tagName":"h3","properties":{"id":"example-using-foreachnode","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-using-foreachnode","ariaLabel":"example using foreachnode permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Using forEachNode"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There is an API function "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"forEachNode"}]},{"type":"text","value":". This is useful for doing group selections on a business key. The example below shows selecting all rows with country = 'United States'. This method is also useful when you load data and need to know the node equivalent of the data for selection purposes."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Using forEachNode","name":"using-foreachnode","type":"generated","options":"{ \"exampleHeight\": 590 }"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"example-selection-with-keyboard-arrow-keys","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-selection-with-keyboard-arrow-keys","ariaLabel":"example selection with keyboard arrow keys permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Selection with Keyboard Arrow Keys"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default, you can select a row on mouse click, and navigate up and down the rows using your keyboard keys. However, the selection state does not correlate with the navigation keys, but we can add this behaviour using our own "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/keyboard-navigation/#custom-navigation"},"children":[{"type":"text","value":"Custom Navigation"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We need to provide a callback to the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"navigateToNextCell"}]},{"type":"text","value":" grid option to override the default arrow key navigation:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-options/properties.json","section":"nav","names":"[\"navigateToNextCell\"]"},"children":[]}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n|const gridOptions = {\n|    navigateToNextCell: params => {\n|        const suggestedNextCell = params.nextCellPosition;\n|\n|        // this is some code\n|        const KEY_UP = 'ArrowUp';\n|        const KEY_DOWN = 'ArrowDown';\n|\n|        const noUpOrDownKeyPressed = params.key!==KEY_DOWN && params.key!==KEY_UP;\n|        if (noUpOrDownKeyPressed) {\n|            return suggestedNextCell;\n|        }\n|\n|        params.api.forEachNode(node => {\n|            if (node.rowIndex === suggestedNextCell.rowIndex) {\n|                node.setSelected(true);\n|            }\n|        });\n|\n|        return suggestedNextCell;\n|    },\n|}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"From the code above you can see that we iterate over each node and call the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"setSelected()"}]},{"type":"text","value":" method if it matches the current "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowIndex"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Selection with Keyboard Arrow Keys","name":"selection-with-arrow-keys","type":"generated"},"children":[]}]}]},"frontmatter":{"title":"Row Selection","version":null,"enterprise":null,"description":null},"headings":[{"id":"example-single-row-selection","depth":3,"value":"Example: Single Row Selection"},{"id":"example-multiple-row-selection","depth":3,"value":"Example: Multiple Row Selection"},{"id":"example-multi-select-with-click","depth":3,"value":"Example: Multi Select With Click"},{"id":"checkbox-selection","depth":2,"value":"Checkbox Selection"},{"id":"example-displaying-disabled-checkboxes","depth":3,"value":"Example: Displaying Disabled Checkboxes"},{"id":"example-forcing-checkboxes-as-selected","depth":3,"value":"Example: Forcing Checkboxes As Selected"},{"id":"group-selection","depth":2,"value":"Group Selection"},{"id":"example-groups--checkbox-selection","depth":3,"value":"Example: Groups & Checkbox Selection"},{"id":"example-groups--checkbox-selection-with-unselectable-leaf-nodes","depth":3,"value":"Example: Groups & Checkbox Selection With Unselectable Leaf Nodes"},{"id":"example-groups--checkbox-selection-with-only-filtered-children","depth":3,"value":"Example: Groups & Checkbox Selection With Only Filtered Children"},{"id":"header-checkbox-selection","depth":2,"value":"Header Checkbox Selection"},{"id":"select-everything-or-just-filtered","depth":2,"value":"Select Everything or Just Filtered"},{"id":"example-just-filtered","depth":3,"value":"Example: Just Filtered"},{"id":"example-select-everything","depth":3,"value":"Example: Select Everything"},{"id":"specify-selectable-rows","depth":2,"value":"Specify Selectable Rows"},{"id":"example-selectable-rows-with-header-checkbox","depth":3,"value":"Example: Selectable Rows with Header Checkbox"},{"id":"example-specifying-selectable-rows-with-groups","depth":3,"value":"Example: Specifying Selectable Rows with Groups"},{"id":"selection-events","depth":2,"value":"Selection Events"},{"id":"node-selection-api","depth":2,"value":"Node Selection API"},{"id":"grid-selection-api","depth":2,"value":"Grid Selection API"},{"id":"example-using-foreachnode","depth":3,"value":"Example: Using forEachNode"},{"id":"example-selection-with-keyboard-arrow-keys","depth":3,"value":"Example: Selection with Keyboard Arrow Keys"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"react","srcPath":"/row-selection","pageName":"row-selection"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}