New to Kendo UI for jQuery? Download free 30-day trial

PivotGrid hide row and column summaries

Environment

Product PivotGrid for Progress® Kendo UI®
Created with version 2019.2.619

Description

The Kendo UI PivotGrid does not allow us to hide 'All' row/column. Can I hide the summary and grand summary rows and columns? I love the pivot capabilities, but in my case the summaries show averages of the averages which is not necessary. What if I want to deactivate the total sum arrow?

Solution

We have a feature request for this functionality to be available via the configuration options. Upvote it so it can gather greater popularity and get included in the built-in options sooner.

Meanwhile, the easiest way to accomplish the desired behaviour would be to: 1. Use CSS to hide the expand icons of the rows

```css
    .k-grid-footer span.k-icon{
        display:none;
    }
```
  1. Or use the dataBound event to target elements that you wish to hide

        dataBound: function(e) {
            this.columnsHeader.find("table colgroup col:last-child").css({width:0});
            this.content.find("table colgroup col:last-child").css({width:0});
            this.element.find(".k-grid-footer").hide();
        }
    
    <div id="example">
      <div id="pivotgrid"></div>

      <div class="responsive-message"></div>

      <script>
        $(document).ready(function () {
          var pivotgrid = $("#pivotgrid").kendoPivotGrid({
            filterable: true,
            columnWidth: 120,
            height: 570,
            dataSource: {
              type: "odata",
              transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
              },
              schema: {
                cube: {
                  dimensions: {
                    ContactName: { caption: "All Contacts" },
                    CompanyName: { caption: "All Companies" },
                    Country: { caption: "All Countries" },
                    ContactTitle: { caption: "All Titles" }
                  },
                  measures: {
                    "Contacts Count": { field: "CustomerID", aggregate: "count" }
                  }
                }
              },
              columns: [{ name: "Country", expand: true }, { name: "CompanyName" } ],
              rows: [{ name: "ContactTitle", expand: true }],
              measures: ["Contacts Count"]
            },
            dataBound: function(e) {
              this.columnsHeader.find("table colgroup col:last-child").css({width:0});
              this.content.find("table colgroup col:last-child").css({width:0});
              this.element.find(".k-grid-footer").hide();
            }
          }).data("kendoPivotGrid");

        });
      </script>
    </div>
In this article
Not finding the help you need? Improve this article