Servoy 2022.12 – Drag & Drop in Data Grids

Hi, Sean from Servoy here with a quick video. I’d like to show you how to implement drag and drop features using the NG Grid components. To do so, I’m going to take you through a few simple use cases. First, we are going to drag rows within a grid, three-order records in a database. Next, we will drag rows within a grouped grid to show how records can be moved to a new group. And finally, we will drag records from one grid to another, showing how drag and drop can be used to add or update other records. Let’s see it in a demo. Here I have a sample solution showing data from a few database tables. For the first example, I will drag a product record from one location in the grid to a new location. And this will update the product’s value for the sort column. Also, notice that some products are highlighted because they are flagged as discontinued and do not have the little drag handle. Well, it seems simple enough. Let’s take a look at how to set it up. First, I can make my product column draggable by selecting it and setting the property called D&D Source to true. This is what makes the little drag handle show up on each cell in the grid. Next, I will need to set a handler for the on-drop event and write some code. This is where the magic happens. Here you can see that two record objects are passed into my event handler. This is the record that was dragged and the record on which it was dropped. Because my grid is data bound and sorted by a real database column called SortKey, in this case, I will update the value for it and resort my found set. This will, in effect, make the drag row stick. Now you should remember that some products did not have the drag handle. In order to achieve this, I have set the D&D Source data provider property to be handled by a calculation called CanDrag. This is a simple expression which returns a boolean to enable or disable dragging. In my case, I’m evaluating the discontinued column on the product record. In this next example, I will set my grid into grouping mode by making the category column visible and grouping by it. Here you can see that I can drag my product from the category beverages into the Condiments category and back to the beverages category. As I drop the row, the product’s category ID is updated in the database. Let’s take a look at how it was done. We will revisit the on-drop handler from my products grid. It’s the same method that I showed earlier and in this case, I’m evaluating the category ID of the target record and assigning it to the source record. I also need to refresh the grid when grouping data has changed. In our final example, I will drag my product row onto a different grid, the details of an order record. This time when I drop the product, it will add it to the order. I also have some logic that specifies that when I add the product which is already in the order, it will increment the quantity. Notice the subtotal and total calculations are updated automatically. Let’s take a look at how it was done. To enable dropping on my order details grid, I once again implement the on-drop event handler for this grid. The source record is the product that was dropped and I don’t care so much about the target record because it will affect the whole order. Here you can see I have some custom logic implemented on the entity to enable the necessary insert or update in the database. Let’s quickly recap the main points. First, any column in a grid may be made trackable by setting the D&D source property to true. Custom logic can be implemented in the on-drop event handler which gives you the row that was dragged and the row on which it was dropped. Dragging can be made conditional by giving a D&D source data provider. This can be a calculation column or variable which returns a boolean value to enable dragging. This is optional. Finally, there is another event on drag over which I did not show because it is slightly more advanced. But you can use this to make dropping conditional as well. The big difference is that this is client side code to avoid unnecessary round trips and hits to performance. While I hope you found this short video helpful, thanks for watching.

Close