Disable a PivotPanel Checkbox Field in Angular

Background:

Sometimes, you may want to disable the checkbox of a specific field in your PivotPanel to prevent users from interacting with it.

Steps to Complete:

1. Create a PivotEngine
2. List fields to lock
3. Wire formatItem on the internal fields grid

Getting Started:

Create a PivotEngine

Provide items (array of objects) and a few fields; bind both Panel and Grid to the same engine instance. This enables OLAP UI.

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import * as wjOlap from '@mescius/wijmo.olap';
import { WjPivotPanel } from '@mescius/wijmo.angular2.olap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements AfterViewInit {
  engine = new wjOlap.PivotEngine({
    itemsSource: [
      { Country: 'US', Category: 'Electronics', Product: 'Phone', Amount: 420.5, Quantity: 2, Date: new Date() },
      { Country: 'UK', Category: 'Clothing',    Product: 'Shirt', Amount: 55.0,  Quantity: 1, Date: new Date() },
    ],
    fields: [
      { binding: 'Country', header: 'Country' },
      { binding: 'Category', header: 'Category' },
      { binding: 'Product', header: 'Product' },
      { binding: 'Amount', header: 'Amount', format: 'n2' },
      { binding: 'Quantity', header: 'Quantity' },
      { binding: 'Date', header: 'Date' },
    ],
    rowFields: ['Country'],
    valueFields: ['Amount', 'Quantity'],
  });

  // keep reading for next steps...
  @ViewChild('pp', { static: true }) pivotPanelCmp!: WjPivotPanel;

  ngAfterViewInit(): void {}
}

List fields to lock

Define disabledFields: string[] = ['Quantity', 'Amount']. These are the field headers you want to protect.

disabledFields: string[] = ['Amount']; // change as needed

Wire formatItem on the internal fields grid

In ngAfterViewInit, grab pivotPanel.control._lbFields.formatItem.addHandler(...) and disable the checkbox for rows whose field header matches disabledFields.

ngAfterViewInit(): void {
  const panel = this.pivotPanelCmp.control as wjOlap.PivotPanel;
  const fieldsGrid = (panel as any)._lbFields; // private; version-sensitive
  if (!fieldsGrid?.formatItem) return;

  fieldsGrid.formatItem.addHandler((s: any, e: any) => {
    if (e.panel === s.cells) {
      const row = e.getRow();
      const col = e.getColumn();
      const header = row?.dataItem?.[col?.binding];
      if (this.disabledFields.includes(header)) {
        const chk: HTMLInputElement | null = e.cell.querySelector('input[type="checkbox"]');
        if (chk) chk.disabled = true; // prevents toggling protected field
      }
    }
  });
}

If implemented correctly, your checkboxes should now be disabled/protected. I hope you find this article helpful. Happy coding!