Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Your search did not match any results.
Pivot Grid

Web API Service

The PivotGrid can communicate with a Web API service. The quantity of aggregated data is irrelevant when aggregation is performed on the server. For example, the widget works with a million aggregated records in this demo.

To configure access to a Web API service from the client, use the createStore method, which is part of the DevExtreme.AspNet.Data extension. This extension also allows you to configure server-side data processing for DevExtreme widgets.

You should also set the remoteOperations option to true to notify the PivotGrid that data is aggregated on the server.

Copy to CodePen
$(function() { $("#sales").dxPivotGrid({ allowSorting: true, allowSortingBySummary: true, allowFiltering: true, height: 620, showBorders: true, rowHeaderLayout: "tree", scrolling: { mode: "virtual" }, dataSource: { remoteOperations: true, store:{ key: "OrderID", loadUrl: "" }), fields: [{ caption: "Category", dataField: "ProductCategoryName", width: 250, expanded: true, sortBySummaryField: "SalesAmount", sortBySummaryPath: [], sortOrder: "desc", area: "row" }, { caption: "Subcategory", dataField: "ProductSubcategoryName", width: 250, sortBySummaryField: "SalesAmount", sortBySummaryPath: [], sortOrder: "desc", area: "row" }, { caption: "Product", dataField: "ProductName", area: "row", sortBySummaryField: "SalesAmount", sortBySummaryPath: [], sortOrder: "desc", width: 250 }, { caption: "Date", dataField: "DateKey", dataType: "date", area: "column" }, { caption: "Amount", dataField: "SalesAmount", summaryType: "sum", format: "currency", area: "data" }, { caption: "Store", dataField: "StoreName" }, { caption: "Quantity", dataField: "SalesQuantity", summaryType: "sum" }, { caption: "Unit Price", dataField: "UnitPrice", format: "currency", summaryType: "sum" }, { dataField: "Id", visible: false }] } }); });
<!DOCTYPE html> <html xmlns=""> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src=""></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="" /> <link rel="stylesheet" type="text/css" href="" /> <script src=""></script> <script src=""></script> <script src="index.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="sales"></div> </div> </body> </html>