Introduction Saving and loading the React Pivot Table report allows you to preserve the current state of the component and reload it into the pivot table as required. By default, this functionality is accessible through the built-in toolbar options. For more details, please refer to the user guide documentation. However, In some cases, you may want to programmatically save and load a report using external buttons. This article demonstrates how to implement this customization seamlessly. Save and load the report using external buttons To achieve the desired customization, you must add two external buttons. One button is used to save the current layout of the pivot table to local storage, while the other button is used to load the saved layout back into the pivot table. Below is an example of a code snippet that demonstrates how to accomplish this using the Syncfusion Button component: [index.js] import { PivotViewComponent } from '@syncfusion/ej2-react-pivotview'; import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; // Here, we define a variable to access the instance of the pivot table let pivotObj; let obj; function Default() { function StoreData() { // Create a unique identifier obj = 'PivotTable' + pivotObj.element.id; // Store current pivot table state to local storage localStorage[obj] = pivotObj.getPersistData(); } function load() { // Check if there's saved data in local storage for this pivot table if (localStorage[obj]) { // Load the modified data from the local storage in the pivot table here. pivotObj.loadPersistData(localStorage[obj]); } } return ( <div id="btn-control" style={{ marginBottom: '5px' }}> <ButtonComponent id="save-btn" className='e-info' style={{ marginRight: '5px' }} onClick={StoreData}>Save</ButtonComponent> <ButtonComponent id="load-btn" className='e-info' onClick={load}>Load</ButtonComponent> </div> <PivotViewComponent id='PivotView' ref={d => pivotObj = d} > </PivotViewComponent> ); } export default Default; Explanation of the code snippet: When the “Save” button is clicked, the StoreData event method is triggered. Within the event method, we generate a unique identifier by concatenating ‘PivotTable’ with the component’s ID (i.e., pivotObj.element.id). This identifier ensures that the saved state remains unique in local storage. Afterwards, we extract the current state of the pivot table using the pivotObj.getPersistData() method and store it in the local storage under the generated key. Similarly, when the “Load” button is clicked, the load event method is triggered. Within the event method, we check if there is any saved data in the local storage for the specific pivot table using the unique key. If the data exists, we utilize the pivotObj.loadPersistData() method to reload it back onto the pivot table. This action effectively restores the saved state of the pivot table. The following GIF image portrays the results of the code snippet mentioned above. GIF For a practical demonstration, refer to the sample of stackblitz. Additional resources To save and load a report as a JSON file, please refer to the UG documentation. To save and load reports to a SQL database, please refer to the UG documentation. Conclusion By following the steps outlined in this article and using the provided code examples, you can easily save and load the React Pivot Table report using external buttons. You can refer to our React Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Pivot Table example to understand how to create and manipulate data. For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
Introduction When working with Angular Pivot Table, there may be occasions where you require the flexibility to export drill-through data into different file formats, such as PDF, Excel, and CSV. This can be essential for further data analysis or record-keeping purposes. This article explains how you can seamlessly export drill-through data into the aforementioned file formats. Exporting the drill-through data In order to export drill-through data, you will need to use the beginDrillThrough event of the pivot table. This event is triggered just before the drill-through dialog appears. By default, the drill-through data is displayed using the Syncfusion Grid Component. By handling this event, you can access the instance of the Grid component and invoke the appropriate export methods. Below is an example of a code snippet that demonstrates how to achieve this: [app.component.html] <ejs-pivotview #pivotview id='PivotView' allowDrillThrough="true" (beginDrillThrough)="beginDrillThrough($event)"> </ejs-pivotview> [app.component.ts] import { PivotView, DrillThroughService, BeginDrillThroughEventArgs, } from '@syncfusion/ej2-pivotview'; import { Grid, Toolbar } from '@syncfusion/ej2-angular-grids'; import { ClickEventArgs } from '@syncfusion/ej2-navigations'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', providers: [FieldListService, DrillThroughService], }) export class AppComponent { @ViewChild('pivotview') public pivotObj?: PivotView; beginDrillThrough(args: BeginDrillThroughEventArgs) { if (args.gridObj) { Grid.Inject(Toolbar); // Injecting the Toolbar module into the Grid component let gridObj: Grid = args.gridObj; gridObj.toolbar = ['ExcelExport', 'CsvExport', 'PdfExport']; // Adding export options to the toolbar. gridObj.allowExcelExport = true, // Enabling Excel and CSV export. gridObj.allowPdfExport = true, // Enabling PDF export export. (gridObj.toolbarClick = (args: ClickEventArgs) => { switch(args.item.id) { case this.pivotObj.element.id + '_drillthroughgrid_pdfexport': gridObj.pdfExport(); // Here, we export the drill-through grid as a PDF file format. break; case this.pivotObj.element.id + '_drillthroughgrid_excelexport': gridObj.excelExport(); // Here, we export the drill-through grid in Excel file format. break; case this.pivotObj.element.id + '_drillthroughgrid_csvexport': gridObj.csvExport(); // Here, we export the drill-through grid in CSV file format. break; } }); } } Explanation of the code snippet: First, we inject the Toolbar module into the Grid component. This module is essential for adding toolbar items that will be used for the exporting process. Then, we define a variable named gridObj to access the instance of the Grid component. Following this, we configure toolbar items for exporting by using the gridObj.toolbar property. This action allows you to select the desired export format directly from the UI. Afterwards, we enabled the PDF, Excel, and CSV exports by setting gridObj.allowExcelExport and gridObj.allowPdfExport to true, respectively. As a final step, we use the gridObj.toolbarClick event. This event is triggered whenever a toolbar item is clicked. Within this event, we check the ID of the clicked toolbar item. If the ID corresponds with either PDF, Excel, or CSV exports, we invoke the respective gridObj.pdfExport(), gridObj.excelExport(), or gridObj.csvExport() method. Each of these methods is designed to export the drill-through data in the chosen file format. The following screenshot portrays the results of the code snippet mentioned above. screenshots Toolbar Items were added to the drill-through grid, PDF Export, Excel Export, CSV Export, For a practical demonstration, please refer to the sample of stackblitz. Conclusion By following the steps outlined in this article and using the provided code examples, you can effectively implement the functionality to export the drill-through data to PDF, Excel, and CSV formats. You can refer to our Angular Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Pivot Table example to understand how to create and manipulate data. For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
Introduction: By default, when you double-click on any value cell in a pivot table, the drill-through dialog appears and displays detailed raw data based on the fields configured in the report settings. This default behavior may not be suitable for all use cases, especially when you want to display only the row field, column field, and value field information pertaining to the selected value cell. This approach simplifies the user interface by removing unnecessary fields. This article demonstrates how to implement functionality by customizing the default behavior of the React Pivot Table drill-through dialog. Displaying only the selected cell value information in the drill-through dialog: To achieve the desired customization, you will need to use the beginDrillThrough event of the pivot table. This event is triggered before the drill-through dialog is rendered, providing an opportunity to modify its contents according to your specific requirements. Below is a code example that illustrates how to display only the row field, column field, and value field information based on the selected value cell: [index.js] import { PivotViewComponent, DrillThrough, Inject } from '@syncfusion/ej2-react-pivotview'; function DrillThroughComponent() { let pivotObj; function beginDrillThrough(args) { // Initialize variables to store the row header and column text of the clicked cell. let rowHeader; let columnHeader; // Determine if the selected cell belongs to a child member within the row if (args.cellInfo.currentCell.rowHeaders.includes(pivotObj.dataSourceSettings.valueSortSettings.headerDelimiter)) { // Extract the proper row header text using the header delimiter and update "rowHeader" let childRow = args.cellInfo.currentCell.rowHeaders.split(pivotObj.dataSourceSettings.valueSortSettings.headerDelimiter); rowHeader = childRow[childRow.length - 1]; } else { // Directly assign the row header text if clicked cell is belongs to parent row. rowHeader = args.cellInfo.currentCell.rowHeaders; } // Here we extract the column header name if (args.cellInfo.currentCell.columnHeaders.includes(pivotObj.dataSourceSettings.valueSortSettings.headerDelimiter)) { let childColumn = args.cellInfo.currentCell.columnHeaders.split(pivotObj.dataSourceSettings.valueSortSettings.headerDelimiter); columnHeader = childColumn[childColumn.length - 1]; } else { columnHeader = args.cellInfo.currentCell.columnHeaders; } // Obtain the raw data to find the field name of the row and column let rawData = Object.values(args.cellInfo.rawData[0]); var rowFieldName; var columnFieldName // Get the row field name based on the raw data for (var k = 0; k < rawData.length; k++) { if (rawData[k] == rowHeader) { rowFieldName = Object.keys(args.cellInfo.rawData[0])[k]; } else if(rawData[k] == columnHeader) { columnFieldName = Object.keys(args.cellInfo.rawData[0])[k] } } // Iterate through the grid columns to only show the information of the row field, column field and value field of the chosen cell by concealing all other fields (columns). for (var i = 0; i < args.gridObj.columns.length; i++) { if (args.gridObj.columns[i].field !== rowFieldName && args.gridObj.columns[i].field !== args.cellInfo.currentCell.actualText && args.gridObj.columns[i].field !== columnFieldName) { // Hide all other fields (columns) in the drill-through dialog args.gridObj.columns[i].visible = false; } } } return ( <PivotViewComponent id='PivotView' ref={(scope) => { pivotObj = scope; }} allowDrillThrough={true} beginDrillThrough={beginDrillThrough}> <Inject services={[DrillThrough]}/> </PivotViewComponent>); } export default DrillThroughComponent; Explanation of the code snippet: First, we initialize a couple of variable’s named rowHeader and columnHeader within the beginDrillThrough event to hold the text of the row and column headers corresponding to the clicked value cell. Following this, we check whether the selected cell’s row headers contain the pivot table’s header delimiter. This check helps determine whether the cell belongs to a child member within the row. If it does, we extract the appropriate row header text from the args.cellInfo.currentCell.rowHeaders property and assign it to the rowHeader variable. Otherwise, we directly assign the value to the rowHeader. We derive the column header by following a similar approach. Afterward, we retrieve the first set of raw data from the pivot table using the args.cellInfo.rawData[0] property and loop through it to identify the field names for both the row and column, based on the values found in the rowHeader and columnHeader, respectively. Finally, we iterate through all the columns in the drill-through grid. If a column’s field does not match the previously identified row field name (i.e., rowFieldName), the column field name (i.e., columnFieldName), or the actual text of the selected value cell (which represents the value field), we set the args.gridObj.columns[i].visible property to false. This action effectively displays the row field, column field, and value field information pertaining to the selected value cell by concealing all other columns. The following screenshots portray the difference between before and after implementing the above workaround solution: screenshots: Selected value cell in the pivot table, Before implementing the workaround solution, After implementing the workaround solution, For a practical demonstration, refer to the sample of stackblitz. Conclusion: By following the steps outlined above, you can easily show the row field, column field, and value field information in the drill-through dialog according to the value cell selected in the React Pivot Table. You can refer to our React Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Pivot Table example to understand how to create and manipulate data. For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
Introduction When working with React Pivot Table, there might be scenarios where you need to customize the dimensions of the drill-through dialog and the grid column contained within it for a better user interface or to improve the data presentation. This can be achieved by overriding the default styles applied to these elements. This article will provide guidance on adjusting the width and height of the drill-through dialog and the grid column within it. Adjusting the width and height of the drill-through dialog In order to alter the width and height of the drill-through dialog, you must target the CSS class associated with the dialog. This is feasible by writing custom CSS styles that override the defaults. Below is an example code snippet that demonstrates how to achieve this. /* customize the drill through dialog width and height here. */ .e-drillthrough-dialog.e-control.e-dialog.e-lib.e-dlg-modal.e-popup.e-popup-open{ width: 100% !important; /* Custom width for the dialog */ max-height: unset !important; /* Unsets any max-height to allow custom height */ height: 100% !important; /* Custom height for the dialog */ } Customizing the drill-through grid column height After adjusting the dimensions of the dialog, you might want to customize the height of the grid column within the drill-through dialog to ensure it fits well within the newly sized dialog. This can also be achieved by overriding the corresponding CSS classes. The code snippet below provides an example of how to set a custom height for the drill-through grid column. /* customize the drill through grid column height here. */ .e-drillthrough-dialog .e-drillthrough-grid .e-gridcontent .e-content { height: 90vh !important; /* Custom height for the grid column */ } Note When customizing the styles, the !important rule is used to ensure that these custom styles have higher specificity than the default styles applied by the library. This ensures your customizations take effect. It’s a good practice to adjust the drill-through grid content height to be less than the dialog height to accommodate other elements of the dialog, such as the header and padding, as shown in the example above. It’s essential to specify the grid column height in viewport units (i.e., vh) rather than percentages to ensure that a vertical scrollbar is displayed when the content exceeds the visible area. The following screenshots portray the difference between before and after adjusting the width and height of the drill-through dialog, Before customization After customization For a practical demonstration, refer to the sample of stackblitz. Conclusion I hope you enjoyed learning how to customize the width and height of the drill-through dialog in a React Pivot Table. You can refer to our React Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Pivot Table example to understand how to create and manipulate data. For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
Introduction In certain situations, you may want to provide additional interactivity by displaying a custom dialog box whenever a value cell is double-clicked in a pivot table. This can be useful for showing detailed information, conducting validations, or initiating other custom actions. This article will guide you on how to create a custom dialog in the Blazor Pivot Table when double-clicking on a value cell. Creating a custom dialog box upon double-clicking a value cell In order to create a custom dialog when double-clicking on a value cell in a pivot table, you can utilize the DrillThrough event. This event is triggered upon clicking a value cell in the pivot table and allows for the creation of a custom dialog box. The code example below demonstrates how to create a custom dialog by using the Syncfusion Blazor Dialog Component when double-clicking a value cell in a pivot table. Note: To use the DrillThrough event in the pivot table, you must set the AllowDrillThrough property to true within the SfPivotView class. [Index.razor] @using Syncfusion.Blazor.PivotView @using Syncfusion.Blazor.Popups <SfPivotView TValue="ProductDetails" ID='PivotView' @ref="pivot" Width="100%" AllowDrillThrough="true"> ... <PivotViewEvents TValue="ProductDetails" DrillThrough="drillThrough"></PivotViewEvents> </SfPivotView> @*Custom Dialog Component.*@ <SfDialog Target="#PivotView" @ref="Dialog" Width="300px" ShowCloseIcon="true" @bind-Visible="@Visibility"> <DialogTemplates> <Header> Dialog </Header> <Content> <p> This is a custom dialog, you can update your custom validation here. </p> </Content> </DialogTemplates> <DialogAnimationSettings Effect="@AnimationEffect"/> <DialogButtons> <DialogButton IsPrimary="true" Content="CANCEL" OnClick="@OnBtnClick" /> </DialogButtons> </SfDialog> @code { SfPivotView<ProductDetails> pivot; private SfDialog Dialog { get; set; } private bool Visibility { get; set; } = false; private DialogEffect AnimationEffect = DialogEffect.Zoom; // Close the dialog unsing the button. private async Task OnBtnClick() { await Dialog.HideAsync(); } private async Task drillThrough(DrillThroughEventArgs args) { // Restrict the existing dialog here. args.Cancel = true; // And display the custom dialog here. await Dialog.ShowAsync(); } } In the above code example, inside the DrillThrough event method, we prevented the default drill-through dialog box from appearing by setting the args.Cancel property to true. Following this, we have created a custom dialog box using the Syncfusion Blazor Dialog Component and its properties, for instance, its title, message, size, and animation appearance, among others. You can modify this event as per your requirements to customize the dialog box and its contents. The following GIF image, which portrays the results of the code snippet mentioned above, Sceenshot You can refer to this GitHub sample for a practical demonstration of this code. Conclusion I hope you enjoyed learning how to create a custom dialog in a Blazor Pivot Table when double-clicking on a value cell. You can also refer to our Blazor Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Pivot Table example to understand how to create and manipulate data. For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
This article explains how to sort drill-through grid columns in the Vue pivot table. Sort drill-through grid columns in pivot table In certain scenarios, you might want to sort the columns in the drill-through dialog for improved data presentation or analysis. This can be achieved by using the beginDrillThrough event. This event is triggered before the drill-through dialog is rendered, allowing you to customize the settings of the drill through grid columns. Note: In order to use the beginDrillThrough event, it is important to set the allowDrillThrough property to true. Here is a code snippet that guides how to sort drill through grid columns in a pivot table. [App.Vue] <template> <ejs-pivotview id="pivotview" :beginDrillThrough="beginDrillThrough" :allowDrillThrough="allowDrillThrough"> </ejs-pivotview> </template> <script lang="ts"> import { PivotViewComponent} from "@syncfusion/ej2-vue-pivotview"; export default { components: { 'ejs-pivotview': PivotViewComponent }, data: () => { return { allowDrillThrough: true, }; }, methods: { beginDrillThrough: function(args){ args.gridObj.allowSorting = true; args.gridObj.sortSettings.columns = [{ field: 'Amount', direction: 'Descending' }] } } } </script> In the example given above, the gridObj.allowSorting property is set to true, which enables sorting in the pivot table. The gridObj.sortSettings.columns property is then specified with an array of objects that define the field to be sorted and the direction of sorting. In this case, the Amount field is set to be sorted in descending order. The following screenshot portrays the results of the code snippet mentioned above. Screenshot For a practical demonstration, refer to the sample of stackblitz Conclusion: I hope you enjoyed learning how to sort drill through grid columns in Vue pivot table. You can also refer to our Vue Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Vue Pivot Table example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
This article explains how to customize Blazor Pivot Table headers Customize pivot table headers In some scenarios, it may be necessary to customize the row and column headers of the pivot table by incorporating additional data from the data source. This can be achieved by using the CellTemplate option. The following code demonstrates how to retrieve relevant cell data information from the data source based on the data Index and customize row headers by concatenating the retrieved data with the current data. For example, here, we obtain the Country field from the relevant data and add it along with the ProductID field on the row axis. Note: In order to obtain specific cell’s data information from the data source while using the cell template, it is important to set the AllowDrillThrough property to true. Index.razor <SfPivotView TValue="PivotVirtualData" Width="100%" Height="500" EnableVirtualization="true" AllowDrillThrough="true"> <PivotViewTemplates> <CellTemplate> @{ var data = (context as AxisSet); if (data != null) { if (data.Axis == "row" && data.Type != "grand sum") { data.FormattedText = data.FormattedText + "-" + Data[data.Index[0]].Country; @data.FormattedText } else { @data.FormattedText } } } </CellTemplate> </PivotViewTemplates> <PivotViewDataSourceSettings DataSource="@Data" EnableSorting="false"> </PivotViewDataSourceSettings> </SfPivotView> The following screenshot portrays the results of the code snippet mentioned above. Screenshot For a practical demonstration, refer to the sample of blazor playground Conclusion: I hope you enjoyed learning how to customize pivot table headers. You can also refer to our Pivot Table feature tour feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Pivot Table example example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
