From 4ed6a7f13d72726a349c2c56c7a8b08a77566965 Mon Sep 17 00:00:00 2001 From: "assylbek.danyshbek" Date: Fri, 31 Jul 2026 14:58:16 +0500 Subject: [PATCH] Update README --- README.md | 33 +++++++++++++++++---------------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 46374db..311e6ac 100644 --- a/README.md +++ b/README.md @@ -4,47 +4,48 @@ [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives) -# DevExtreme Examples Template +# DevExtreme DataGrid and Chart - Export to PDF and Excel -This is the repository template for creating new examples. +This example demonstrates how to export a DataGrid and a related Chart together in PDF and Excel files. -![Example image](images/image-template.png) +![Example image](images/export-datagrid-chart.png) -Use **DevExtreme _Product_ - _Task_** template for a title. +The main approach is to export both UI components in a coordinated flow: the DataGrid is exported with DevExtreme exporters, and the Chart is converted to an image and inserted into the same output document. -Describe the solved task in this section. +For PDF export, the example uses [pdfExporter.exportDataGrid](https://js.devexpress.com/jQuery/Documentation/ApiReference/Common/Utils/pdfExporter/) to render the DataGrid with jsPDF and then draws the Chart image below the exported grid so both visuals are included in one file. -Put a screenshot/gif that illustrates the result here. - -Then, add implementation details (steps, code snippets, and other technical information in a free form), or add a link to an existing document with implementation details. +For Excel export, the example uses [excelExporter.exportDataGrid](https://js.devexpress.com/jQuery/Documentation/ApiReference/Common/Utils/excelExporter/) with ExcelJS, inserts the Chart image into the worksheet, and places it at a configurable row/column offset so you can control layout relative to the grid. ## Files to Review - **Angular** - [app.component.html](Angular/src/app/app.component.html) - [app.component.ts](Angular/src/app/app.component.ts) + - [grid-export.ts](Angular/src/app/grid-export.ts) - **React** - [App.tsx](React/src/App.tsx) + - [useExportDashboard.ts](React/src/hooks/useExportDashboard.ts) - **Vue** - - [App.vue](Vue/src/App.vue) - - [Home.vue](Vue/src/components/HomeContent.vue) + - [HomeContent.vue](Vue/src/components/HomeContent.vue) + - [useExportDashboard.ts](Vue/src/composables/useExportDashboard.ts) - **jQuery** - [index.html](jQuery/src/index.html) - [index.js](jQuery/src/index.js) + - [export-utils.js](jQuery/src/export-utils.js) - **ASP.NET Core** - [Index.cshtml](ASP.NET%20Core/Views/Home/Index.cshtml) ## Documentation -- link -- link -- ... +- [DataGrid - Export](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/export/) +- [Chart - Export](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxChart/Configuration/export/) +- [pdfExporter - exportDataGrid](https://js.devexpress.com/Documentation/ApiReference/Common/Utils/pdfExporter/) +- [excelExporter - exportDataGrid](https://js.devexpress.com/Documentation/ApiReference/Common/Utils/excelExporter/) ## More Examples -- link -- link -- ... +- [DataGrid - ExcelJS Cell Customization Demo](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/ExcelJSCellCustomization/) +- [DataGrid - PDF Cell Customization Demo](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/PDFCellCustomization/) ## Does This Example Address Your Development Requirements/Objectives?