Revert "Revert "Revert "Regenerate grids/GridBase without on props (2…

…1), all? events (21) + root (1) = (43)""" This reverts commit 40e8e5d.
mpreyskurantov · Nov 21, 2023 · 01ef9a6 · 01ef9a6
1 parent a15a63b
commit 01ef9a6
Show file tree

Hide file tree

Showing 43 changed files with 1,844 additions and 0 deletions.
diff --git a/...rence/10 UI Components/GridBase/1 Configuration/onAdaptiveDetailRowPreparing.md b/...rence/10 UI Components/GridBase/1 Configuration/onAdaptiveDetailRowPreparing.md
@@ -0,0 +1,164 @@
+---
+id: GridBase.Options.onAdaptiveDetailRowPreparing
+type: function(e)
+default: null
+---
+---
+##### shortDescription
+A function that is executed before an adaptive detail row is rendered.
+
+##### param(e): Object
+Information about the event that caused the function's execution.
+
+##### field(e.component): {WidgetName}
+The UI component's instance.
+
+##### field(e.element): DxElement
+#include common-ref-elementparam with { element: "UI component" }
+
+##### field(e.formOptions): Object
+The properties of the [Form](/api-reference/10%20UI%20Components/dxForm/1%20Configuration '/Documentation/ApiReference/UI_Components/dxForm/Configuration/') UI component.
+
+##### field(e.model): any
+Model data. Available only if you use Knockout.
+
+---
+Adaptive detail rows display information from columns that were hidden when the UI component adapted to the screen or container size. Each adaptive detail row contains the [Form](/api-reference/10%20UI%20Components/dxForm '/Documentation/ApiReference/UI_Components/dxForm/') UI component that you can customize within the **onAdaptiveDetailRowPreparing** function using the **formOptions** object. Refer to the [Form Configuration](/api-reference/10%20UI%20Components/dxForm/1%20Configuration '/Documentation/ApiReference/UI_Components/dxForm/Configuration/') section for details on properties of the Form UI component.
+
+[note]
+
+The following Form properties cannot be specified using **formOptions**:
+
+- [template](/api-reference/10%20UI%20Components/dxForm/5%20Item%20Types/SimpleItem/template.md '/Documentation/ApiReference/UI_Components/dxForm/Item_Types/SimpleItem/#template')        
+- [editorType](/api-reference/10%20UI%20Components/dxForm/5%20Item%20Types/SimpleItem/editorType.md '/Documentation/ApiReference/UI_Components/dxForm/Item_Types/SimpleItem/#editorType')        
+- any [event](/api-reference/10%20UI%20Components/dxForm/4%20Events '/Documentation/ApiReference/UI_Components/dxForm/Events/') handler ([properties](/api-reference/10%20UI%20Components/Widget/1%20Configuration/onContentReady.md '/Documentation/ApiReference/UI_Components/dxForm/Configuration/#onContentReady') whose name starts with *"on..."*)
+
+[/note]
+
+---
+##### jQuery
+
+    <!--JavaScript-->
+    $(function() {
+        $("#{widgetName}Container").dx{WidgetName}({
+            // ...
+            onAdaptiveDetailRowPreparing: function(e) {
+                e.formOptions.colCount = 2;
+                e.formOptions.colCountByScreen = {
+                    xs: 2
+                }
+                e.formOptions.labelLocation = 'left';
+            }
+        })
+    })
+
+##### Angular
+
+    <!--TypeScript-->
+    import { Dx{WidgetName}Module } from "devextreme-angular";
+    // ...
+    export class AppComponent {
+        onAdaptiveDetailRowPreparing(e) {
+            e.formOptions.colCount = 2;
+            e.formOptions.colCountByScreen = {
+                xs: 2
+            }
+            e.formOptions.labelLocation = 'left';
+        }
+    }
+    @NgModule({
+        imports: [
+            // ...
+            Dx{WidgetName}Module
+        ],
+        // ...
+    })
+
+    <!--HTML-->
+    <dx-{widget-name} ...
+        (onAdaptiveDetailRowPreparing)="onAdaptiveDetailRowPreparing($event)">
+    </dx-{widget-name}>
+
+##### Vue
+
+    <!-- tab: App.vue (Options API) -->
+    <template>
+        <Dx{WidgetName}
+            @adaptive-detail-row-preparing="onAdaptiveDetailRowPreparing"
+        />
+    </template>
+
+    <script>
+    import 'devextreme/dist/css/dx.light.css';
+
+    import {WidgetName} from 'devextreme-vue/{widget-name}';
+
+    export default {
+        components: {
+            Dx{WidgetName}
+        },
+        methods: {
+            onAdaptiveDetailRowPreparing(e) {
+                e.formOptions.colCount = 2;
+                e.formOptions.colCountByScreen = {
+                    xs: 2
+                }
+                e.formOptions.labelLocation = 'left';
+            }
+        }
+    }
+    </script>
+
+    <!-- tab: App.vue (Composition API) -->
+    <template>
+        <Dx{WidgetName}
+            @adaptive-detail-row-preparing="onAdaptiveDetailRowPreparing"
+        />
+    </template>
+
+    <script setup>
+    import 'devextreme/dist/css/dx.light.css';
+
+    import {WidgetName} from 'devextreme-vue/{widget-name}';
+
+    const onAdaptiveDetailRowPreparing = (e) => {
+        e.formOptions.colCount = 2;
+        e.formOptions.colCountByScreen = {
+            xs: 2
+        }
+        e.formOptions.labelLocation = 'left';
+    }
+    </script>
+
+##### React
+
+    <!-- tab: App.js -->
+    import { useCallback } from 'react';
+
+    import 'devextreme/dist/css/dx.light.css';
+
+    import {WidgetName} from 'devextreme-react/{widget-name}';
+
+    export default function App() {
+        const onAdaptiveDetailRowPreparing = useCallback((e) => {
+            e.formOptions.colCount = 2;
+            e.formOptions.colCountByScreen = {
+                xs: 2
+            }
+            e.formOptions.labelLocation = 'left';
+        }, []);
+
+        return (
+            <{WidgetName}
+                onAdaptiveDetailRowPreparing={onAdaptiveDetailRowPreparing}
+            />
+        );
+    }
+
+---
+
+#####See Also#####
+- [columnHidingEnabled](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/columnHidingEnabled.md '{basewidgetpath}/Configuration/#columnHidingEnabled')
+- **columns[]**.[hidingPriority](/api-reference/_hidden/GridBaseColumn/hidingPriority.md '{basewidgetpath}/Configuration/columns/#hidingPriority')
+- [Adaptability](/concepts/05%20UI%20Components/DataGrid/15%20Columns/50%20Adaptability '/Documentation/Guide/UI_Components/{WidgetName}/Columns/Adaptability/')
+- [Customize Adaptive Detail Row](/concepts/05%20UI%20Components/DataGrid/15%20Columns/50%20Adaptability/15%20Customize%20Adaptive%20Detail%20Row.md '/Documentation/Guide/UI_Components/DataGrid/Columns/Adaptability/#Customize_Adaptive_Detail_Row')
diff --git a/api-reference/10 UI Components/GridBase/1 Configuration/onDataErrorOccurred.md b/api-reference/10 UI Components/GridBase/1 Configuration/onDataErrorOccurred.md
@@ -0,0 +1,26 @@
+---
+id: GridBase.Options.onDataErrorOccurred
+type: function(e)
+default: null
+---
+---
+##### shortDescription
+A function that is executed when an error occurs in the data source.
+
+##### param(e): Object
+Information on the occurred error.
+
+##### field(e.component): {WidgetName}
+The UI component's instance.
+
+##### field(e.element): DxElement
+#include common-ref-elementparam with { element: "UI component" }
+
+##### field(e.error): Error
+The standard <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error" target="_blank">Error</a> object that defines the error.
+
+##### field(e.model): any
+Model data. Available only if you use Knockout.
+
+---
+Handles errors that might occur in the data source. To obtain a human-readable description of the error in the function, use the **error.message** field.
diff --git a/api-reference/10 UI Components/GridBase/1 Configuration/onEditCanceled.md b/api-reference/10 UI Components/GridBase/1 Configuration/onEditCanceled.md
@@ -0,0 +1,28 @@
+---
+id: GridBase.Options.onEditCanceled
+type: function(e)
+default: null
+---
+---
+##### shortDescription
+A function that is executed after row changes are discarded.
+
+##### param(e): Object
+Information about the event that caused the function's execution.
+
+##### field(e.changes): Array<DataChange>
+Discarded row changes.
+
+##### field(e.component): {WidgetName}
+The UI component's instance.
+
+##### field(e.element): DxElement
+#include common-ref-elementparam with { element: "UI component" }
+
+##### field(e.model): any
+Model data. Available only if Knockout is used.
+
+---
+#include btn-open-demo with {
+    href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/RowEditingAndEditingEvents/"
+}
diff --git a/api-reference/10 UI Components/GridBase/1 Configuration/onEditCanceling.md b/api-reference/10 UI Components/GridBase/1 Configuration/onEditCanceling.md
@@ -0,0 +1,33 @@
+---
+id: GridBase.Options.onEditCanceling
+type: function(e)
+default: null
+---
+---
+##### shortDescription
+A function that is executed when the edit operation is canceled, but row changes are not yet discarded.
+
+##### param(e): Object
+Information about the event that caused the function's execution.
+
+##### field(e.cancel): Boolean
+Set this field to **true** if the row changes should not be discarded.
+
+##### field(e.changes): Array<DataChange>
+Row changes to be discarded.
+
+##### field(e.component): {WidgetName}
+The UI component's instance.
+
+##### field(e.element): DxElement
+#include common-ref-elementparam with { element: "UI component" }
+
+##### field(e.model): any
+Model data. Available only if Knockout is used.
+
+---
+An edit operation can be canceled from the UI (with the Cancel button) or programatically (with the [cancelEditData()](/api-reference/10%20UI%20Components/GridBase/3%20Methods/cancelEditData().md '{basewidgetpath}/Methods/#cancelEditData') method).
+
+#include btn-open-demo with {
+    href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/RowEditingAndEditingEvents/"
+}