Prevent Data from being Moved to Specific Fields in Angular

Background:

Sometimes developers won't want users placing certain data objects in specific fields in the PivotPanel; this is possible to implement using some events to track what fields users are dragging.

Steps to Complete:

1. Assign a method to the updatingView event

2. Inside the method, create a check for each field that you don't want to be added to specific fields

Getting Started

Assign a method to the updatingView event

If we want to prevent users from moving certain data objects to certain fields, we're going to tie a method to the updatingView event. UpdatingView gets called as the grid is about to update, which allows us to check and see if the change was valid, or if we want to revert it.

<wj-pivot-panel #thePanel [itemsSource]="data" (updatingView)="validFieldCheck()"></wj-pivot-panel>

Inside the method, create a check for each field that you don't want to be added to specific fields

Next, we'll initialize the validFieldCheck() method. Inside this method, we'll aslso state that we don't want the 'Sales' or 'Downloads' fields to be able to be moved under the 'Columns' section of the PivotPanel.

validFieldCheck() {
    if(this.pivotPanel.columnFields[this.pivotPanel.columnFields.length-1]._header === 'Downloads') {
        this.pivotPanel.columnFields.pop();
    } else if(this.pivotPanel.columnFields[this.pivotPanel.columnFields.length-1]._header === 'Sales') {
        this.pivotPanel.columnFields.pop();
    }
}

This will check and see if one of those two fields were moved under 'Columns' in the PivotPanel, signified by checking the pivotPanel.columnFields property.

You can find a live sample of this project at this location: https://stackblitz.com/edit/wijmo-knowledgebase-angular-pivotgrid-prevent-dragging-to-field