For many applications, the out-of-the-box Reporting UI may be too complex and require too much training. It is helpful to tailor the UI to the user's level of expertise to enhance the user experience and streamline workflows.
Test this code live in the Drag and Drop Fields sample that is part of the Technical Demos.
Drag and Drop
For this example, we will use the following simple data object:
In the Razor view code, a list is created based on the given data object:
This results in the following HTML:
The attached event handler drag sets the data transfer data for the drop event in the Text Control editor.
While dragging over the editor, the input position is actively changed, so that the field can be added at the new input position when the drop event is fired.
The variable _txtViewLoc is updated in the textViewLocationChanged event to provide the scroll offset position to calculate the correct input position.
New Merge Field
When the field is finally dropped, a new merge field is created with the name of the data transfer data and is inserted at the current input position.