Disable a PivotPanel Checkbox Field in JavaScript

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. Handle the formatItem event to disable the checkbox

Getting Started:

Handle the formatItem event to disable the checkbox

Disabling the checkbox can be accomplished by handling the formatItem event of the FlexGrid control that is used to display the fields in the panel.

// Disable checkbox for disabled fields
pivotPanel._lbFields.formatItem.addHandler((s, e) => {
  if (e.panel == s.cells) {
    let row = e.getRow();
    let col = e.getColumn();

    if (disabledFields.indexOf(row.dataItem[col.binding]) > -1) {
      let chk = e.cell.querySelector('input');
      if (chk) {
        chk.disabled = true;
      }
    }
  }
});

Please note that the user will still be able to remove the field through the context's menu 'Remove Field' option. If you want to disable that as well then you'll have to override the _canExecute method to disable the 'Remove Field' option for the disabled fields.

An example app showcasing this code can be found here.

Happy coding!