How to display a tooltip for truncated grid columns in the drill-through dialog of the JavaScript Pivot Table?

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!