Your search did not match any results.

Export Multiple Grids

This demo shows two DataGrids in different tabs. Click the Export multiple grids button to export two grids and arrange them on different pages of the PDF document.

To implement this functionality, call the exportDataGrid(options) methods in a chain of Promises, one after another. Use the jsPDF.addPage() method to add a page in the PDF document.

You can use the customizeCell function to customize cell appearance in the PDF document. In this demo, the customizeCell function highlights alternate (even) rows.

Prev Demo
Next Demo
Backend API
@section ExternalDependencies { <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> <script> window.jsPDF = window.jspdf.jsPDF; </script> } <div id="exportContainer"> @(Html.DevExtreme().Button() .Text("Export multiple grids") .Icon("exportpdf") .OnClick("exportGrids")) </div> @(Html.DevExtreme().TabPanel() .ID("tabPanel") .DataSource(new[] { new { text = "Price" }, new { text = "Rating" } }) .ItemTemplate(new JS("tabPanelTemplate")) .ItemTitleTemplate(@<text><span class="dx-tab-text"><%- text %></span></text>) .DeferRendering(false)) <script> var priceCaption = "Price"; var ratingCaption = "Rating"; function tabPanelTemplate(itemData, itemIndex, itemElement) { if (itemData.text === priceCaption) { var $gridContainer = $("<div id='priceDataGrid'>"); itemElement.append($gridContainer); $gridContainer.dxDataGrid({ width: "100%", columns: [ { dataField: "Product_ID", caption: "ID", width: 50 }, { dataField: "Product_Name", caption: "Name" }, { dataField: "Product_Sale_Price", caption: "Sale Price", dataType: "number", format: "currency" }, { dataField: "Product_Retail_Price", caption: "Retail Price", dataType: "number", format: "currency" } ], showBorders: true, rowAlternationEnabled: true, dataSource: { store: { type: "odata", version: 2, url: "https://js.devexpress.com/Demos/DevAV/odata/Products", key: "Product_ID" }, select: ["Product_ID", "Product_Name", "Product_Sale_Price", "Product_Retail_Price"], filter: ["Product_ID", "<", 10] } }); } if (itemData.text === ratingCaption) { var $gridContainer = $("<div id='ratingDataGrid'>"); itemElement.append($gridContainer); $gridContainer.dxDataGrid({ width: "100%", columns: [ { dataField: "Product_ID", caption: "ID", width: 50 }, { dataField: "Product_Name", caption: "Name" }, { dataField: "Product_Consumer_Rating", caption: "Rating" }, { dataField: "Product_Category", caption: "Category" } ], showBorders: true, rowAlternationEnabled: true, dataSource: { store: { type: "odata", version: 2, url: "https://js.devexpress.com/Demos/DevAV/odata/Products", key: 'Product_ID', }, select: ["Product_ID", "Product_Name", "Product_Consumer_Rating", "Product_Category"], filter: ["Product_ID", "<", 10] } }); } } function setAlternatingRowsBackground(dataGrid, gridCell, pdfCell) { if (gridCell.rowType === 'data') { const rowIndex = dataGrid.getRowIndexByKey(gridCell.data.Product_ID); if (rowIndex % 2 === 0) { pdfCell.backgroundColor = '#D3D3D3'; } } } function exportGrids() { const doc = new jsPDF(); const priceDataGrid = $("#priceDataGrid").dxDataGrid("instance"); DevExpress.pdfExporter.exportDataGrid({ jsPDFDocument: doc, component: priceDataGrid, topLeft: { x: 7, y: 5 }, columnWidths: [20, 50, 50, 50], customizeCell: ({ gridCell, pdfCell }) => { setAlternatingRowsBackground(priceDataGrid, gridCell, pdfCell); }, }).then(() => { doc.addPage(); const ratingDataGrid = $("#ratingDataGrid").dxDataGrid("instance"); DevExpress.pdfExporter.exportDataGrid({ jsPDFDocument: doc, component: ratingDataGrid, topLeft: { x: 7, y: 5 }, columnWidths: [20, 50, 50, 50], customizeCell: ({ gridCell, pdfCell }) => { setAlternatingRowsBackground(ratingDataGrid, gridCell, pdfCell); }, }).then(() => { doc.save('MultipleGrids.pdf'); }); }); } </script>
using DevExtreme.MVC.Demos.Models; using DevExtreme.MVC.Demos.Models.DataGrid; using DevExtreme.MVC.Demos.Models.SampleData; using System; using System.Linq; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class DataGridController : Controller { public ActionResult PDFExportMultipleGrids() { return View(); } } }
#priceDataGrid, #ratingDataGrid { padding: 10px; } #exportContainer { text-align: right; } #tabPanel { padding-top: 10px; }