Disable Drag and Drop with a Button Click in React

Background:

FlexGrid has a property called AllowDragging, which takes an enum and determines what users can and cannot do to a grid. We can tie this enum to a button that will allow a user to lock in rows and columns so they cannot be moved around the grid.

Steps to Complete:

1. Tie a method to the button click event

2. Set the allowDragging property of FlexGrid to '0', which prevents dragging and dropping columns

Getting Started

Tie a method to the button click event

Since this sample uses a button, we'll create a method called disableDragAndDrop(), which we'll then tie to the click event of the button.

<button onClick={this.disableDragAndDrop.bind(this)}

Set the allowDragging property of FlexGrid to '0', which prevents dragging and dropping columns

In the TypeScript, we use mainGrid to reference our instance of FlexGrid, so all that needs done is to create the disableDragAndDrop() method and set the allowDragging property to 0 to disable drag and drop.

disableDragAndDrop() {
    this.mainGrid.allowDragging = 0;
}

Now, when the button is clicked, users won't be able to drag and drop columns inside of the grid.

You can also find a live sample of this project at this location: https://stackblitz.com/edit/wijmo-knowledgebase-react-flexgrid-disable-drag-and-drop