From b5d56311f4e43e90d94acab5e76212d2fee88e10 Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Fri, 15 Sep 2023 13:27:34 +0400 Subject: [PATCH 1/8] DataGrid: add Custom keyboard navigation topic --- .../15 Keyboard Navigation.md | 2 +- .../00 Custom Keyboard Navigation.md | 1 + .../05 Change the Default Focused Cell.md | 90 +++++++++++++++ .../10 Focus Cells Programatically.md | 7 ++ .../15 Override and Create Keys.md | 105 ++++++++++++++++++ 5 files changed, 204 insertions(+), 1 deletion(-) create mode 100644 concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/00 Custom Keyboard Navigation.md create mode 100644 concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/05 Change the Default Focused Cell.md create mode 100644 concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md create mode 100644 concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/15 Override and Create Keys.md diff --git a/concepts/05 UI Components/DataGrid/05 Accessibility/15 Keyboard Navigation.md b/concepts/05 UI Components/DataGrid/05 Accessibility/15 Keyboard Navigation.md index 86575b4687..68d0a2a32c 100644 --- a/concepts/05 UI Components/DataGrid/05 Accessibility/15 Keyboard Navigation.md +++ b/concepts/05 UI Components/DataGrid/05 Accessibility/15 Keyboard Navigation.md @@ -103,4 +103,4 @@ A user can use the following keys to interact with the DataGrid component: -You can override these shortcuts or create your own shortcuts using the [onKeyDown](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/onKeyDown.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onKeyDown') event handler. +You can override these shortcuts or create your own. Refer to the following help topic for more information: [Custom Keyboard Navigation](/Documentation/Guide/UI_Components/DataGrid/Custom_Keyboard_Navigation/). diff --git a/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/00 Custom Keyboard Navigation.md b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/00 Custom Keyboard Navigation.md new file mode 100644 index 0000000000..da8175c3a6 --- /dev/null +++ b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/00 Custom Keyboard Navigation.md @@ -0,0 +1 @@ +You can use the [keyboardNavigation](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/keyboardNavigation/) property to configure DataGrid [keyboard navigation](/Documentation/Guide/UI_Components/DataGrid/Accessibility/#Keyboard_Navigation). If the default behavior does not meet your requirements, implement a custom one. \ No newline at end of file diff --git a/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/05 Change the Default Focused Cell.md b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/05 Change the Default Focused Cell.md new file mode 100644 index 0000000000..90c8d185e6 --- /dev/null +++ b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/05 Change the Default Focused Cell.md @@ -0,0 +1,90 @@ +To specify which cell should be focused next when a user navigates through DataGrid, use the [onFocusedCellChanging](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onFocusedCellChanging) function. The code below uses `newColumnIndex` to set the column index of the next focused cell. + +--- +##### jQuery + + + $("#dataGridContainer").dxDataGrid({ + // ... + onFocusedCellChanging: function (e) { + if (e.columns[e.newColumnIndex].dataField === "myField") { // Checks if the next focused cell will be in the 'myField' column + e.newColumnIndex++; // If so, proceed to the next column + } + } + }); + +##### Angular + + + + + + + import { Component } from '@angular/core'; + + @Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] + }) + + export class AppComponent { + onFocusedCellChanging(e) { + if (e.columns[e.newColumnIndex].dataField === "myField") { // Checks if the next focused cell will be in the 'myField' column + e.newColumnIndex++; // If so, proceed to the next column + } + } + } + +##### Vue + + + + + + +##### React + + + import React from 'react'; + import 'devextreme/dist/css/dx.light.css'; + import DataGrid from 'devextreme-react/data-grid'; + + const onFocusedCellChanging = (e) => { + if (e.columns[e.newColumnIndex].dataField === "myField") { // Checks if the next focused cell will be in the 'myField' column + e.newColumnIndex++; // If so, proceed to the next column + } + } + + function App() { + return ( + + + ); + } + export default App; + +--- diff --git a/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md new file mode 100644 index 0000000000..fce500027d --- /dev/null +++ b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md @@ -0,0 +1,7 @@ +You can use the following methods to focus a specific cell: + +- [focus](/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#focuselement) +Allows you to set focus on a cell. You can use the [getCellElement](/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#getCellElementrowIndex_dataField) method to get elements of required cells. + +- [editCell](/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#editCellrowIndex_dataField) +Switches a cell to the editing state and moves the focus to this cell. \ No newline at end of file diff --git a/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/15 Override and Create Keys.md b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/15 Override and Create Keys.md new file mode 100644 index 0000000000..55204f02f9 --- /dev/null +++ b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/15 Override and Create Keys.md @@ -0,0 +1,105 @@ +The [onKeyDown](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onKeyDown) event handler allows you to track keys used while the UI component is in focus. You can use it to override the default keyboard support shortcuts, implement your own shortcuts, or extend existing ones. + +The following example shows how to override the **Space** key to switch a cell in cell/batch mode to the editing state instead of the current row being selected: + +--- +##### jQuery + + + $("#dataGridContainer").dxDataGrid({ + // ... + onKeyDown: function (e) { + if (e.event.keyCode === 32) { // Space key + e.event.preventDefault(); // Prevent the default behavior + const focusedRowIndex = e.component.option("focusedRowIndex"); + const focusedColumnIndex = e.component.option("focusedColumnIndex"); + e.component.editCell(focusedRowIndex, focusedColumnIndex); + } + } + }) + +##### Angular + + + + + + + import { Component } from '@angular/core'; + + @Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] + }) + + export class AppComponent { + onKeyDown(e) { + if (e.event.keyCode === 32) { // Space key + e.event.preventDefault(); // Prevent the default behavior + const focusedRowIndex = e.component.option("focusedRowIndex"); + const focusedColumnIndex = e.component.option("focusedColumnIndex"); + e.component.editCell(focusedRowIndex, focusedColumnIndex); + } + } + } + +##### Vue + + + + + + +##### React + + + import React from 'react'; + import 'devextreme/dist/css/dx.light.css'; + import DataGrid from 'devextreme-react/data-grid'; + + const onKeyDown = (e) => { + if (e.event.keyCode === 32) { // Space key + e.event.preventDefault(); // Prevent the default behavior + const focusedRowIndex = e.component.option("focusedRowIndex"); + const focusedColumnIndex = e.component.option("focusedColumnIndex"); + e.component.editCell(focusedRowIndex, focusedColumnIndex); + } + } + + function App() { + return ( + + + ); + } + + export default App; + +--- \ No newline at end of file From f080a34b9c8215538bc4f71d24975987779f610a Mon Sep 17 00:00:00 2001 From: Vlada Skorohodova <94827090+vladaskorohodova@users.noreply.github.com> Date: Fri, 15 Sep 2023 14:39:29 +0400 Subject: [PATCH 2/8] Apply suggestions from code review Co-authored-by: dmitry-eliseev-devexpress <81766219+dmitry-eliseev-devexpress@users.noreply.github.com> --- .../00 Custom Keyboard Navigation.md | 2 +- .../05 Change the Default Focused Cell.md | 18 +++++++++--------- .../15 Override and Create Keys.md | 18 +++++++++--------- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/00 Custom Keyboard Navigation.md b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/00 Custom Keyboard Navigation.md index da8175c3a6..c532f7259f 100644 --- a/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/00 Custom Keyboard Navigation.md +++ b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/00 Custom Keyboard Navigation.md @@ -1 +1 @@ -You can use the [keyboardNavigation](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/keyboardNavigation/) property to configure DataGrid [keyboard navigation](/Documentation/Guide/UI_Components/DataGrid/Accessibility/#Keyboard_Navigation). If the default behavior does not meet your requirements, implement a custom one. \ No newline at end of file +You can use the [keyboardNavigation](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/keyboardNavigation/) property to configure DataGrid [keyboard navigation](/Documentation/Guide/UI_Components/DataGrid/Accessibility/#Keyboard_Navigation). If the default behavior does not meet your requirements, you can change it. \ No newline at end of file diff --git a/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/05 Change the Default Focused Cell.md b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/05 Change the Default Focused Cell.md index 90c8d185e6..42c923e3c0 100644 --- a/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/05 Change the Default Focused Cell.md +++ b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/05 Change the Default Focused Cell.md @@ -1,4 +1,4 @@ -To specify which cell should be focused next when a user navigates through DataGrid, use the [onFocusedCellChanging](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onFocusedCellChanging) function. The code below uses `newColumnIndex` to set the column index of the next focused cell. +To specify cell focus order when a user navigates through DataGrid, call the [onFocusedCellChanging](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onFocusedCellChanging) function. The code below uses `newColumnIndex` to set the column index of the next focused cell. --- ##### jQuery @@ -7,8 +7,8 @@ To specify which cell should be focused next when a user navigates through DataG $("#dataGridContainer").dxDataGrid({ // ... onFocusedCellChanging: function (e) { - if (e.columns[e.newColumnIndex].dataField === "myField") { // Checks if the next focused cell will be in the 'myField' column - e.newColumnIndex++; // If so, proceed to the next column + if (e.columns[e.newColumnIndex].dataField === "myField") { // Checks if the next focused cell is in the 'myField' column + e.newColumnIndex++; // Navigates to the next column } } }); @@ -31,8 +31,8 @@ To specify which cell should be focused next when a user navigates through DataG export class AppComponent { onFocusedCellChanging(e) { - if (e.columns[e.newColumnIndex].dataField === "myField") { // Checks if the next focused cell will be in the 'myField' column - e.newColumnIndex++; // If so, proceed to the next column + if (e.columns[e.newColumnIndex].dataField === "myField") { // Checks if the next focused cell is in the 'myField' column + e.newColumnIndex++; // Navigates to the next column } } } @@ -57,8 +57,8 @@ To specify which cell should be focused next when a user navigates through DataG // ... methods: { onFocusedCellChanging(e) { - if (e.columns[e.newColumnIndex].dataField === "myField") { // Checks if the next focused cell will be in the 'myField' column - e.newColumnIndex++; // If so, proceed to the next column + if (e.columns[e.newColumnIndex].dataField === "myField") { // Checks if the next focused cell is in the 'myField' column + e.newColumnIndex++; // Navigates to the next column } } } @@ -73,8 +73,8 @@ To specify which cell should be focused next when a user navigates through DataG import DataGrid from 'devextreme-react/data-grid'; const onFocusedCellChanging = (e) => { - if (e.columns[e.newColumnIndex].dataField === "myField") { // Checks if the next focused cell will be in the 'myField' column - e.newColumnIndex++; // If so, proceed to the next column + if (e.columns[e.newColumnIndex].dataField === "myField") { // Checks if the next focused cell is in the 'myField' column + e.newColumnIndex++; // Navigates to the next column } } diff --git a/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/15 Override and Create Keys.md b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/15 Override and Create Keys.md index 55204f02f9..effb79ecf2 100644 --- a/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/15 Override and Create Keys.md +++ b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/15 Override and Create Keys.md @@ -1,6 +1,6 @@ The [onKeyDown](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onKeyDown) event handler allows you to track keys used while the UI component is in focus. You can use it to override the default keyboard support shortcuts, implement your own shortcuts, or extend existing ones. -The following example shows how to override the **Space** key to switch a cell in cell/batch mode to the editing state instead of the current row being selected: +The following example shows how to override the **Space Bar** keystroke so it switches a cell in cell/batch mode to the editing state instead of a current row select operation: --- ##### jQuery @@ -9,8 +9,8 @@ The following example shows how to override the **Space** key to switch a cell i $("#dataGridContainer").dxDataGrid({ // ... onKeyDown: function (e) { - if (e.event.keyCode === 32) { // Space key - e.event.preventDefault(); // Prevent the default behavior + if (e.event.keyCode === 32) { // Checks if the space bar key is pressed + e.event.preventDefault(); // Prevents the default behavior const focusedRowIndex = e.component.option("focusedRowIndex"); const focusedColumnIndex = e.component.option("focusedColumnIndex"); e.component.editCell(focusedRowIndex, focusedColumnIndex); @@ -36,8 +36,8 @@ The following example shows how to override the **Space** key to switch a cell i export class AppComponent { onKeyDown(e) { - if (e.event.keyCode === 32) { // Space key - e.event.preventDefault(); // Prevent the default behavior + if (e.event.keyCode === 32) { // Checks if the space bar key is pressed + e.event.preventDefault(); // Prevents the default behavior const focusedRowIndex = e.component.option("focusedRowIndex"); const focusedColumnIndex = e.component.option("focusedColumnIndex"); e.component.editCell(focusedRowIndex, focusedColumnIndex); @@ -65,8 +65,8 @@ The following example shows how to override the **Space** key to switch a cell i // ... methods: { onKeyDown(e) { - if (e.event.keyCode === 32) { // Space key - e.event.preventDefault(); // Prevent the default behavior + if (e.event.keyCode === 32) { // Checks if the space bar key is pressed + e.event.preventDefault(); // Prevents the default behavior const focusedRowIndex = e.component.option("focusedRowIndex"); const focusedColumnIndex = e.component.option("focusedColumnIndex"); e.component.editCell(focusedRowIndex, focusedColumnIndex); @@ -84,8 +84,8 @@ The following example shows how to override the **Space** key to switch a cell i import DataGrid from 'devextreme-react/data-grid'; const onKeyDown = (e) => { - if (e.event.keyCode === 32) { // Space key - e.event.preventDefault(); // Prevent the default behavior + if (e.event.keyCode === 32) { // Specifies if the space bar key is pressed + e.event.preventDefault(); // Prevents the default behavior const focusedRowIndex = e.component.option("focusedRowIndex"); const focusedColumnIndex = e.component.option("focusedColumnIndex"); e.component.editCell(focusedRowIndex, focusedColumnIndex); From b408ee82bbb4d88e0e9c8281f70b11a0a0207488 Mon Sep 17 00:00:00 2001 From: Vlada Skorohodova <94827090+vladaskorohodova@users.noreply.github.com> Date: Fri, 15 Sep 2023 15:58:26 +0400 Subject: [PATCH 3/8] Update concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md Co-authored-by: dmitry-eliseev-devexpress <81766219+dmitry-eliseev-devexpress@users.noreply.github.com> --- .../10 Focus Cells Programatically.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md index fce500027d..082423c9b3 100644 --- a/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md +++ b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md @@ -1,4 +1,4 @@ -You can use the following methods to focus a specific cell: +You can call the following methods to focus a cell: - [focus](/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#focuselement) Allows you to set focus on a cell. You can use the [getCellElement](/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#getCellElementrowIndex_dataField) method to get elements of required cells. From 45b023c8187d377d0996eb37d5a88386d4c0ee76 Mon Sep 17 00:00:00 2001 From: Vlada Skorohodova <94827090+vladaskorohodova@users.noreply.github.com> Date: Fri, 15 Sep 2023 15:58:47 +0400 Subject: [PATCH 4/8] Update concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md Co-authored-by: dmitry-eliseev-devexpress <81766219+dmitry-eliseev-devexpress@users.noreply.github.com> --- .../10 Focus Cells Programatically.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md index 082423c9b3..2db4f09a72 100644 --- a/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md +++ b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md @@ -4,4 +4,4 @@ You can call the following methods to focus a cell: Allows you to set focus on a cell. You can use the [getCellElement](/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#getCellElementrowIndex_dataField) method to get elements of required cells. - [editCell](/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#editCellrowIndex_dataField) -Switches a cell to the editing state and moves the focus to this cell. \ No newline at end of file +Switches a cell to the editing state and moves focus to this cell. \ No newline at end of file From 4cf380b809521da0469dcacbcc6793e5340c7990 Mon Sep 17 00:00:00 2001 From: Vlada Skorohodova <94827090+vladaskorohodova@users.noreply.github.com> Date: Fri, 15 Sep 2023 15:59:02 +0400 Subject: [PATCH 5/8] Update concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/15 Override and Create Keys.md Co-authored-by: dmitry-eliseev-devexpress <81766219+dmitry-eliseev-devexpress@users.noreply.github.com> --- .../15 Override and Create Keys.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/15 Override and Create Keys.md b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/15 Override and Create Keys.md index effb79ecf2..d320d2945b 100644 --- a/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/15 Override and Create Keys.md +++ b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/15 Override and Create Keys.md @@ -1,4 +1,4 @@ -The [onKeyDown](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onKeyDown) event handler allows you to track keys used while the UI component is in focus. You can use it to override the default keyboard support shortcuts, implement your own shortcuts, or extend existing ones. +The [onKeyDown](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onKeyDown) event handler allows you to track pressed keystrokes while the UI component has focus. You can use the event handler to override the default keyboard shortcuts, implement custom keystrokes, or extend existing ones. The following example shows how to override the **Space Bar** keystroke so it switches a cell in cell/batch mode to the editing state instead of a current row select operation: From b1684388ffbaa538d47f06b64363a50f53a30758 Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Fri, 15 Sep 2023 16:02:49 +0400 Subject: [PATCH 6/8] Update after review --- .../10 Focus Cells Programatically.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md index 2db4f09a72..bbe92cdb28 100644 --- a/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md +++ b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md @@ -1,7 +1,7 @@ You can call the following methods to focus a cell: - [focus](/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#focuselement) -Allows you to set focus on a cell. You can use the [getCellElement](/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#getCellElementrowIndex_dataField) method to get elements of required cells. +Allows you to move focus to a cell. Call the [getCellElement](/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#getCellElementrowIndex_dataField) method to obtain cell container. Then, use the cell container as an argument in the **focus** method. - [editCell](/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#editCellrowIndex_dataField) Switches a cell to the editing state and moves focus to this cell. \ No newline at end of file From 67236f0de29914cfe29eddf168aadaf0d6d5a985 Mon Sep 17 00:00:00 2001 From: Vlada Skorohodova <94827090+vladaskorohodova@users.noreply.github.com> Date: Mon, 18 Sep 2023 11:16:29 +0400 Subject: [PATCH 7/8] Update concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md Co-authored-by: dmitry-eliseev-devexpress <81766219+dmitry-eliseev-devexpress@users.noreply.github.com> --- .../10 Focus Cells Programatically.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md index bbe92cdb28..963306208f 100644 --- a/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md +++ b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md @@ -1,7 +1,7 @@ You can call the following methods to focus a cell: - [focus](/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#focuselement) -Allows you to move focus to a cell. Call the [getCellElement](/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#getCellElementrowIndex_dataField) method to obtain cell container. Then, use the cell container as an argument in the **focus** method. +Allows you to move focus to a cell. Call the [getCellElement](/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#getCellElementrowIndex_dataField) method to obtain a cell container. Then, pass the container to the **focus** method as an argument to focus the target cell. - [editCell](/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#editCellrowIndex_dataField) Switches a cell to the editing state and moves focus to this cell. \ No newline at end of file From 34079933b26824e36e608b21293a31aa40628edf Mon Sep 17 00:00:00 2001 From: Vlada Skorohodova <94827090+vladaskorohodova@users.noreply.github.com> Date: Mon, 18 Sep 2023 13:58:43 +0400 Subject: [PATCH 8/8] Apply suggestions from code review Co-authored-by: DirkPieterse --- .../10 Focus Cells Programatically.md | 2 +- .../15 Override and Create Keys.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md index 963306208f..31b23cdafa 100644 --- a/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md +++ b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/10 Focus Cells Programatically.md @@ -4,4 +4,4 @@ You can call the following methods to focus a cell: Allows you to move focus to a cell. Call the [getCellElement](/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#getCellElementrowIndex_dataField) method to obtain a cell container. Then, pass the container to the **focus** method as an argument to focus the target cell. - [editCell](/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#editCellrowIndex_dataField) -Switches a cell to the editing state and moves focus to this cell. \ No newline at end of file +Switches a cell to the edit state and moves focus to this cell. \ No newline at end of file diff --git a/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/15 Override and Create Keys.md b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/15 Override and Create Keys.md index d320d2945b..7f4e96ceb4 100644 --- a/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/15 Override and Create Keys.md +++ b/concepts/05 UI Components/DataGrid/70 Custom Keyboard Navigation/15 Override and Create Keys.md @@ -1,6 +1,6 @@ The [onKeyDown](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onKeyDown) event handler allows you to track pressed keystrokes while the UI component has focus. You can use the event handler to override the default keyboard shortcuts, implement custom keystrokes, or extend existing ones. -The following example shows how to override the **Space Bar** keystroke so it switches a cell in cell/batch mode to the editing state instead of a current row select operation: +The following example shows how to override the **Space Bar** keystroke so it switches a cell in cell/batch mode to the edit state instead of a current row select operation: --- ##### jQuery