{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/react-data-grid/range-selection/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Range selection allows Excel-like range selection of cells. Range selections are useful for visually highlighting data, copying data to the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/clipboard/"},"children":[{"type":"text","value":"Clipboard"}]},{"type":"text","value":", or for doing aggregations using the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/status-bar/"},"children":[{"type":"text","value":"Status Bar"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"selecting-ranges","style":"position:relative;"},"children":[{"type":"text","value":"Selecting Ranges"},{"type":"element","tagName":"a","properties":{"href":"#selecting-ranges","ariaLabel":"selecting ranges 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":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Range Selection is enabled using the following grid option property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"enableRangeSelection=true"}]},{"type":"text","value":".\nWhen enabled, ranges can be selected in the following ways:"}]},{"type":"text","value":"\n"},{"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":"Mouse Drag:"}]},{"type":"text","value":" Click the mouse down on a cell and drag and release the mouse over another cell. A range will be created between the two cells and clear any existing ranges."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Ctrl & Mouse Drag:"}]},{"type":"text","value":" Holding "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":" key while creating a range using mouse drag "},{"type":"element","tagName":"b","properties":{},"children":[{"type":"text","value":"outside an existing range"}]},{"type":"text","value":" will create a new range selection and keep any existing ranges."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Shift & Click:"}]},{"type":"text","value":" Clicking on one cell to focus that cell, then holding down "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Shift"}]},{"type":"text","value":" while clicking another cell, will create a range between both cells."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Shift & Arrow Keys:"}]},{"type":"text","value":" Focusing a cell and then holding down "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Shift"}]},{"type":"text","value":" and using the arrow keys will create a range starting from the focused cell."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Ctrl & Shift & Arrow Keys:"}]},{"type":"text","value":" Focusing a cell and then holding down "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":" + "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Shift"}]},{"type":"text","value":" and using the arrow keys will create a range starting from the focused cell to the last cell in the direction of the Arrow pressed."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"range-deselection","style":"position:relative;"},"children":[{"type":"text","value":"Range Deselection"},{"type":"element","tagName":"a","properties":{"href":"#range-deselection","ariaLabel":"range deselection 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":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to deselect part of existing ranges in the following ways:"}]},{"type":"text","value":"\n"},{"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":"Ctrl & Mouse Drag:"}]},{"type":"text","value":" Holding "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":" and dragging a range starting "},{"type":"element","tagName":"b","properties":{},"children":[{"type":"text","value":"within an existing range"}]},{"type":"text","value":" will cause any cells covered by the new range to be deselected."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Ctrl & Click:"}]},{"type":"text","value":"  Holding "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":" and clicking a cell will deselect just that cell."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that deselecting part of a range can split the range into multiple ranges, since individual ranges have the limitation of being rectangular."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates simple range selection. Ranges can be selected in all the ways described above."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Range Selection / Deselection","name":"range-selection","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"range\", \"menu\", \"clipboard\"] }"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"suppress-multi-range-selection","style":"position:relative;"},"children":[{"type":"text","value":"Suppress Multi Range Selection"},{"type":"element","tagName":"a","properties":{"href":"#suppress-multi-range-selection","ariaLabel":"suppress multi range 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":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default multiple ranges can be selected. To restrict range selection to a single range, even if the "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":" key is held down, enable the following grid options property: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressMultiRangeSelection=true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates single range selection:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Range Selection Suppress Multi","name":"range-selection-suppress-multi","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"range\", \"menu\", \"clipboard\"] }"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"ranges-with-pinning-and-floating","style":"position:relative;"},"children":[{"type":"text","value":"Ranges with Pinning and Floating"},{"type":"element","tagName":"a","properties":{"href":"#ranges-with-pinning-and-floating","ariaLabel":"ranges with pinning and floating 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":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to select a range that spans pinned and non-pinned sections of the grid. If you do this, the selected range will not have any gaps with regards to the column order. For example, if you start the drag on the left pinned area and drag to the right pinned area, then all of the columns in the center area will also be part of the range."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Likewise with floating, no row gaps will occur if a range spans into pinned rows. A range will be continuous between the floating top rows, the center, and the floating bottom rows."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The above two (pinning and floating) can be thought of as follows: if you have a grid with pinning and / or floating, then 'flatten out' the grid in your head so that all rows and columns are visible, then the range selection will work as you would expect in the flattened out version where only full rectangles can be selectable."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"range-selection-changed-event","style":"position:relative;"},"children":[{"type":"text","value":"Range Selection Changed Event"},{"type":"element","tagName":"a","properties":{"href":"#range-selection-changed-event","ariaLabel":"range selection changed event 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":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rangeSelectionChanged"}]},{"type":"text","value":" event tells you that the range selection has changed. The event has two properties, "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"started"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"finished"}]},{"type":"text","value":", which are "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" when the selection is starting or finishing. For example, if selecting a range of 10 cells in a row, the user will click the first cell and drag to the last cell. This will result in up to 11 events. The first event will have "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"started=true"}]},{"type":"text","value":", the last will have "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"finished=true"}]},{"type":"text","value":", and all the intermediary events will have both of these values as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"false"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-events/events.json","section":"selection","names":"[\"rangeSelectionChanged\"]"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"range-selection-api","style":"position:relative;"},"children":[{"type":"text","value":"Range Selection API"},{"type":"element","tagName":"a","properties":{"href":"#range-selection-api","ariaLabel":"range 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":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following methods are available on the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"GridApi"}]},{"type":"text","value":" for managing range selection."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"getcellranges","style":"position:relative;"},"children":[{"type":"text","value":"getCellRanges()"},{"type":"element","tagName":"a","properties":{"href":"#getcellranges","ariaLabel":"getcellranges 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":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Get the selected ranges using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.getCellRanges()"}]},{"type":"text","value":". This will return back a list of cell range objects, each of which contains the details of one range. "}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The start is the first cell the user clicked on and the end is the cell where the user stopped dragging. Do not assume that the start cell's index is numerically before the end cell, as the user could have dragged up."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-api/api.json","section":"selection","names":"[\"getCellRanges\"]"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"clearrangeselection","style":"position:relative;"},"children":[{"type":"text","value":"clearRangeSelection()"},{"type":"element","tagName":"a","properties":{"href":"#clearrangeselection","ariaLabel":"clearrangeselection 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":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-api/api.json","section":"selection","names":"[\"clearRangeSelection\"]"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"addcellrangerangeselection","style":"position:relative;"},"children":[{"type":"text","value":"addCellRange(rangeSelection)"},{"type":"element","tagName":"a","properties":{"href":"#addcellrangerangeselection","ariaLabel":"addcellrangerangeselection 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":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Adds a range to the selection. This keeps any previous ranges. If you wish to only have the new range selected, then call "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"clearRangeSelection()"}]},{"type":"text","value":" first. The method takes the params of type "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"CellRangeParams"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-api/api.json","section":"selection","names":"[\"addCellRange\"]"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ranges are normally bounded by a start and end row. However it is also possible to define a range unbounded by rows (i.e. to contain all rows). For an unbounded range, do not provide start or end row positions."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Row positions are defined by a row index and pinned. Row indexes start at zero and increment. Pinned can be either "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'top'"}]},{"type":"text","value":" (row is in pinned top section), "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'bottom'"}]},{"type":"text","value":" (row is in pinned bottom section) or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":" (row is in the main body). See "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/row-pinning/"},"children":[{"type":"text","value":"Row Pinning"}]},{"type":"text","value":" for information on row pinning."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ranges are defined by a list of columns. Pass in either a) a list of columns or b) a start and end column and let the grid work out the columns in between. Passing a list of columns instead of a start and end column has the advantage that the columns do not need to be contiguous."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"copy-range-down","style":"position:relative;"},"children":[{"type":"text","value":"Copy Range Down"},{"type":"element","tagName":"a","properties":{"href":"#copy-range-down","ariaLabel":"copy range down 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":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When you have more than one row selected in a range, pressing keys "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":"+"},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"D"}]},{"type":"text","value":" will copy the top row values to all other rows in the selected range."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"example-advanced-range-selection","style":"position:relative;"},"children":[{"type":"text","value":"Example: Advanced Range Selection"},{"type":"element","tagName":"a","properties":{"href":"#example-advanced-range-selection","ariaLabel":"example advanced range 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":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates a more complex range selection scenario. The example listens for the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rangeSelectionChanged"}]},{"type":"text","value":" event and creates a sum of all the number values that are in the range (it ignores all non-number values). The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"finished"}]},{"type":"text","value":" flag is used to update the eager and lazy figures separately."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example also shows use of the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"processCellForClipboard"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"processCellFromClipboard"}]},{"type":"text","value":" "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/clipboard/#processing-clipboard-data"},"children":[{"type":"text","value":"callbacks"}]},{"type":"text","value":" by making all the athlete names uppercase when copying into the clipboard and lowercase when copying from the clipboard."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Advanced Range Selection","name":"range-selection-advanced","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 700, \"modules\": [\"clientside\", \"range\", \"menu\", \"clipboard\"] }"},"children":[]}]}],"data":{"quirksMode":false}},"frontmatter":{"title":"Range Selection","version":null,"enterprise":true,"sideMenu":null,"description":null},"headings":[{"id":"selecting-ranges","depth":2,"value":"Selecting Ranges"},{"id":"range-deselection","depth":3,"value":"Range Deselection"},{"id":"suppress-multi-range-selection","depth":2,"value":"Suppress Multi Range Selection"},{"id":"ranges-with-pinning-and-floating","depth":2,"value":"Ranges with Pinning and Floating"},{"id":"range-selection-changed-event","depth":2,"value":"Range Selection Changed Event"},{"id":"range-selection-api","depth":2,"value":"Range Selection API"},{"id":"getcellranges","depth":3,"value":"getCellRanges()"},{"id":"clearrangeselection","depth":3,"value":"clearRangeSelection()"},{"id":"addcellrangerangeselection","depth":3,"value":"addCellRange(rangeSelection)"},{"id":"copy-range-down","depth":2,"value":"Copy Range Down"},{"id":"example-advanced-range-selection","depth":2,"value":"Example: Advanced Range Selection"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"react","srcPath":"/range-selection","pageName":"range-selection"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}