Prevent Data from being Moved to Specific Fields in Vue

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 :items-source="ng" :updating-view="updatingView"></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 updatingView() method. Inside this method, we'll also state that we don't want the 'Buyer' or 'Amount' fields to be able to be moved under the 'Columns' section of the PivotPanel.

updatingView(pivotPanel) {
    if(pivotPanel.columnFields[pivotPanel.columnFields.length-1]._header === 'Buyer') {
        pivotPanel.columnFields.pop();
    }
    if(pivotPanel.columnFields[pivotPanel.columnFields.length-1]._header === 'Amount') {
        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.