Apply suggestions from code review

Co-authored-by: dmitry-eliseev-devexpress <[email protected]>

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.
+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.

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
         }
     }
 

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);