-
+
+
-
+
-
+
-
+
-
-
+
##### Vue
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
##### React
-
- import React from 'react';
- import 'devextreme/dist/css/dx.fluent.blue.light.css';
-
- import {
- DataGrid,
- Column,
- // ...
- RequiredRule,
- Editing
- } from 'devextreme-react/data-grid';
+
+ import { DataGrid, Editing, Column, RequiredRule } from 'devextreme-react/data-grid';
function App() {
return (
-
-
- {/* ... */}
-
-
-
-
-
-
-
-
-
-
-
-
- {/* ... */}
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* ... */}
+
);
}
- export default App;
-
---
-Run the code and click the Edit button in any row. This invokes a pop-up window that contains an edit form. When you clear the Full Name text box on this form, the following validation error is shown: *"Full Name is required"*.
+Read Tutorial: DataGrid - Editing
-To learn how to validate unchanged cells with a button click, refer to the following example:
+To implement validation for unchanged cells using a custom toolbar button, refer to the following example:
#include btn-open-github with {
href: "https://github.com/DevExpress-Examples/devextreme-data-grid-validate-unchanged-cells"
diff --git a/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/50 Select Records.md b/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/50 Select Records.md
index a9469b33b3..da70a3128b 100644
--- a/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/50 Select Records.md
+++ b/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/50 Select Records.md
@@ -1,23 +1,21 @@
-The DataGrid supports single and multiple record selection modes. Use the **selection**.[mode](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/selection/mode.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/selection/#mode') property to specify the mode.
+DataGrid supports single and multiple selection. To enable this capability, configure the **selection**.[mode](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/selection/mode.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/selection/#mode') property.
-You can obtain the selected record's data in the [onSelectionChanged](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/onSelectionChanged.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onSelectionChanged') function. In the code below, this function displays the selected employee under the DataGrid:
+To obtain selected records at runtime, define [onSelectionChanged](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/onSelectionChanged.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onSelectionChanged'). This tutorial configures **onSelectionChanged** to display selected employee names in a `` element outside of the component:
---
##### jQuery
- $(function() {
- $("#dataGrid").dxDataGrid({
- // ...
- selection: { mode: "single" },
- onSelectionChanged: function(e) {
- e.component.byKey(e.currentSelectedRowKeys[0]).done(employee => {
- if(employee) {
- $("#selected-employee").text(`Selected employee: ${employee.FullName}`);
- }
- });
- },
- });
+ $("#dataGrid").dxDataGrid({
+ selection: { mode: "single" },
+ onSelectionChanged: function(e) {
+ e.component.byKey(e.currentSelectedRowKeys[0]).done(employee => {
+ if(employee) {
+ $("#selected-employee").text(`Selected employee: ${employee.FullName}`);
+ }
+ });
+ },
+ // ...
});
@@ -31,52 +29,57 @@ You can obtain the selected record's data in the [onSelectionChanged](/api-refer