{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-data-grid/range-selection-fill-handle/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When working with a Range Selection, a Fill Handle allows you to run operations on cells as you adjust the size of the range."}]},{"type":"element","tagName":"h2","properties":{"id":"enabling-the-fill-handle","style":"position:relative;"},"children":[{"type":"text","value":"Enabling the Fill Handle"},{"type":"element","tagName":"a","properties":{"href":"#enabling-the-fill-handle","ariaLabel":"enabling the fill handle permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To enable the Fill Handle, simply set "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"enableFillHandle"}]},{"type":"text","value":" to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" in the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridOptions"}]},{"type":"text","value":" as shown below: "}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        { field: 'country' },\n        { field: 'year' },\n        { field: 'sport' },\n        { field: 'total' }\n    ],\n    enableRangeSelection: true,\n    enableFillHandle: true\n}\n"}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It's important to note that if you enable both "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"enableFillHandle"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"enableRangeHandle"}]},{"type":"text","value":", the Fill Handle will take precedence."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"default-fill-handle","style":"position:relative;"},"children":[{"type":"text","value":"Default Fill Handle"},{"type":"element","tagName":"a","properties":{"href":"#default-fill-handle","ariaLabel":"default fill handle permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The default Fill Handle behaviour will be as close as possible to other spreadsheet applications. Note the following:"}]},{"type":"element","tagName":"h3","properties":{"id":"single-cell","style":"position:relative;"},"children":[{"type":"text","value":"Single Cell"},{"type":"element","tagName":"a","properties":{"href":"#single-cell","ariaLabel":"single cell permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When a single cell is selected and the range is increased, the value of that cell will be copied to the cells added to the range."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When a single cell containing a "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"number"}]},{"type":"text","value":" value is selected and the range is increased while pressing the "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Alt"}]},{"type":"text","value":"/"},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Option"}]},{"type":"text","value":" key, that value will be incremented (or decremented if dragging to the left or up) by the value of one until all new cells have been filled."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"h3","properties":{"id":"multi-cell","style":"position:relative;"},"children":[{"type":"text","value":"Multi Cell"},{"type":"element","tagName":"a","properties":{"href":"#multi-cell","ariaLabel":"multi cell permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When a range of numbers is selected and that range is extended, the Grid will detect the linear progression of the selected items and fill the extra cells with calculated values."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When a range of strings or a mix of strings and numbers are selected and that range is extended, the range items will be copied in order until all new cells have been properly filled."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When a range of numbers is selected and the range is increased while pressing the "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Alt"}]},{"type":"text","value":"/"},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Option"}]},{"type":"text","value":" key, the behaviour will be the same as when a range of strings or mixed values is selected."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"h3","properties":{"id":"range-reduction","style":"position:relative;"},"children":[{"type":"text","value":"Range Reduction"},{"type":"element","tagName":"a","properties":{"href":"#range-reduction","ariaLabel":"range reduction permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When reducing the size of the range, cells that are no longer part of the range will be cleared (set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":")."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Fill Handle","name":"fill-handle","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 560, \"modules\": [\"clientside\", \"range\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"preventing-range-reduction","style":"position:relative;"},"children":[{"type":"text","value":"Preventing Range Reduction"},{"type":"element","tagName":"a","properties":{"href":"#preventing-range-reduction","ariaLabel":"preventing range reduction permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Reducing a range selection with the Fill Handle will clear cell contents by default, as can be observed in the\n"},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/range-selection-fill-handle/#range-reduction"},"children":[{"type":"text","value":"Range Reduction"}]},{"type":"text","value":" example above."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If this behaviour for decreasing selection needs to be prevented, the flag "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressClearOnFillReduction"}]},{"type":"text","value":" should be set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Fill Handle - Range Reduction","name":"fill-handle-reduction","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 560, \"modules\": [\"clientside\", \"range\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"fill-handle-axis","style":"position:relative;"},"children":[{"type":"text","value":"Fill Handle Axis"},{"type":"element","tagName":"a","properties":{"href":"#fill-handle-axis","ariaLabel":"fill handle axis permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By the default, the Fill Handle can be dragged horizontally or vertically. If dragging only vertically, or only horizontally is a requirement, the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridOptions"}]},{"type":"text","value":" property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"fillHandleDirection"}]},{"type":"text","value":" property can be set or set via the API using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"setFillHandleDirection"}]},{"type":"text","value":". This default value is "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"xy"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-options/properties.json","section":"selection","names":"[\"fillHandleDirection\"]","config":"{\"overrideBottomMargin\":\"0\"}"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"api-documentation","properties":{"source":"grid-api/api.json","section":"selection","names":"[\"setFillHandleDirection\"]"},"children":[]}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n| const gridOptions = {\n|     columnDefs: [\n|         { field: 'country' },\n|         { field: 'year' },\n|         { field: 'sport' },\n|         { field: 'total' }\n|     ],\n|     enableRangeSelection: true,\n|     enableFillHandle: true,\n|     fillHandleDirection: 'x' // Fill Handle can only be dragged horizontally\n| }\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Fill Handle - Direction","name":"fill-handle-direction","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 560, \"modules\": [\"clientside\", \"range\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"custom-user-function","style":"position:relative;"},"children":[{"type":"text","value":"Custom User Function"},{"type":"element","tagName":"a","properties":{"href":"#custom-user-function","ariaLabel":"custom user function permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Often there is a need to use a custom method to fill values instead of simply copying values or increasing number values using linear progression. In these scenarios, the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"fillOperation"}]},{"type":"text","value":" callback should be used."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-options/properties.json","section":"selection","names":"[\"fillOperation\"]"},"children":[]}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        { field: 'country' },\n        { field: 'year' },\n        { field: 'sport' },\n        { field: 'total' }\n    ],\n    enableRangeSelection: true,\n    enableFillHandle: true,\n    fillOperation: (fillOperationParams) => {\n        return 'Foo';\n    }\n}\n"}]},{"type":"element","tagName":"h3","properties":{"id":"filloperationparams","style":"position:relative;"},"children":[{"type":"text","value":"FillOperationParams"},{"type":"element","tagName":"a","properties":{"href":"#filloperationparams","ariaLabel":"filloperationparams permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"FillOperationParams"},"children":[]}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"fillOperation"}]},{"type":"text","value":" callback is provided, the fill handle will always run it. If the current values are not relevant to the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"fillOperation"}]},{"type":"text","value":" function that was provided, "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"false"}]},{"type":"text","value":" should be returned to allow the grid to process the values as it normally would."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below will use the custom "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"fillOperation"}]},{"type":"text","value":" for the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Day of the week"}]},{"type":"text","value":" column, but it will use the default operation for any other column."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Custom Fill Operation","name":"custom-fill-operation","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 560, \"modules\": [\"clientside\", \"range\"] }"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"skipping-columns-in-the-fill-operation","style":"position:relative;"},"children":[{"type":"text","value":"Skipping Columns in the Fill Operation"},{"type":"element","tagName":"a","properties":{"href":"#skipping-columns-in-the-fill-operation","ariaLabel":"skipping columns in the fill operation permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below will use the custom "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"fillOperation"}]},{"type":"text","value":" to prevent values in the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Country"}]},{"type":"text","value":" column from being altered by the Fill Handle."}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"fillOperation"}]},{"type":"text","value":" function returns "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"params.currentCellValue"}]},{"type":"text","value":" that value is not added to the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"params.values"}]},{"type":"text","value":" list. This allows users to skip any cells in the Fill Handle operation."}]}]}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Skipping Columns","name":"skipping-columns","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 560, \"modules\": [\"clientside\", \"range\"] }"},"children":[]}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note","warning"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Non editable cells will "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"not"}]},{"type":"text","value":" be changed by the Fill Handle, so there is no need to add custom logic to skip columns that aren't editable."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"read-only-edit","style":"position:relative;"},"children":[{"type":"text","value":"Read Only Edit"},{"type":"element","tagName":"a","properties":{"href":"#read-only-edit","ariaLabel":"read only edit permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When the grid is in "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/value-setters/#read-only-edit"},"children":[{"type":"text","value":"Read Only Edit"}]},{"type":"text","value":" mode the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Fill Handle"}]},{"type":"text","value":" will not update the data inside the grid. Instead the grid fires "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellEditRequest"}]},{"type":"text","value":" events allowing the application to process the update request."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-events/events.json","section":"editing","names":"[\"cellEditRequest\"]"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below will show how to update cell value combining the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Fill Handle"}]},{"type":"text","value":" with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"readOnlyEdit=true"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Fill Handle - ReadOnlyEdit","name":"read-only-edit","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 560, \"modules\": [\"clientside\", \"range\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"suppressing-the-fill-handle","style":"position:relative;"},"children":[{"type":"text","value":"Suppressing the Fill Handle"},{"type":"element","tagName":"a","properties":{"href":"#suppressing-the-fill-handle","ariaLabel":"suppressing the fill handle permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Fill Handle can be disabled on a per column basis by setting the column definition property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressFillHandle"}]},{"type":"text","value":" to true ."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the example below, please note that the Fill Handle is disabled in the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Country"}]},{"type":"text","value":" and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":" columns."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Suppress Fill Handle","name":"suppress-fill-handle","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 560, \"modules\": [\"clientside\", \"range\"] }"},"children":[]}]}]},"frontmatter":{"title":"Fill Handle","version":null,"enterprise":true,"sideMenu":null,"description":null},"headings":[{"id":"enabling-the-fill-handle","depth":2,"value":"Enabling the Fill Handle"},{"id":"default-fill-handle","depth":2,"value":"Default Fill Handle"},{"id":"single-cell","depth":3,"value":"Single Cell"},{"id":"multi-cell","depth":3,"value":"Multi Cell"},{"id":"range-reduction","depth":3,"value":"Range Reduction"},{"id":"preventing-range-reduction","depth":2,"value":"Preventing Range Reduction"},{"id":"fill-handle-axis","depth":2,"value":"Fill Handle Axis"},{"id":"custom-user-function","depth":2,"value":"Custom User Function"},{"id":"filloperationparams","depth":3,"value":"FillOperationParams"},{"id":"skipping-columns-in-the-fill-operation","depth":3,"value":"Skipping Columns in the Fill Operation"},{"id":"read-only-edit","depth":2,"value":"Read Only Edit"},{"id":"suppressing-the-fill-handle","depth":2,"value":"Suppressing the Fill Handle"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"javascript","srcPath":"/range-selection-fill-handle","pageName":"range-selection-fill-handle"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}