Hi Jussi,
We understand that you need to combine the parent and child rows and display them as a single row in a pivot table. If this is the case, we would like to inform you that, currently, we do not have a built-in option for this requirement. However, you can accomplish it through customization. To do so, you need to remove the parent rows from the pivot table using JavaScript Interop and customize the header names of the last level child rows using the CellTemplate property. Please refer to the code example below.
Code example:
[Index.razor]
|
<SfPivotView TValue="ProductDetails" ID="@ID"> <PivotViewDataSourceSettings> <PivotViewValueSortSettings HeaderDelimiter="-"></PivotViewValueSortSettings> </PivotViewDataSourceSettings> <PivotViewEvents TValue="ProductDetails" DataBound="onDataBound"></PivotViewEvents> <PivotViewTemplates> <CellTemplate> @{ var data = (context as AxisSet); if (data != null) { if (data.Axis == "row" && !data.HasChild) { data.FormattedText = data.ValueSort["levelName"].ToString(); // Here we customize the child row headers @data.FormattedText } else if (data.Axis == "row" && data.HasChild) { parentIndexs.Add(data.RowIndex); // Here we store the index of the parent row so we can remove it later. @data.FormattedText
} else { @data.FormattedText }
} } </CellTemplate> </PivotViewTemplates> </SfPivotView> @code { public List<int> parentIndexs = new List<int>(); private string ID = "Pivot"; public async void onDataBound() { await JSRuntime.InvokeVoidAsync("removeRows", parentIndexs, ID); // Here we invoke the Javascript function } } |
[Host.cshtml]
|
<body> // Here we refered the clipboard script file <script src="scripts/removeRows.js"></script> </body> </html> |
[removeRows.js]
|
async function removeRows(parentIndexs, ID) { //To get the pivot table element by using it's ID var indicesToRemove = parentIndexs; var Element = document.getElementById(ID); const thead = document.querySelector('thead[role="rowgroup"]'); const columnCount = thead ? thead.querySelectorAll('tr[role="row"]').length : 0; // Obtain the count of rows that correspond to the column headers. const pivotTable = document.querySelector('#Pivot_grid_content_table tbody'); let visibleRowCount = 0;
indicesToRemove.forEach(index => { const row = pivotTable.querySelector(`tr[data-rowindex="${index - columnCount}"]`); if (row) { // We are hiding the parent rows from the pivot table here. row.style.display = 'none'; } });
// Count the visible rows Array.from(pivotTable.rows).forEach(row => { if (row.style.display !== 'none') { visibleRowCount++; } });
// Adjust the height based on visible rows const rowHeight = 30; // Height of each row in pixels const newHeight = visibleRowCount * rowHeight;
const contentDiv = document.querySelector('.e-gridcontent .e-yscroll'); if (contentDiv) { contentDiv.style.height = newHeight + 'px'; } }
|
Output screenshot:
(Note: The customization mentioned above does not update the pivot values (cell information) and only modify the UI elements of the pivot table. As a result, dynamic UI operations on the pivot table, such as sorting, filtering, adding, or removing fields, may lead to incorrect results in certain scenarios)
Meanwhile, we have prepared a sample for your reference. Please find it from the below attachment
Furthermore, you can refer to the user guide documentation for more information about the cell template property.
Document: https://blazor.syncfusion.com/documentation/pivot-table/row-and-column#cell-template
Please let us know if you have any concerns.
Regards,
Sridhar Karunakaran.
