DataGrid Excel Export: Add Async customizeCell Info

api-reference/50 Common/Object Structures/ExcelExportDataGridProps/customizeCell.md

@@ -4,28 +4,30 @@ type: function(options)
 ---
 ---
 ##### shortDescription
-Customizes an Excel cell after creation.
+Customizes Excel cells after creation.
 
 ##### param(options): Object
-An object passed to this callback function.
+**customizeCell** options.
 
 ##### field(options.excelCell): Object
-An DevExtreme ExcelJS object that describes an Excel cell. Use the object's properties to customize the cell. For information on these properties, refer to the following DevExtreme ExcelJS documentation sections:
-
-- <a href="https://github.com/DevExpress/devextreme-exceljs-fork#value-types" target="_blank">value</a>
-- <a href="https://github.com/DevExpress/devextreme-exceljs-fork#alignment" target="_blank">alignment</a>
-- <a href="https://github.com/DevExpress/devextreme-exceljs-fork#borders" target="_blank">border</a>
-- <a href="https://github.com/DevExpress/devextreme-exceljs-fork#fills" target="_blank">fill</a>
-- <a href="https://github.com/DevExpress/devextreme-exceljs-fork#rich-text" target="_blank">richText</a>
-- <a href="https://github.com/DevExpress/devextreme-exceljs-fork#fonts" target="_blank">font</a>
-- <a href="https://github.com/DevExpress/devextreme-exceljs-fork#number-formats" target="_blank">numFmt</a>
+An Excel cell.
 
 ##### field(options.gridCell): ExcelDataGridCell
 A DataGrid cell.
 
 ---
 
-The following code illustrates how to customize <a href="https://github.com/DevExpress/devextreme-exceljs-fork#fonts" target="_blank">font</a> and <a href="https://github.com/DevExpress/devextreme-exceljs-fork#alignment" target="_blank">alignment</a> in cells whose [rowType](/api-reference/10%20UI%20Components/dxDataGrid/6%20Row/rowType.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Row/#rowType') equals *"data"*:
+DevExtreme ExcelJS allows you to customize the following Excel cell properties:
+
+- [value](https://github.com/DevExpress/devextreme-exceljs-fork#value-types)
+- [alignment](https://github.com/DevExpress/devextreme-exceljs-fork#alignment)
+- [border](https://github.com/DevExpress/devextreme-exceljs-fork#borders)
+- [fill](https://github.com/DevExpress/devextreme-exceljs-fork#fills)
+- [richText](https://github.com/DevExpress/devextreme-exceljs-fork#rich-text)
+- [font](https://github.com/DevExpress/devextreme-exceljs-fork#fonts)
+- [numFmt](https://github.com/DevExpress/devextreme-exceljs-fork#number-formats)
+
+The following code snippet checks DataGrid cell [rowType](/Documentation/ApiReference/UI_Components/dxDataGrid/Row/#rowType) values to customize Excel cells in data rows:
 
 ---
 ##### jQuery
@@ -234,7 +236,43 @@ The following code illustrates how to customize <a href="https://github.com/DevE
     }
     export default App;
 
---- 
+---
+
+[note]
+
+To integrate asynchronous operations within **customizeCell**, follow these steps:
+
+1. Define a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) array in the [onExporting](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onExporting) handler.
+2. In **customizeCell**, add your asynchronous operations to the **Promise** array.
+3. In [exportDataGrid](/Documentation/ApiReference/Common/Utils/excelExporter/#exportDataGridoptions).**then()**, save the exported file within a [Promise.all()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all).**then()** callback. Pass the promise array defined in **onExporting** as the **Promise**.**all()** parameter as follows:
+
+        onExporting(e) {
+            const workbook = new Workbook();
+            const worksheet = workbook.addWorksheet('Companies');
+
+            let promiseArray = [];
+
+            exportDataGrid({
+                component: e.component,
+                worksheet: worksheet,
+                topLeftCell: { row: 2, column: 2 },
+                customizeCell: function(options) {
+                    const asyncOperation = new Promise((resolve, reject) => {
+                        // ...
+                    });
+
+                    promiseArray.push(asyncOperation);
+                }
+            }).then(() => {
+                Promise.all(promiseArray).then(() => {
+                    workbook.xlsx.writeBuffer().then(function(buffer) {
+                        saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Companies.xlsx");
+                    });
+                });
+            });
+        }
+
+[/note]
 
 #include common-demobutton-named with {
     name: "Cell Customization",