Disable Drag and Drop with a Button Click in React
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
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.
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.
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