Introduction When working with JavaScript Pivot Table, there may be scenarios where you need to apply custom styles to grand total cells. This customization can significantly enhance the readability and aesthetic appeal of the pivot table. It can be achieved by adding custom styles to your stylesheet and subsequently using the headerCellInfo and queryCellInfo events to effectively apply these styles to both row and column grand total cells. Below is a step-by-step guide on how to do this, along with a code example. Step 1: Define custom styles First, you need to define the custom style within your stylesheet that you want to apply to the row and column grand total cells. In the following code example, we initialize a couple of CSS classes named row_grandtotal and column_grandtotal to specify the styles for row and column grand total cells, respectively. [index.css] .row_grandtotal { background-color: thistle !important; font-family: cursive !important; } .column_grandtotal { background-color: skyblue !important; font-family: 'Franklin Gothic Medium' !important; } You can adapt the code to meet your specific requirements, such as applying a different background color or specifying a different font family for the row and column grand totals cells. 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. Step 2: Apply custom styles using events Next, you need to use the headerCellInfo and queryCellInfo events to apply custom styles to the grand total cells. The headerCellInfo event is triggered while rendering each column header cell in a pivot table, allowing you to apply custom styles to the column grand total headers. On the other hand, the queryCellInfo event is triggered during the rendering of each row and value cell in the pivot table, providing the opportunity to customize the current cell, such as adding or removing styles. Below is a code snippet that demonstrates how to utilize these events: [index.js] var pivotObj = new ej.pivotview.PivotView({ gridSettings: { headerCellInfo: (args) => { // Apply custom styles for column grand total headers. if(args.node.classList.contains("e-gtot")) { args.node.classList.add("column_grandtotal"); } }, queryCellInfo: function(args){ // Retrieve the current cell information. var colIndex = Number(args.cell.getAttribute('data-colindex')); // Check if the cell belongs to the row grand total. if ((args.data[colIndex].rowHeaders == "" && args.data[colIndex].columnHeaders !== "") || (args.data[colIndex].axis == 'row' && args.data[colIndex].actualText == 'Grand Total')) { args.cell.classList.add("row_grandtotal"); } // Check if the cell belongs to the column grand total. else if (args.data[colIndex].columnHeaders == "") { args.cell.classList.add("column_grandtotal"); } } }, }); Here’s a breakdown of how the code works: Within the headerCellInfo event, we check whether the current cell belongs to the column grand total header by using the e-gtot class. If it does, we add the column_grandtotal class to apply custom styles to this cell. Similarly, within the queryCellInfo event, we determine whether the current cell represents the row grand total, column grand total, or neither. For row grand total cells, we check if the rowHeaders property is an empty string while the columnHeaders property is not empty, or if the cell’s axis is designated as “row” and the actualtext property is “Grand Total”. When this condition is met, we include the row_grandtotal class in the cell. This action effectively applies custom styles to the row grand total cells. For column grand total cells, we check if the columnHeaders property is an empty string. If this condition is met, we add the “column_grandtotal” class to the cell, thereby applying custom styles to it. The following screenshot portrays the results of the code snippet mentioned above. Screenshots For a practical example of this code in action, you can refer to the following sample of stackblitz. Conclusion By following the steps outlined in this article and using the provided code example, you can easily apply custom styles to the grand total cells in a JavaScript Pivot Table. You can also refer to our JavaScript 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 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 In JavaScript Pivot Table, you can group the date field into different sections, such as years, quarters, months, and days. Each section appears as a button on the grouping bar. Each button typically includes icons for sorting, filtering, and a cancel option. However, there might be scenarios in which you want to selectively hide the sort icon for specific date grouping fields, such as the months field. This approach can enhance the user experience by customizing the user interface according to specific requirements. This article explains how to selectively hide the sort icon for a specific date grouping field in the JavaScript Pivot Table grouping bar. Hiding the sorting icon for a specific date grouping field To achieve the desired customization, you will need to use the enginePopulated event of the pivot table. This event is triggered after the pivot engine has been populated, allowing you to customize UI elements such as sort icons for the specific date grouping field. Below is an example of a code snippet that demonstrates how to achieve this: [index.js] var pivotObj = new ej.pivotview.PivotView({ dataSourceSettings: { enableSorting: true, rows: [{ name: 'Date', caption: 'Date' }], groupSettings: [ { name: 'Date', type: 'Date', groupInterval: ['Years', 'Months', 'Days'], }, ] }, showGroupingBar: true, enginePopulated: function (args) { // Iterate through all rows in the data source settings for(var i=0; i<pivotObj.dataSourceSettings.rows.length; i++){ // Check if the current row is the 'months' grouping of the date field if (pivotObj.dataSourceSettings.rows[i].name == 'Date_date_group_months') { // Disables the sort icon for this specific field pivotObj.dataSourceSettings.rows[i].showSortIcon = false; } } }, }); In the code example above, within the enginePopulated event, we iterate through each row field defined in the dataSourceSettings. During the iteration, we check if the current row corresponds to the grouping of months by utilizing the pivotObj.dataSourceSettings.rows[i].name property. Each date grouping follows a specific naming convention: ‘Base field name + _ + “date_group” + _ + group type’. For instance, if there is a date field named ‘Date’ and it is grouped by months, the field name would be ‘Date_date_group_months’. This naming convention helps us easily identify specific fields that are grouped by month. If the field name matches, we set the showSortIcon property for that field to false, which effectively conceals the sorting icon for the month grouping field. The following screenshots portray the difference between before and after implementing the above workaround solution: Screenshots Before implementing the workaround solution, After implementing the workaround solution, For a practical example of this code in action, you can refer to the following sample of stackblitz. Additional resources: To hide the sort icon on non-date grouping fields, refer to the UG documentation. Conclusion By following the steps outlined in this article and using the provided code example, you can easily hide the sorting icon for a specific date grouping field in the grouping bar of a JavaScript Pivot Table. You can also refer to our JavaScript 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 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 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 In certain scenarios, you might want to limit the export options available in the pivot table toolbar export menu to ensure that users can only export data in specific file formats. For instance, you may want to enable exporting exclusively for the PDF file format while concealing other options such as CSV and Excel. This approach simplifies the user interface by removing unnecessary options. This article will guide you through the process of hiding specific export options, such as CSV and Excel from the export menu in the Angular Pivot Table toolbar. Hide specific export options from the menu To achieve the desired customization, you will need to use the dataBound event of the pivot table. This event is triggered when the pivot table is rendered, providing the opportunity to access the export menu instance from the DOM and apply a condition to hide certain export format options. Here is an example code snippet demonstrating how to accomplish this: [app.component.html] <ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings allowExcelExport='true' allowPdfExport='true' showToolbar='true' [toolbar]='toolbarOptions' (dataBound)='dataBound($event)'> </ejs-pivotview> [app.component.ts] import { PivotView } from '@syncfusion/ej2-pivotview'; export class AppComponent { public pivotObj: PivotView; public toolbarOptions: ToolbarItems[]; @ViewChild('pivotview') public pivotObj: PivotView; dataBound(args: any) { let pivotID= this.pivotObj.element.id; let exportMenu = select('#' + pivotID + 'export_menu', this.pivotObj.element).ej2_instances[0]; exportMenu.beforeItemRender = function (args: any) { if (args.element.id == pivotID + "csv" || args.element.id == pivotID + "excel") { args.element.style.display = "none"; } } } ngOnInit(): void { this.toolbarOptions = ['Export'] as ToolbarItems[]; } Explanation of the code snippet: First, we obtain the ID of the Pivot Table instance. This ID is then utilized to select the export menu instance from the DOM. Following this, we invoke the select() method with the ID of the pivot table concatenated with _export_menu to precisely target the export menu. Afterwards, we call the beforeItemRender() event of the export menu and apply a condition to check the id of each menu item. If the id corresponds with any of the specified formats (i.e.,CSV or Excel), we set the args.element.style.display property to none. This action effectively conceals the option within the export menu. You can adapt the code to meet your specific requirements, such as hiding various toolbar menu options, like sub-total, grand total, and more. The following screenshots portray the difference between before and after implementing the above workaround solution: screenshots Before implementing the workaround solution, After implementing the workaround solution, 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 easily hide specific export options from the export menu in the Angular Pivot Table toolbar. 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: When working with Vue Pivot Table, there may be instances where you require the flexibility to select specific rows in a pivot table through an external button, rather than directly interacting with the pivot table itself. This approach enhances user interaction by providing a more accessible way to dynamically select specific rows in a pivot table. This guide will demonstrate how to select rows in a Vue Pivot Table based on their header text upon clicking an external button. Moreover, it will show how to select both rows and their associated child members using the same external button interaction. Add an external button: First, you need to create a button that will be used to select rows in the pivot table. To maintain a consistent UI, you can use the Syncfusion Button component. Here is an example code snippet demonstrating how to accomplish this: [App.vue] <template> <ejs-button id="btn" v-on:click="selectRow" isPrimary='true'>Select rows</ejs-button> <ejs-pivotview id="pivotview" ref="pivotview" :dataSourceSettings="dataSourceSettings" :gridSettings="gridSettings"> </ejs-pivotview> </template> <script lang="ts"> import { PivotViewComponent } from "@syncfusion/ej2-vue-pivotview"; import { ButtonComponent } from "@syncfusion/ej2-vue-buttons"; export default { components: { 'ejs-pivotview': PivotViewComponent, 'ejs-button': ButtonComponent }, } </script> Selecting specific rows in a pivot table based on header text: After configuring the button, you must implement the logic to select specific rows in the pivot table upon clicking the button. This involves adding a method within your script section that will be executed upon the button click. Here is a code snippet that demonstrates how to select specific rows in a pivot table based on the header text: [App.vue] <script lang="ts"> export default { data: () => { return { gridSettings: { allowSelection: true, selectionSettings: { mode: "Row", type: "Multiple", } }, }; }, methods: { selectRows: function(args: any) { // Obtaining a reference to the Pivot Table instance. let pivotObj = ((this as any).$refs.pivotview).ej2Instances; // Here, we initialize a variable to determine the specific row index. let rowIndex = -1; // Array to strore selected row index let selectedRows = []; // Iterate through the pivotValues property of the Pivot Table instance for (var i = 0; i < pivotObj.pivotValues.length; i++) { for (var j = 0; pivotObj.pivotValues[i] != null && j < pivotObj.pivotValues[i].length; j++) { if (pivotObj.pivotValues[i][j] && pivotObj.pivotValues[i][j].axis === 'row') { // Here we increment the row index variable if the axis of the current cell is 'row'. rowIndex++ if (pivotObj.pivotValues[i][j].valueSort && pivotObj.pivotValues[i][j].valueSort.levelName.includes('Road Bikes')) { // Here we push the `rowIndex` to `selectedRows` array selectedRows.push(rowIndex); }; } } } // Select the specific row based on the rowIndex pivotObj.grid.selectionModule.selectRows(selectedRows); }, } } </script> Here’s a breakdown of how the code works: First, we define a variable named pivotObj within the selectRow() method to access the instance of the pivot table. We use this variable to identify the specific row indices and then select the corresponding rows. Following this, we initialize a variable named rowIndex to track the current row index as we iterate over the pivot table data. Additionally, we create an array called selectedRows to store the indices of the selected rows. Afterward, we iterate over pivotObj.pivotValues to access the details of each cell within the pivot table. Throughout this iteration, we use the args.cellInfo.valueSort.levelName property to determine whether the row header text includes the specified criteria (in this case, “Road Bikes”). The index of each matching row is then added to the selectedRows array. Once the row indices are determined, we invoke the pivotObj.grid.selectionModule.selectRows method to select the corresponding rows in the pivot table based on the indices in the selectedRows array. You can adapt the code to fit your specific requirements, such as selecting different rows in the pivot table. NOTE It is important to note that row indices start at 0, indicating that the first row has an index of 0. The following GIF image portrays the results of the code snippet mentioned above: GIF For a practical demonstration, please refer to the sample of stackblitz. Selecting specific row and its associated child members: In certain scenarios, you might want to select specific rows and their associated child members in a pivot table using an external button click. The approach is similar to selecting rows by header text, but this time, we focus on the parent header text (i.e., ‘France’). Here is an example code snippet demonstrating how to accomplish this: <script lang="ts"> export default { methods: { selectRows: function(args: any) { // Obtaining a reference to the Pivot Table instance. let pivotObj = ((this as any).$refs.pivotview).ej2Instances; // Here, we initialize a variable to determine the specific row index. let rowIndex = -1; // Array to store selected row indices let selectedRows = []; // Iterate through the pivotValues property of the Pivot Table instance for (var i = 0; i < pivotObj.pivotValues.length; i++) { for (var j = 0; pivotObj.pivotValues[i] != null && j < pivotObj.pivotValues[i].length; j++) { if (pivotObj.pivotValues[i][j] && pivotObj.pivotValues[i][j].axis === 'row') { // Here we increment the row index variable if the axis of the current cell is 'row'. rowIndex++ if (pivotObj.pivotValues[i][j].valueSort && pivotObj.pivotValues[i][j].valueSort.levelName.includes('France')) { // Here we push the `rowIndex` to `selectedRows` array selectedRows.push(rowIndex); }; } } } // Select the specific rows based on the rowIndex pivotObj.grid.selectionModule.selectRows(selectedRows); }, } } </script> The following GIF image portrays the results of the code snippet mentioned above: GIF For a practical demonstration, please refer to the sample of stackblitz. Conclusion By following the steps outlined above, you can easily add the functionality to select specific rows in a Vue Pivot Table via an external button. 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!
Introduction When working with Angular Pivot Table, there may be occasions where you wish to open the chart type settings dialog using an external button rather than relying on the built-in toolbar options. This approach enhances user interaction by providing a more accessible way to dynamically change the chart type and choose from multiple axis modes, such as “Single”, “Stacked”, or “Combined”, according to your preferences. This article outlines the steps to open the chart type settings dialog programmatically via an external button. Step 1: Add an external button First, incorporate an external button within your HTML file, typically named app.component.html. This button will be used to trigger the opening of the chart type settings dialog. Here is a code sample that demonstrates how to add a button using the Syncfusion Button component: [app.component.html] <button ejs-button #chartType id="ChartType" (click)="onChange()" [isPrimary]="true">Chart Type Settings Dialog</button> <ejs-pivotview #pivotview id='PivotView' [displayOption]=displayOption [showToolbar]='true' [toolbar]='toolbarOptions'> </ejs-pivotview> Step 2: Opening the chart type settings dialog After setting up the button, you need to implement the logic to open the chart type settings dialog when the button is clicked. This involves adding a method in your TypeScript file (i.e., app.component.ts) that will be executed upon the button click. [app.component.ts] import { PivotViewModule, DisplayOption, ToolbarService, ToolbarItems, PivotView } from '@syncfusion/ej2-angular-pivotview'; @Component({ selector: 'app-root', styleUrls: ['app.component.css'], providers: [ToolbarService], templateUrl: 'app.component.html', standalone: true, imports: [PivotViewModule, ButtonModule] }) export class AppComponent { public displayOption: DisplayOption; public toolbarOptions!: ToolbarItems[]; @ViewChild('pivotview') public pivotView: PivotView; onChange() { (this.pivotView.toolbarModule as any).createChartTypeDialog(); } ngOnInit(): void { this.toolbarOptions = ['Chart'] as ToolbarItems[]; this.displayOption = { view: 'Chart' } as DisplayOption; } } In the code example above, within the onChange() method, we invoke the this.pivotView.toolbarModule.createChartTypeDialog() method to effectively open the chart type settings dialog. The following GIF image portrays the results of the code snippet mentioned above: GIF For a practical demonstration, please refer to the sample of stackblitz. Conclusion By following the steps outlined in this guide, you can easily open the chart type settings dialog in an Angular Pivot Table via an external button. 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, field members (aka headers) are sorted based on ASCII values in an Angular Pivot Table. This means that when sorting is applied in ascending order, capital letters (A-Z) are sorted before lowercase letters (a-z), and vice versa for descending order. This default behavior might not be suitable for all use cases, especially when you prefer case-insensitive sorting. This article demonstrates how to implement this functionality by overriding the default ASCII value-based sorting in the pivot table. Sorting in a case-insensitive manner through the onHeadersSort event. To achieve case-insensitive sorting, you can utilize the onHeaderSort event of the pivot table. This event is triggered before the sorting is performed, allowing you to customize the default sorting behavior based on your requirements. Below is an example that demonstrates how to achieve case-insensitive sorting: [app.component.html] <ejs-pivotview #pivotview id='PivotView' (onHeadersSort)="onHeaderSort($event)" showGroupingBar='true' showFieldList='true' > </ejs-pivotview> [app.component.ts] import { PivotView } from '@syncfusion/ej2-pivotview'; export class AppComponent { public pivotObj: PivotView; @ViewChild('pivotview') public pivotObj: PivotView; onHeaderSort(args: any) { var customSortedMembers; if(args.sortOrder == "Ascending") { // Case-insensitive sorting for the specified field in ascending order. customSortedMembers = args.members.slice().sort(function (a, b) { return a.toLowerCase().localeCompare(b.toLowerCase()); }); } else if(args.sortOrder == "Descending") { // Case-insensitive sorting for the specified field in descending order. customSortedMembers = args.members.slice().sort(function (b, a) { return a.toLowerCase().localeCompare(b.toLowerCase()); }); } else if(args.sortOrder == "None") { // Retains the original order (useful when resetting the sort order). customSortedMembers = args.members; } // Assign the custom sorted members back to the args object. args.members = customSortedMembers; // Set IsOrderChanged to true to apply the custom sort order. args.IsOrderChanged = true; } Here’s a breakdown of how the code works: First, within the onHeaderSort, we check the current sort order by using the args.sortOrder property. If the sorting order is set to ascending, we create a shallow copy of the args.members array by using JavaScript’s slice() method to prevent modifying the original dataset. Following this, we perform case-insensitive sorting for the specified field using the sort method. Inside this method, we convert all the member names to lowercase using the toLowerCase() method and then compare them using the localeCompare() method. This approach ensures that the field members are sorted in ascending order without considering case sensitivity. If the sorting order is set to descending, a similar process is carried out but in reverse order to achieve a descending sort. When the sortOrder is None, the original order of members is retained without any changes. Finally, the sorted members are assigned back to args.members, and args.IsOrderChanged is set to true to indicate that the order has been customized. This action ensures that the pivot table is displayed in the customized sorting order. The following screenshots portray the difference between before and after implementing the above workaround solution: screenshots Before implementing the workaround solution, After implementing the workaround solution, For a practical demonstration, refer to the sample of stackblitz. Conclusion By overriding the default ASCII value-based sorting behavior with a custom case-insensitive sorting logic, you can achieve a more intuitive sorting order in an Angular Pivot Table. 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 The drill-through feature allows you to view the raw data of any JavaScript Pivot Table cell in a pop-up window by double-clicking on the cell. However, in scenarios where the column width cannot accommodate the full content, the data gets truncated due to space limitations. This is the actual behavior of the drill-through dialog in our Syncfusion Pivot Table. Although you can view the entire content of these truncated columns through the tooltip. This article demonstrates how to display a tooltip for truncated grid columns in the drill-through dialog. Display the tooltip for truncated gird columns in the drill-through dialog In order to display a tooltip for truncated grid columns, you need to use the beginDrillThrough event. This event is triggered before the drill-through dialog is rendered, which allows you to display a tooltip when hovering over the truncated grid columns. Here’s an example of how to display a tooltip for truncated grid columns in the drill-through dialog: [index.js] var pivotObj = new ej.pivotview.PivotView({ allowDrillThrough: true, beginDrillThrough: function (args) { for (var i = 0; i < args.gridObj.columns.length; i++) { // Here, we have enabled the tooltip for the truncated grid column. args.gridObj.columns[i].clipMode = 'EllipsisWithTooltip'; } }, }); In the preceding code snippet, we iterate through each column in the gridObj.columns property and set the clipMode property to EllipsisWithTooltip. This configuration allows us to view the entire content of the truncated columns without altering their width. The following screenshot, which portrays the results of the code snippet mentioned above, Screenshot For a practical example of this code in action, you can refer to the following Sample in Stackblitz. Conclusion I hope you enjoyed learning how to display a tooltip for truncated grid columns in the drill-through dialog of the JavaScript Pivot Table. You can also refer to our JavaScript 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 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 When working with ASP.NET Core Pivot Table, you can dynamically edit the value cells by setting the allowEditing property in e-editSettings tag to true. However, in certain scenarios, you may want to update the data source in your controller after performing edit operations. This can be achieved by sending the edited data back to a controller file using jQuery AJAX. In this article, we will guide you through the process with code examples. Step 1: Defining the data source in the controller First, you need to create the data source in your controller in order to configure the pivot table control. To do this, create a class that represents the data structure, which in our scenario is OrderDetails. This class will contain properties that represent the necessary data fields for the pivot table, such as “Country”, “UniqueID”, “Amount”, and “Year”. Here is an example of how to define a data source for the pivot table using a class called OrdersDetails in the controller (i.e., HomeController.cs) file: [HomeController.cs] using Microsoft.AspNetCore.Mvc; public class HomeController : Controller { public class OrdersDetails { // List to store order details. public static List<OrdersDetails> order = new List<OrdersDetails>(); // Properties to define the data fields. public OrdersDetails(int UniqueId, string Country, string Year, int Amount) { this.UniqueID = UniqueId; this.Country = Country; this.Year = Year; this.Amount = Amount; } public static List<OrdersDetails> GetAllRecords() { // Check if the list is empty to avoid duplicate data. if (order.Count() == 0) { // Populating the order list with sample data. order.Add(new OrdersDetails(1, "France", "FY 2015", 52824)); } return order; } // Properties to define the data fields. public string Country { get; set; } public int ? UniqueID { get; set; } public int Amount { get; set; } public string Year { get; set; } } } Step 2: Initializing the pivot table control After defining the required data source in your controller file (i.e., HomeController), it’s essential to initialize the pivot table control on the cshtml page (i.e., ~/Pages/Index.cshtml) using that data source. The following code example demonstrates how to assign the data source from the controller file to the cshtml page: [HomeController.cs] using Microsoft.AspNetCore.Mvc; public class HomeController : Controller { public IActionResult Index() { // Fetch your data here var currentData = OrdersDetails.GetAllRecords().ToList(); // Store the data in the ViewBag with a key to be accessed in the cshtml page. ViewBag.datasource = currentData; // Return the corresponding view. return View(); } } [Index.cshtml] <ejs-pivotview id="PivotView"> <e-datasourcesettings dataSource="@ViewBag.datasource"> <e-rows> <e-field name="Country"></e-field> </e-rows> <e-columns> <e-field name="Year"></e-field> </e-columns> <e-values> <e-field name="Amount"></e-field> </e-values> </e-datasourcesettings> </ejs-pivotview> In the controller, we retrieve the previously defined data source and store it in the currentData variable. This data is then assigned to ViewBag.datasource, which will be accessible on the cshtml page. Subsequently, on the cshtml page, we define the pivot table control using the ejs-pivotview tag and set its dataSource property to ViewBag.datasource to utilize the data passed from the controller. Step 3: Including jQuery library Once you’ve initialized the pivot table, you need to use a JavaScript library, like jQuery, to make an Ajax request to the controller file in order to update a data source after performing edit operations in a pivot table. To incorporate the jQuery library into a pivot table, it is necessary to include the following script references in the application’s ~/Views/Shared/Layout.cshtml file: [Layout.cshtml] <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js" asp-fallback-src="~/lib/jquery/dist/jquery.min.js" asp-fallback-test="window.jQuery" crossorigin="anonymous" integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk"> </script> Step 4: Define the data transfer object After adding the jQuery library, you need to send the edited data from the cshtml page (i.e., ~/Pages/Index.cshtml) to the controller (i.e., HomeController.cs). To accomplish this, first you need to define a Data Transfer Object (DTO) in the controller. This will carry the edited data from the cshtml page to the controller. [HomeController.cs] public class DataResult { // Update properties of your entity here public List<OrdersDetails> AddedData { get; set; } public List<int> ModifiedIndex { get; set; } } The DataResult class includes two properties: AddedData, which holds the edited data, and ModifiedIndex, which may carry the indices of the modified rows or other relevant information. Step 5: Write a controller action After defining the data transfer object, you need to handle the incoming edited data. To achieve this, create an action method (i.e., BatchUpdate) that the AJAX call will target. Here is an example of how to receive the edited data and perform CRUD operations: [HomeController.cs] [HttpPost] public IActionResult BatchUpdate([FromBody] DataResult DataResult) { // Here we get the current data source currentData = OrdersDetails.GetAllRecords().ToList(); for (var i = 0; i < DataResult.ModifiedIndex.Count; i++) { if (DataResult.AddedData.Count > 0) { for (var j = 0; j < DataResult.AddedData.Count; j++) { if (currentData[DataResult.ModifiedIndex[i]].UniqueID == DataResult.AddedData[j].UniqueID) { // Here we update the modified data to data source currentData[DataResult.ModifiedIndex[i]] = DataResult.AddedData[j]; } else { // Here we include the newly added data to the data source DataResult.AddedData[j].UniqueID = currentData.Count + 1; currentData.Add(DataResult.AddedData[j]); } } } else { // Here we remove the data from data source currentData.RemoveAt(DataResult.ModifiedIndex[i]); } } return Json(new { result = currentData, count = currentData.Count }); } In the above, we iterate over the ModifiedIndex property of the DataResult class, which contains the indexes of the edited records. For each index, we check if there is any newly added or edited data by checking the count of the AddedData property. If there is, we iterate over the AddedData collection and check whether the UniqueID of the added data already exists in the current data source. If this condition is met, we update the corresponding data in the data source by assigning the added data to the currentData list. Otherwise, we assign a new UniqueID to the added data and include it in the data source by appending it to the currentData list. Should there be no added data, we remove the data at the modified index from the currentData list, effectively deleting it from the data source. Step 6: Send edited data using jQuery In the cshtml page (i.e., ~/Pages/Index.cshtml), you need to set up the jQuery AJAX call in a script within the editCompleted event. This event triggers when value cells are edited completely. Here is an example of how to send the data to the controller: <ejs-pivotview id="PivotView" height="300" editCompleted="editCompleted"> <e-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-editSettings> </ejs-pivotview> <script> function editCompleted(args) { $.ajax({ url: "/Home/BatchUpdate", type: "POST", data: JSON.stringify({ 'addedData': args.currentData, 'modifiedIndex': args.previousPosition }), dataType: 'json', contentType: 'application/json; charset=UTF-8', success: function (response) { console.log("Edit Completed"); } }); } </script> In this code snippet, we are using jQuery’s $.ajax method to send a POST request to the BatchUpdate action method in the HomeController. The args.currentData contains the newly edited data, and args.previousPosition contains the indexes of the modified data rows. This data is serialized into JSON format and sent to the controller. After the controller receives the edited data, the data source can be updated as mentioned in the previous step. The following screenshot, which portrays the results of the code snippet mentioned above, Screenshot: You can refer to this GitHub sample for a practical demonstration of this code. Conclusion: I hope you enjoyed learning how to update the data source after performing editing in an ASP.NET Core Pivot Table. You can refer to our ASP.NET Core 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 ASP.NET Core 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!
Introduction: When working with pivot table, sometimes you might want to create a calculated field with a conditional formula. Let’s assume you have fields designated as “A” and “B.” You want to create a calculated field based on the values of these fields using a conditional formula. For instance, the formula would be Sum(A) === 0 ? Sum(B) : Sum(A). However, you may notice that after creating the calculated field, the grand total value is not summarized accurately. Instead, it shows the grand total value for one of the fields used in the formula (i.e., “A”). This occurs because the grand total values of the calculated field are always determined based on the grand total values of the fields used in the formula, not by aggregating each value in the calculated field. This is the actual behavior of the calculated field in our Syncfusion Pivot Table. In this article, we will discuss how to customize the grand total value of a calculated field in a pivot table by using a workaround technique. Customize the grand total value of a calculated field In order to customize the grand total value of a calculated field, you need to use the aggregateCellInfo. This event is triggered during the rendering of each cell in the pivot table and allows you to change the value of each cell. [app.component.html] <ejs-pivotview #pivotview id="PivotView" (aggregateCellInfo)="aggregateCellInfo($event)" (dataBound)="dataBound($event)"> </ejs-pivotview> [app.component.ts] import { PivotViewAllModule } from '@syncfusion/ej2-angular-pivotview'; export class AppComponent { public dataSourceSettings: IDataOptions; public columnHeader = {}; aggregateCellInfo(args) { // Targeting a specific calculated field with the name 'Valuation' if ( args.fieldName === 'Valuation' && args.value && args.rowCellType !== 'subTotal' && args.row.colIndex !== undefined ) { // Check if the current row is not a 'grand sum' if (args.rowCellType !== 'grand sum') { // Check if the column's unique name is not yet in the 'customTotal' object if (!this.columnHeader[args.column.valueSort.levelName]) { // If not present, initialize the value for this column's unique name this.columnHeader[args.column.valueSort.levelName] = args.value; } else { // If present, add the current value to the existing total this.columnHeader[args.column.valueSort.levelName] += args.value; } } else { // If row cell type is equal to 'grand sum', we assign the summarized total value args.value = this.columnHeader[args.column.valueSort.levelName]; } } } dataBound() { this.columnHeader = {}; } ngOnInit(): void { this.dataSourceSettings = { values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }, { name: 'Valuation', caption: 'Valuation', type: 'CalculatedField', }], calculatedFieldSettings: [ { name: 'Valuation', formula: '"Sum(Sold)" == 0 ? "Sum(Amount)" : "Sum(Sold)"', formatString: 'N2', }, ], showColumnGrandTotals: false }; } } Here’s a breakdown of how the code works: First, we initialize an empty object named “columnHeader” to store the aggregated values of the calculated field. Then, within the aggregateCellInfo event, we target the specific calculated field (i.e., “Valuation”) using the fieldName property. Next, we check if the row cell type is not a sub-total and that the row is not a grand sum using the rowCellType and row.type properties, respectively. If these conditions are satisfied, we check if the current column-level name is already present in the “columnHeader” object. If it is not present, we add the column level name as a key and the current cell value as the corresponding value in the columnHeader object. If the column level name is already in the “columnHeader” object, we add the current cell value to the existing one. Finally, when a cell belongs to a grand total row, we assign the summarized total value from the “columnHeader” object to the current grand value by using the “value” property and clear the “columnHeader” object within the dataBound event. The following screenshots illustrate the difference before and after implementing the above workaround solution: Screenshots Before implementing the workaround solution, After implementing the workaround solution, For a practical demonstration, refer to the sample of stackblitz Conclusion I hope you enjoyed learning how to customize the grand total value of a calculated field in an Angular Pivot Table. 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 When working with pivot tables, you can dynamically sort a specific value field and its aggregated values on either the row or column axis in both ascending and descending order. It can be enabled by setting the enableValueSorting property in the Angular Pivot Table to true. By default, the sorting order will be from descending to ascending. When you first click a value field header, it sorts the values in descending order. Clicking the same value field header again will sort the values in ascending order. However, in certain scenarios, you may want to clear the sorting by clicking a third time on the same value field header. There isn’t a direct option to accomplish this within the pivot table. Although this can be achieved through a workaround technique using the cellClick event. In this article, we will guide you through the process with a code example. Using the cellClick event to clear sorting To clear the value sorting after the third click on a specific value field header in a pivot table, you need to use the cellClick event. This event is triggered when clicking a cell in the pivot table, allowing you to clear the current sort order. [app.component.html] <ejs-pivotview #pivotview id="PivotView" enableValueSorting='true' (cellClick)="cellClick($event)"> </ejs-pivotview> [app.component.ts] import { PivotView } from '@syncfusion/ej2-pivotview'; export class AppComponent { public pivotObj: PivotView; @ViewChild('pivotview') public pivotObj: PivotView; // Define the cellClick event handler cellClick(args) { // Here we clear the sorting after the "Ascending" order is applied, However, you can modify this condition according to your specific need. if (args.currentCell.classList.contains('e-valuesheader') && this.pivotObj.dataSourceSettings.valueSortSettings.sortOrder === 'Ascending') { this.pivotObj.setProperties( { dataSourceSettings: { // Here we reset the sorting valueSortSettings: { sortOrder: 'None', headerText: '' }, }, }, true ); // Refreshing the data to reflect the changes on the UI. this.pivotObj.refreshData(); } } In the above code example, within the cellClick event method, we verify whether the clicked cell is a value field header by targeting the built-in class name (i.e., e-valuesheader ). Subsequently, we check the sort order of the value field, which is “Ascending”. If it is, we utilize the setProperties method, which allows us to set multiple properties simultaneously. With this method, we reset the sorting by setting the value of the sortOrder property to “None” and the headerText property to an empty string. The second parameter of setProperties is set to true to ensure the changes. Finally, we call the refreshData method to update the pivot table with the cleared sort settings. By implementing this code in your project, you can clear value sorting by clicking a specific value field header in a pivot table for the third time. Things to remember In the above workaround technique, we clear the value header sorting after the “Ascending” order is applied. While sorting, the sort order cycle will be as follows: descending, ascending, and then none. However, if you want to clear the sorting after the “Descending” order, simply change the above ‘If’ condition within the cellClick event to check for the “Descending” order, like this: this.pivotObj.dataSourceSettings.valueSortSettings.sortOrder === 'Descending'. This will effectively remove the sorting after the “Descending” order has been applied. The following GIF image, which portrays the results of the above-mentioned snippets, GIF For a practical demonstration, refer to the sample of stackblitz. Conclusion I hope you enjoyed learning how to dynamically clear the value sorting in an Angular Pivot Table. 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 When working with Pivot Accumulation Charts, such as pie, doughnut, funnel, or pyramid, you may want to customize the appearance of data labels to enhance readability or provide additional information in Angular Pivot Table. By default, these accumulation charts display row headers as data labels. However, you can customize the data label content to meet your specific requirements. In this article, we will guide you through the process of customizing data label content with a code example. Customizing data labels To customize the data labels in accumulation charts, you need to use the template property within dataLabel. The template property allows you to define a custom HTML template for the data label. This property can include placeholders for data point values, which are then replaced with actual data when rendering the chart. This flexibility enables you to format and style the data labels to match your application’s design and requirements. Here is a code example that demonstrates how to display values in the data labels and customize their visual style: [app.component.html] <ejs-pivotview #pivotview id="PivotView" [chartSettings]='chartSettings' [displayOption]='displayOption'> </ejs-pivotview> [app.component.ts] import { ChartSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/chartsettings'; import { DisplayOption } from '@syncfusion/ej2-angular-pivotview'; public displayOption: DisplayOption; public chartSettings: ChartSettings; @ViewChild('pivotview') public pivotObj: PivotView; ngOnInit(): void { this.displayOption = { view: 'Chart' } as DisplayOption; this.chartSettings = { chartSeries: { type: 'Pie', // Specify the type of Accumulation chart dataLabel: { visible: true, // Make the data label visible position: 'Outside', // Position the data label outside the chart // Define the template for data label content template: '<div style="color: Red">${(point.y)}</b></div>', }, }, } as ChartSettings; } In the above code, inside the chartSeries property, we specify the type as “Pie” to create a pie chart. Then, within the dataLabel, we set the visible property to true to make the data labels visible. We also set the position property to “Outside” to position the data labels outside the chart. Finally, we define the template property with an HTML string that represents the custom content of the data labels. In this example, the data label content is set to display the y value of the data point (i.e., point.y) and the text color is formatted to red, but you can change it to any desired value and color. The following screenshot, which portrays the difference between before and after customizing data label, Screenshots Before customizing data label After customizing data label For a practical example of this code in action, you can refer to the following Sample in Stackblitz. Conclusion I hope you enjoyed learning how to customize the data label content in Pivot Accumulation. 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 When working with pivot tables, you can apply filters at runtime through the filter dialog. Sometimes, you might need to filter specific field members from both search and non-search results. However, you may notice that after applying the filter, only the members chosen from the search results are filtered in the pivot table, while the selected members from the non-search results are not filtered if any occur. This is the actual behavior of the filtering dialog in our Syncfusion Pivot Table. However, you can change this behavior by using the workaround technique below to filter the selected members from both search and non-search results in the filter dialog. Filter selected members from search and non-search results in the member filter dialog To achieve this, you will need to use the memberFiltering event. This triggers before applying the filter using the dialog, that is, specifically while clicking the “OK” button. By using this event, you can apply filtering to the selected members from search and non-search results in the member filter dialog. [index.js] import { PivotViewComponent, GroupingBar } from '@syncfusion/ej2-react-pivotview'; export class DefalutSample extends SampleBase { pivotObj; memberFiltering(args) { var items = []; // Iterate through the current field members in the pivot table. for ( var i = 0; i < this.pivotObj.pivotCommon.currentTreeItems.length; i++) { // Check if the field members is selected. if (this.pivotObj.pivotCommon.currentTreeItems[i].isSelected) { // Add the actual text of the selected item to the array. items.push(this.pivotObj.pivotCommon.currentTreeItems[i].actualText); } } // Apply the collected items array to the `items` property of `filterSettings`. args.filterSettings.items = items; } render() { return ( <div className="control-pane"> <div> <PivotViewComponent id="PivotView" ref={(scope) => { this.pivotObj = scope; }} showGroupingBar={true} memberFiltering={this.memberFiltering.bind(this)} > <Inject services={[GroupingBar]} /> </PivotViewComponent> </div> </div> ); } } const root = createRoot(document.getElementById('sample')); root.render(<DefalutSample />); In the above code snippet, we create an empty items array to store selected field members(i.e., “France”, “Germany” and etc.). Then, we iterate through the currentTreeItems array, which represents the field members in the pivot table. For each field member, we check if it has been selected through the isSelected property. If a field member is selected, we add its actual text to the items array. Finally, we assign the items array to the items property of filterSettings. This effectively applies the filtering to selected field members from both search and non-search results. The following GIF images illustrate the difference before and after implementing the above workaround solution, GIF Before implementing the workaround solution After implementing the workaround solution For a practical demonstration, refer to the sample of stackblitz. Conclusion I hope you enjoyed learning how do I filter selected members from search and non-search results in the member filter dialog. 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 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 This article guides you through the process of making an API request to an Express server when clicking on value cells within a React Pivot Table. The demonstration covers two main scenarios: adding new data by clicking on an empty cell and deleting existing data by clicking on a cell that contains values. In this article, we use the Node.js Express server to perform these operations. However, you can adapt it to any web server to meet your specific requirements. Setting up the client-side (React application - App.js) In your React application, you will need to use a cellClick event to manage value cell interactions in your pivot table. This event is triggered when a cell in the pivot table is clicked, and it’s perfect for initiating API request. Below is a code example of how you can send a POST request to the server with relevant cell information and the current data source: [App.js] import { PivotViewComponent } from '@syncfusion/ej2-react-pivotview'; import { useState } from 'react'; // Example Pivot Table component with the cellClick event handler function App() { let pivotObj; // State initialization for holding data source const [datas, setDatas] = useState(pivotData); // The event handler for cell clicks async function cellSelecting(args) { if (args.data.axis == 'value') { let data = args.data; // POST request to your server const response = await fetch("http://localhost:5000/data", { method: "POST", headers: { "Content-Type": "application/json", }, // Passed the cell information and data source to the server here. body: JSON.stringify({ data, pivotData: datas }), }) // Get the response from the server here. Here we have returned updated data as a response. const res = await response.json(); // Assign the updated data to the pivot table. pivotObj.dataSourceSettings.dataSource = res; // Also update the state variable in which the data is stored. setDatas(res); } else{ // Cancel cell click event for non-value cells(i.e., row and column headers) args.cancel = true; } } // Render the Pivot Table component with the cellClick event bound return ( <PivotViewComponent ref={(scope) => { pivotObj = scope; }} cellClick={cellSelecting.bind(this)} // Additional pivot table configuration... /> ); }; export default App; Configuring the server-side (Express server - index.js) On the server-side, you will need to create an API endpoint that can receive data from the client-side (i.e., App.js) when a pivot table value cell is clicked. Here’s a code example of how a simple Express server could handle the Pivot Table API request: [index.js] // Middleware for parsing JSON and handling CORS import express from 'express'; import cors from 'cors'; const app = express(); app.use(express.json()); app.use(cors()); // Endpoint to handle updates to the pivot table data app.use("/data", (req,res) => { try{ console.log(req.body); let dataFromReact=req.body; // Delete the specific raw data of the cells from the data source if we have data in the cell. if(dataFromReact.data.value>0){ dataFromReact.pivotData.splice(Object.keys(dataFromReact.data.indexObject),1); res.status(200).send(dataFromReact.pivotData); } else{ // Added the raw data based on the cell combinations to the pivot table if the cell is empty. let newData={ "Sold": 40, "Country": dataFromReact.data.rowHeaders, "Year": dataFromReact.data.columnHeaders }; dataFromReact.pivotData.push(newData); // Send back the updated data source to the client res.status(200).send(dataFromReact.pivotData); } } catch (error) { res.status(400).send(error); } }); // Define the port for the server here. app.listen(5000,()=>{ console.log("Server is running on port 5000"); }); Implementation notes Upon clicking a value cell in the pivot table, the cellClick event is triggered. Inside this event method, we make an API request to the Express server (i.e., index.js file) with the relevant cell data and the current data source of the pivot table. On the Express server, we process requests from the client-side application (i.e., App.js). If the clicked cell has a value, we delete the corresponding data record from the data source; if it’s empty, we create a new record based on the provided cell information and update the data source. Then, we send back the updated data source to the client-side application. In the client-side application, we update the data source in both the pivot table and the React useState hook holding the pivot data. The following GIF image portrays the results of the code snippet mentioned above. GIF View Sample in GitHub Conclusion By following these steps, you can easily make an API request to an Express server when clicking on value cells within a React Pivot Table. Such implementations can greatly enhance the interactivity of your application, allowing you to perform dynamic data operations based on user interactions with the pivot table. Remember to handle server-side operations securely, manage errors properly, and always test your endpoints to ensure reliable performance. 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 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: In certain scenarios, you might want to personalize the appearance of your drill-through grid column headers to enhance readability and improve the presentation of data. This article explains how to apply custom styles to the drill-through grid column headers in the JavaScript Pivot Table. Customizing drill through grid column headers style: To customize the styles of the drill through grid column headers, you can target the built-in CSS classes associated with these header cells. Here’s an example of how you can change the font color and font family of the drill through grid column headers. [index.css] .e-drillthrough-grid.e-grid .e-gridheader { color: red !important; font-family: cursive; } In the code snippet above, we are targeting the CSS class .e-gridheader within the .e-drillthrough-grid container. Inside the curly braces, we are setting the color property to red and modifying the font-family to cursive. By applying these styles, you can easily personalize the appearance of drill-through grid column headers. Note: By adding “!important” to the style rule, you’re ensuring that this custom style takes precedence over any existing styles. The following screenshot portrays the results of the code snippet mentioned above. Screenshot: For a practical example of this code in action, you can refer to the following Sample in Stackblitz Conclusion: I hope you enjoyed learning how to apply custom styles to the drill-through grid column headers in Pivot Table. You can also refer to our 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 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: When working with a pivot field list, you may want to modify the layout of the fixed stand-alone field list in Angular Pivot Table to match the style of a pop-up field list. This customization can be particularly useful when you want a more dynamic and flexible UI. You can achieve this by customizing the CSS and manipulating the DOM elements during component creation within the created event. In this article, we will guide you through the process with a step-by-step example. Step-by-step implementation: Step 1: Setup the fixed stand-alone pivot field list component To create a fixed stand-alone field list component, you need to include the ejs-pivotfieldlist tag in your HTML page (i.e., app.component.html) and specify the renderMode as Fixed. This will render the static field list in the web page layout. In addition, bind the created event to trigger the necessary DOM manipulations after the component is created. [app.component.html] <div class="pivotfieldlist-control"> <ejs-pivotfieldlist #pivotfieldlist renderMode="Fixed" (created)="created()"> </ejs-pivotfieldlist> </div> Step 2: Implement the created event: Next, you need to implement the created event in your TypeScript file (i.e., app.component.ts). This function will modify the DOM structure programmatically and apply CSS classes to emulate a popup field list. [app.component.ts] created(): void { // Remove the "e-static" classname to change the static field list to a pop-up fixed field list. let rootElement: HTMLElement = this.fieldlistObj.element.querySelector('.e-pivotfieldlist-container'); rootElement.classList.remove('e-static'); // Add e-dialog and "e-popup" classes to apply the popup field list styles. rootElement.classList.add('e-dialog'); rootElement.classList.add('e-popup'); // Customize the field list header to resemble the pop-up field list header. let header: HTMLElement = rootElement.querySelector('.e-field-list-title'); header.classList.remove('e-field-list-title'); header.classList.add('e-title-header'); const headerDiv: HTMLElement = createElement('div', { className: 'e-dlg-header-content' }); rootElement.prepend(headerDiv); rootElement.querySelector('.e-dlg-header-content').appendChild(rootElement.querySelector('.e-title-header')); // Customize the title style of the header. let headerChildDiv: HTMLElement = createElement('div', { className: 'e-dlg-header' }); headerChildDiv.style.width = '100%'; rootElement.querySelector('.e-dlg-header-content').prepend(headerChildDiv); rootElement.querySelector('.e-dlg-header').appendChild(rootElement.querySelector('.e-title-header')); // Change the DOM structure of the field list footer content to resemble the pop-up field list footer. let contentDiv: HTMLElement = createElement('div', { className: 'e-dlg-content e-fieldlist-content' }); rootElement.append(contentDiv); rootElement.querySelector('.e-dlg-content').appendChild(rootElement.querySelector('.e-field-list-container')); let footerDiv: HTMLElement = createElement('div', { className: 'e-footer-content e-fieldlist-footer' }); rootElement.append(footerDiv); rootElement.querySelector('.e-footer-content').appendChild(rootElement.querySelector('.e-layout-footer')); } The following steps explain the above code snippet: Removing the static field list class: First, we remove the e-static class to transform the static field list into a popup field list. Adding popup field list classes: Then, we add the e-dialog and e-popup classes to apply the styles of the popup field list. Customizing the header: Next, we change the DOM structure and classes associated with the field list header to resemble the popup-styled header. Transforming content and footer: Similarly, we transform the DOM structure and classes for the content and footer sections to fit the popup style. Step 3: Define custom styles to your style sheet Finally, define the following CSS styles in your component’s CSS file (i.e., app.component.css). These styles will remove default shadows, set borders, manage overflows, and hide unnecessary elements to create a seamless pop-up experience. [app.component.css] .e-center-title { display: none; } .e-pivotfieldlist-container.e-dialog { box-shadow: unset; border: 1px solid; border-color: rgba(0,0,0,.14); } .e-pivotfieldlist-container .e-fieldlist-footer { display: none; } .e-pivotfieldlist-container .e-fieldlist-content { overflow: revert; } 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 display a fixed stand-alone pivot field list UI layout like a popup field list style in Angular Pivot Table You can refer to our Angular 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 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: The overlay effect is useful for providing visual feedback indicating that the component is currently loading or processing. In this article, we will explain how to apply the overlay effect to the entire web page and the Vue Pivot Table component during its initial loading and while any UI actions are being performed. Applying overlay effect to the entire web page: To create an overlay effect that covers the entire webpage during the initial loading or when any UI action is performed on a pivot table, please refer to the following code snippets: [App.css] /* App.css */ .black_overlay { position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.8; opacity: .80; filter: alpha(opacity=80); } .none { display: none; } In the above code snippet, we define the CSS styles that will be used for the overlay effect. This involves setting the position, size, background color, and opacity of the overlay. The “none” class is used to hide the overlay when the data is loaded. In this example, we will create a semi-transparent black overlay that covers the entire viewport. [App.Vue] <template> <ejs-pivotview id="pivotview" ref="pivotview" :load="load" :dataBound="dataBound" :actionBegin="actionBegin" :actionComplete="actionComplete"></ejs-pivotview> </template> <script lang="ts"> export default { methods: { load: function() { //Apply overlay on initial loading var div = document.createElement('div'); div.id = 'pivot-table-container'; div.className="black_overlay"; document.body.appendChild(div); }, dataBound: function() { let pivotObj = (this.$refs.pivotview).ej2Instances; //Remove overlay after the data gets loaded. if (pivotObj.dataSourceSettings.values.length > 0) { var ele=document.querySelector('#pivot-table-container'); ele.classList.add('none'); } }, actionBegin: function(){ //Apply overlay when any action begins. var div1 = document.createElement('div'); div1.id = 'pivot-table-overlay'; div1.className="black_overlay"; document.body.appendChild(div1); }, actionComplete: function(){ //Remove overlay element after the action gets completed. document.querySelector('#pivot-table-overlay').remove(); } } } </script> The following steps explain the above code snippet: First, we use the load event to display an overlay effect when the pivot table is initially loading. In this event, we create a new div with the id “pivot-table-container” and append the newly created CSS class “black_overlay”. This applies the overlay effect during the initial loading. Once the data has been bound to the pivot table, we remove the overlay effect to reveal the pivot table content using the dataBound event. This event is triggered when the pivot table is rendered. In this event, we retrieve the element with the ID “pivot-table-container” and add the “none” class to remove the overlay effect. Then, we use the actionBegin event to display an overlay effect when performing any UI action, such as sorting, filtering, grouping, and more. In this event, we create and append a new div similar to the initial loading scenario. This applies an overlay effect at the start of any action taken on the pivot table. Finally, we use the actionComplete event to remove the overlay effect when any action on the pivot table has been completed. In this event, we retrieve the DOM element with the ID “pivot-table-overlay” using the querySelector() method. Then, we call the remove() method to turn off the overlay effect from the pivot table. The following GIF image, which portrays the results of the above-mentioned snippets, GIF Image for applying overlay effect to the entire web page: For a practical demonstration, refer to the sample of stackblitz Applying overlay effect to the pivot table component: To create an overlay effect that covers only the pivot table component during the initial loading or when any UI action is performed, please refer to the following code snippets:. [App.css] .pivot_overlay { position: relative; } .pivot_overlay::after { content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */ pointer-events: none; /* This makes the overlay click-through */ } [App.Vue] <template> <ejs-pivotview id="pivotview" ref="pivotview" :created="created" :dataBound="dataBound" :actionBegin="actionBegin" :actionComplete="actionComplete"></ejs-pivotview> </template> <script lang="ts"> export default { methods: { created: function() { //Apply overlay while creating the component document.getElementById("pivotview").classList.add("pivot_overlay"); }, dataBound: function() { let pivotObj = (this.$refs.pivotview).ej2Instances; // Remove overlay after the data gets loaded. if (pivotObj.dataSourceSettings.values.length > 0) { document.getElementById("pivotview").classList.remove("pivot_overlay"); } }, actionBegin: function(){ //Apply overlay when any action begins. document.getElementById("pivotview").classList.add("pivot_overlay"); }, actionComplete: function(){ //Remove overlay element after the action gets completed. document.getElementById("pivotview").classList.remove("pivot_overlay"); } } } </script> In the above code, we used the created event method to apply the overlay effect during component creation. We also used the actionBegin event method to apply the overlay during any action performed. Finally, the dataBound and actionComplete event methods are used to remove the overlay effect after the relevant actions are completed. The following GIF image, which portrays the results of the above-mentioned snippets, GIF Image for applying overlay effect to the pivot table component: For a practical demonstration, refer to the sample of stackblitz Conclusion: I hope you enjoyed learning how to apply overlay effects to the Pivot Table component during its initial loading and while any UI actions are being performed 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 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!
This article explains how to sort specific field members based on another field in the Angular Pivot Table. Sort specific field members based on another field in Pivot Table When working with a pivot table, you may want to sort specific field members based on the values of another field in the data source that is not bound in the report. There isn’t a direct option to accomplish this within the pivot table. However, you can achieve this through a workaround by manipulating the data source during the load event and modifying the sortSettings property. Here is a code example that shows how to sort specific field members based on other field values in a pivot table: [app.component.html] <ejs-pivotview #pivotview id="PivotView" (load)="onLoad($event)"></ejs-pivotview> [app.component.ts] import { PivotViewAllModule, LoadEventArgs } from '@syncfusion/ej2-angular-pivotview'; @Component({ imports: [PivotViewAllModule], }) export class AppComponent { public dataSourceSettings: IDataOptions; onLoad(args: LoadEventArgs): void { (args.dataSourceSettings.dataSource as any).sort((a, b) => { // Here, we sort the data source based on "Quantity" field values return a.Quantity - b.Quantity; }); } ngOnInit(): void { this.dataSourceSettings = { // Here, we sort the product field members sortSettings: [{ name: 'Products', order: 'None' }] }; } } In the above code example, we used the load event to sort the data source based on the values in the “Quantity” field. This field is not bound in the report but is present in the data source. Following this, we set the sort order for the “Products” field to None by using the sortSettings property. This allows the members of this field to be sorted based on the values in the “Quantity” field. The following screenshot, which portrays the difference between before and after sort the “Products” field members, Screenshot Before sort the field members After sort the field members For a practical demonstration, refer to the sample of stackblitz. Conclusion I hope you enjoyed learning how to sort specific field members based on another field value in Angular Pivot Table. 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!
This article explains how to hide values in Pivot Table based on specified conditions. Hide values in the pivot table based on specified conditions When working with a pivot table, you may want to hide value cells based on a certain condition. This can be achieved by utilizing the queryCellInfo event in the gridSettings of the pivot table. This event is triggered for each cell in the pivot table, allowing you to modify the content of the cells based on your requirements. Below is an example code snippet that demonstrates how to achieve this: [index.js] var pivotObj = new ej.pivotview.PivotView({ gridSettings: { queryCellInfo: function (args) { var colIndex = Number(args.cell.getAttribute('data-colindex')); var rowIndex = Number(args.cell.getAttribute('index')); var pivotValue = args.data[colIndex]; // Here, We have hidden the "Units Sold" pivot table cells that were less than "40000." if ( pivotValue.axis === 'value' && pivotValue.actualText === 'Sold' && pivotValue.value < 40000) { args.cell.querySelector('.e-cellvalue').innerText = ''; //Here, we have updated the pivot values to reflect these changes in exports. pivotObj.pivotValues[rowIndex][colIndex].formattedText = ''; pivotObj.pivotValues[rowIndex][colIndex].value = null; } }, } }); The following steps explain the above code snippet: First, we use the data-colindex attribute to get the column index of the cell and the index attribute to get the row index. We retrieve the pivot value using these column and row index. Next, we apply our condition to the retrieved pivot value. In this example, we check if the pivot value belongs to the Sold field and if it is less than 40000. If the condition is met, we clear the text content of the cell using the innerText property of the cell’s e-cellvalue class. This hides the value in the cell. To reflect these changes in exporting, we update the pivot values by assigning an empty string to the formattedText property and setting the value to null. The following screenshot, which portrays the difference between before and after applying the condition, Screenshots Before applying condition After applying condition For a practical demonstration, refer to the sample of stackblitz. Conclusion: I hope you enjoyed learning how to hide values in Pivot Table based on specified conditions. You can also refer to our 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 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!
This article explains how to dynamically set the height of Pivot Table and Chart based on the row count. Dynamically set the height of Pivot Table and Chart based on the row count In certain scenarios, you may want to dynamically adjust the height of your pivot table and chart based on the row count. To achieve this, you can use the enginePopulated and chartSeriesCreated events in the pivot table. These events allow you to calculate the number of rows in the pivot table and adjust the height accordingly. Here’s an example of how to achieve this: [index.js] var pivotObj = new ej.pivotview.PivotView({ enginePopulated: function (args) { var columnCount = 0; var rowCount = 0; if (args.pivotValues != null) { for (var i = 0; i < args.pivotValues.length; i++) { if (args.pivotValues[i] && ej.base.isNullOrUndefined(args.pivotValues[i][0])){ columnCount++; } else { rowCount++; } // here height is set based on the number of rows to the pivot table view. pivotObj.height = ((rowCount <= 20 ? rowCount : 20) * pivotObj.gridSettings.rowHeight) + (columnCount * pivotObj.gridSettings.rowHeight) + (pivotObj.showToolbar ? pivotObj.element.querySelector('.e-pivot-toolbar').offsetHeight : 0) + 20; } } }, chartSeriesCreated: function () { if (pivotObj.displayOption.view === 'Both' && pivotObj.chart) { // here height is set based on the number of rows to the pivot chart view pivotObj.chart.height = pivotObj.height.toString(); } }, }); In this code example, the enginePopulated event is triggered when the pivot table engine is populated with data. Inside the event, you can calculate the number of rows and columns in the pivot table. Based on these values, you can set the height of the pivot table dynamically by multiplying the row count by the row height and adding any additional elements heights (in this case, we have considered the height of the toolbar). Similarly, the chartSeriesCreated event is triggered when the pivot chart series is created. Inside the event handler, you can check if the pivot view is set to display both the table and chart. If so, you can set the height of the pivot chart by assigning the same height value as 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. Conclusion: I hope you enjoyed learning how to dynamically set the height of Pivot Table and Chart based on the row count. You can also refer to our 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 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 In certain scenarios, you may want to personalize the appearance of your header cells to enhance readability and improve the presentation of data. This article explains how to apply custom styles to the row and column headers of React Pivot Table. Customizing row and column headers To customize the header styles of a pivot table, you can target the built-in CSS classes associated with the pivot table’s header cells. Here’s an example of how you can change the background color and font family of both column and row headers. [index.css] /* Customize the column headers here. */ .e-pivotview .e-headercell { background-color: thistle !important; font-family: cursive; } /* Customize the row headers here. */ .e-pivotview .e-rowsheader { background-color: skyblue !important; font-family: 'Franklin Gothic Medium'; } In the above code snippet, we are targeting the CSS classes .e-headercell and .e-rowsheader within the .e-pivotview container. These classes represent the column headers and row headers, respectively. Inside the curly braces, you can define the styles that you want to apply. In this example, we have set the background-color property to thistle for the column headers and skyblue for the row headers. Additionally, we have modified the font-family of the column header to cursive and the row header to Franklin Gothic Medium. By applying these styles, you can easily personalize the appearance of the pivot table headers. 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 apply custom styles to the pivot table headers. 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 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 create a Chart based on the Pivot Table grand total values. Create a Chart based on Pivot Table grand total values When working with pivot tables, you might want to visualize the grand total values on a chart. This can be achieved by using the enginePopulated event. This event is triggered after the pivot engine has been populated and allows you to render the Chart component based on the pivotValues. Here is a code example that shows how to create a Chart based on Pivot Table grand total values. [index.html] <div id="PivotView" style="height: 100%"></div> <div id="Chart"></div> [index.js] var chart = null; var pivotObj = new ej.pivotview.PivotView({ enginePopulated: function (args) { var data = []; for (var i = 1; i < args.pivotValues.length - 1; i++) { for ( var j = 0; args.pivotValues[i] != null && j < args.pivotValues[i].length; j++) { if ( args.pivotValues[i][j] != null && args.pivotValues[i][j].axis == 'value' && args.pivotValues[i][j].isGrandSum && args.pivotValues[i][j].rowHeaders !== '' && args.pivotValues[i][j].columnHeaders == '') { // Here we have framed the data to render chart component based on pivotValues var object = { x: args.pivotValues[i][j].rowHeaders, y: parseFloat(args.pivotValues[i][j].formattedText), text: args.pivotValues[i][j].rowHeaders +':' + args.pivotValues[i][j].formattedText, }; } } data.push(object); } // Here we have create the AccumulationChart if (chart == null) { chart = new ej.charts.AccumulationChart({ series: [ { dataSource: data, xName: 'x', yName: 'y', startAngle: 0, endAngle: 360, dataLabel: { visible: true, position: 'Outside', name: 'text', font: { fontWeight: '100', }, }, innerRadius: '0%' }, ], enableAnimation: false, }); chart.appendTo('#Chart'); } else { chart.series = [ { dataSource: data, xName: 'x', yName: 'y', startAngle: 0, endAngle: 360, dataLabel: { visible: true, position: 'Outside', name: 'text', font: { fontWeight: '600', }, }, innerRadius: '0%', }, ]; // Here we have called refresh method to render the component again with updated data. chart.refresh(); } } }); pivotObj.appendTo('#PivotView'); In the above code, we iterate through the pivotValues to find the grand total values. Then, we create an object for each grand total value with properties x, y, and text. These objects are pushed into a data array, which is then used as the data source for the chart component. Following this, we create an AccumulationChart using the ej.charts.AccumulationChart class, and it is appended to a container with the ID #Chart. If the chart already exists, we simply update its series with the new data and called the refresh method to render the component again. 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 create a Chart based on the Pivot Table grand total values. You can also refer to our 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 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!
This article explains how to dynamically show or hide toolbar options in the Pivot Table based on specific conditions. Dynamically show or hide toolbar options in a Pivot Table based on a condition When working with pivot table, you may want to customize the user interface by dynamically showing or hiding certain toolbar options (e.g., Remove and Load) based on specific conditions. This can be achieved by utilizing the actionBegin event in your code. This event is triggered before any action is performed on the pivot table. You can use this event to check the current action and show or hide toolbar options accordingly. Here is a code example that demonstrates how to use the actionBegin event to show or hide certain toolbar options based on the pivot view displayOption. [index.js] var pivotObj = new ej.pivotview.PivotView({ showToolbar: true, displayOption: { view: 'Both' }, toolbar: ['New', 'Save', 'SaveAs', 'Rename', 'Remove', 'Load', 'Grid', 'Chart', 'Export', 'SubTotal', 'GrandTotal', 'Formatting', 'FieldList'], actionBegin: function (args) { var toolbar = pivotObj.element.querySelector('.e-pivot-toolbar').ej2_instances[0]; // Here, we check the action name if (args.actionName === 'Show table view') { // Here we showed certain toolbar options for table view toolbar.hideItem(4, false); toolbar.hideItem(5, false); } else if (args.actionName === 'Show chart view') { // Here we showed certain toolbar options for chart view toolbar.hideItem(4, true); toolbar.hideItem(5, true); } }, }); In the above code example, pivotObj refers to your pivot table instance. The hideItem method is used to show or hide toolbar options based on their position in the toolbar property. The first argument of hideItem is the index of the toolbar option (in this case, the index for the Remove option is 4 and for the Load option is 5), and the second argument is a Boolean value indicating whether to hide (i.e., true) or show (i.e., false) the option. Here, we have shown the remove and load toolbar options for the table view. When switching to the chart view through the UI action, we hide them from the toolbar. You can adapt the code to fit your specific requirements, such as showing or hiding different toolbar options. The following screenshots, which portrays the results of the code snippet mentioned above, Screenshots Show the specified toolbar options for the table: Hide the specified toolbar options for the chart: For a practical demonstration, refer to the sample of stackblitz. Conclusion: I hope you enjoyed learning how to dynamically show or hide toolbar options in the Pivot Table based on specific conditions. You can also refer to our 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 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!
This article explains how to highlight the current view icon in Angular Pivot Table toolbar items. Highlight current view icon in Pivot Table toolbar items When working with a pivot table, you may want to visually differentiate the current view icon (i.e., table or chart) among toolbar items by customizing their background colors. This can be particularly useful for enhancing the user experience and making it easier to keep track of which view is currently active. Below is a step-by-step guide on how to do this, along with a code example. Step 1: First, define the styles for the background colors to be applied to the view icons, such as the table and chart. In this example, we have used the color pink. [app.component.css] .chart-background { background: pink !important; } .grid-background { background: pink !important; } In the above code example, the !important declaration is used to ensure the background color is applied even if other styles are trying to override it. Step 2: Next, you will need to add logic to dynamically set the background for the current view icon (i.e., table or chart) based on certain conditions. To achieve this, use the dataBound event in your code. The dataBound event is triggered when the pivot table is rendered. Here is a code example that shows how to dynamically set the background for the current view icon in toolbar items. [app.component.html] <ejs-pivotview #pivotview id="PivotView" (databound)="dataBound($event)"></ejs-pivotview> [app.component.ts] @ViewChild('pivotview') public pivotObj: PivotView; // Set the background color for the current view icon in the toolbar items. dataBound(){ if(this.pivotObj.currentView=="Table"){ // Here we have applied the background color for table icon document.getElementById(this.pivotObj.element.id + 'chart_menu').classList.remove('chart-background'); document.getElementById(this.pivotObj.element.id + 'grid').classList.add('grid-background'); } else if(this.pivotObj.currentView=="Chart"){ // Here we have applied the background color for chart icon document.getElementById(this.pivotObj.element.id + 'grid').classList.remove('grid-background'); document.getElementById(this.pivotObj.element.id + 'chart_menu').classList.add('chart-background'); } } In the above dataBound event, pivotObj.currentView returns the current view of the pivot table, whether it is Table or Chart. If it’s Table, we remove the chart-background class from the chart_menu toolbar item and add the grid-background class to the grid toolbar item, and vice versa. This will effectively apply the background color to the toolbar items. The following GIF image, which portrays the results of the code snippet mentioned above, GIF For a practical demonstration, refer to the sample of stackblitz. Conclusion: I hope you enjoyed learning how to customize the background color of selected toolbar Item in Angular Pivot Table You can refer to our Angular 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 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!
This article explains how to render a multi-series chart in React Pivot Table. Rendering multi-series chart in Pivot Table Rendering a multi-series chart in a pivot table can provide a detailed comparison of various data series over the same period. To achieve this, you can use the chartSeriesCreated event. This event triggers when the pivot chart series are created, and it allows you to customize the series based on your requirements. The following code example demonstrates how to use the chartSeriesCreated event to display multiple series as different types of charts. [index.js] import { PivotViewComponent, FieldList, Inject, PivotChart } from '@syncfusion/ej2-react-pivotview'; function ChartIntegration() { let pivotObj; function chartOnLoad(args) { let selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = ( selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1) ).replace(/-dark/i, 'Dark'); } function chartSeriesCreated(args) { for (var i = 0; i < args.series.length; i++) { if (args.series[i].name == 'Solar' || args.series[i].name == 'Wind') { args.series[i].type = 'Line'; // Here we have displayed Solar and Wind series as Line chart. } } } return ( <PivotViewComponent id="PivotView" ref={(d) => (pivotObj = d)} displayOption={{ view: 'Chart' }} chartSeriesCreated={chartSeriesCreated} chartSettings={{ title: 'Sales Analysis', load: chartOnLoad.bind(this), chartSeries: { type: 'Column' } }} > <Inject services={[PivotChart, FieldList]} /> </PivotViewComponent> ); } export default ChartIntegration; In the above code snippet, we iterate through the args.series array, which contains the chart series. We check the name property of each series, and when it matches Solar or Wind, we change the series type to Line. This change will display the specified series as line charts in the pivot table. 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 render a multi-series chart in 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 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!
