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.
1. Tie a method to the button click event
2. Set the allowDragging property of FlexGrid to '0', which prevents dragging and dropping columns
Since this sample uses a button, we'll create a method called stopDragAndDrop(), which we'll then tie to the click event of the button.
In the TypeScript, we use mainGrid to reference our instance of FlexGrid, so all that needs done is to create the stopDragAndDrop() 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-angular-flexgrid-disable-drag-and-drop