Essential JS PivotGrid: Elements

25 Mar 20216 minutes to read

The pivot grid control supports the hyperlink option to link data for each individual cell. The hyperlink can be enabled separately for row header, column header, value, and summary cells. The following are the respective properties and they should be declared under the property hyperlinkSettings.

Also, the hyperlink option provides separate events for row header, column header, value, and summary cells as mentioned below:

  • HTML
  • $(function() {
    
        $("#PivotGrid1").ejPivotGrid({
            //...
    		hyperlinkSettings: {
                enableValueCellHyperlink: true,
                enableRowHeaderHyperlink: true,
                enableColumnHeaderHyperlink: true,
                enableSummaryCellHyperlink: true
            },
            valueCellHyperlinkClick: "CellClickEvent",
            rowHeaderHyperlinkClick: "CellClickEvent",
            columnHeaderHyperlinkClick: "CellClickEvent",
            summaryCellHyperlinkClick: "CellClickEvent",
        });
    
        CellClickEvent = function(evt) {
            alert("Cell click event is fired.");
        }
    
    });

    Hyperlink in JavaScript pivot grid control

    Header Settings

    The headerSettings property allows you to enable/disable row/column header names in the pivot grid control. This feature can be enabled separately for row header and column header. The following are the respective properties:

    • showRowItems: Allows you to enable/disable the row header names in the PivotGrid control.

    • showColumnItems: Allows you to enable/disable the column header names in the PivotGrid control.

  • HTML
  • $(function() {
    
        $("#PivotGrid1").ejPivotGrid({
            //...
            headerSettings: {
                showRowItems: true,
                showColumnItems: true
            }
        });

    Header settings in JavaScript pivot grid control

    Show unique name on pivot button

    The showUniqueNameOnPivotButton property allows you to show the appropriate unique name in the pivot button.

  • HTML
  • $(function() {
    
        $("#PivotGrid1").ejPivotGrid({
            //...
            enableGroupingBar: true,
            showUniqueNameOnPivotButton: true
        });

    Unique name on pivot button in JavaScript pivot grid control

    Selection

    You can select a particular range of value cells from the pivot grid and manipulate/display them. Cell selection is applicable only for value cells, and you can enable this functionality by setting the enableCellSelection property to true.

    The cellSelection event will be triggered after the selection process, that is, when the mouse left click is released. The event argument contains a collection of JSON records and header values, which contains information about selected cells.

  • HTML
  • $(function() {
    
        $("#PivotGrid1").ejPivotGrid({
            //...
            enableCellSelection: true,
            cellSelection: "valueCellClick"
        });
    
        valueCellClick = function(evt) {
            //This event lets you to perform required operation with the selected range of cells.
            cellvalue = evt.JSONRecords;
            rowheaders = evt.rowHeader;
            colheaders = evt.columnHeader;
        }
    });

    Cell selection in JavaScript pivot grid control

    Cell context

    The cell context allows you to perform any custom operation by right-clicking the cell. For example, you can create and display the context menu by right-clicking the cell.

    The cell context is enabled by setting the enableCellContext property to true. The cellContext event will be enabled by right-clicking for provided cell information through the event argument.

  • HTML
  • $(function() {
    
        $("#PivotGrid1").ejPivotGrid({
        	//...
            enableCellContext: true,
            cellContext: "cell_RightClick"
        });
    });
    
    cell_RightClick = function(evt) {
        //You can write your code here
    }

    Conditional formatting

    The conditional formatting in the pivot grid allows you to highlight particular cells with certain color, font-style, font-family, etc., based on the applied condition. Also, the condition can be applied for certain measure alone.

    The conditional formatting is enabled by setting the enableConditionalFormatting property to true and the formatting dialog is launched when the “createConditionalDialog” method is invoked.

  • HTML
  • <html>
    //...
    
    <body>
        <div id="PivotGrid1"> </div>
        <button id="Button1">Apply formatting</button>
    
       <script type="text/javascript">
            $(function() {
                $("#PivotGrid1").ejPivotGrid({
                    //...
                    enableConditionalFormatting: true
                });
                $("#Button1").ejButton({
                    size: "normal",
                    roundedCorner: true,
                    click: "btnClick"
                });
            });
    
            function btnClick(e) {
                var pivotGridObj = $('#PivotGrid1').data("ejPivotGrid");
                if (pivotGridObj.model.enableConditionalFormatting) {
                    pivotGridObj.openConditionalFormattingDialog();
                }
            }
        </script>
    </body>
    
    </html>

    Conditional formatting dialog in JavaScript pivot grid control

    JavaScript pivot grid control with conditional formatting

    Export

    You can export the pivot grid with highlighted particular cells along with its formatting styles.

    Limitations for Word:

    The following border styles are not supported:

    • Solid
    • Groove
    • Ridge

    Limitations for PDF:

    Border styles are not applicable.

    Limitations for Excel:

    The following border styles are alone supported:

    • Dashed
    • Dotted
    • Double

    Also border size is not supported.

    Excel exporting with conditional formatting in JavaScript pivot grid control