Drag & drop + resize of table column

#1

Hi,

I want to create a table with functionalitíes:

  1. Drag and drop columns
  2. Resize width of column

How to achieve it ?

Thanks,

Michel

#3

This is an old thread… i guess you bumped it looking for a solution? I couldn’t find one in the forum… Usually drag & drop with tables is to reorder the rows. Depending on what you need from the table, the solution will likely range from “complex” to “very complex” …and maybe “not very reliable” …but let’s start with the basics.

Here is a thread with a good “horizontal drag & drop to reorder” demonstration: Horizontal Drag and Drop + Reorder . I updated the file for RP9:
Horizontal_DragandDrop_reorder_2_RP9.rp (125.2 KB)

Here is a file with a good “resize column” demonstration. I couldn’t find the thread this came from, but I built it off a file from this thread (and updated to RP9): Reordering and moving rows using repeaters
reorderable moveable repeaters_3.rp (1.5 MB)

If your table can be static (pre-filled data) then you could build it with basic rectangle widgets in dynamic panels (dp)…basically one dp per column. Apply the drag & drop behavior from the first demo above (e.g., the draggable area can be the column header but move the dp for the whole column.) Then apply the resizing behavior (using another dp within or next to the column header dp) from the second demo above.

If your table needs to be dynamic (or is large enough that a “manual table” is not reasonable) then you’ll need to implement your “table” as a repeater. This is where things are likely to move into the “very complex” category… When you reorder the columns or resize a column width, you’d need to update the repeater, meaning the repeater would rebuild itself. So you’d need to build some logic in the repeater’s Item Loaded event to handle these two possible changes. The column resizing should be pretty straightforward, but reordering columns will likely be quite the trick. For example, if you have three columns, by default, A, B, C, you could have three rectangle widgets in your repeater cell and set the text of each per column. But, if the column order is changed, you’d need to do something like set the text of widgetB to [[Item.ColumnA]] instead of [[Item.ColumnB]]. I’d recommend that drag&dropping a column header (to move/reorder the columns) would set the value of a global variable, then update the repeater. The repeater’s Item Loaded event could then have a set of conditional cases to evaluate the global variable and either set the text of the widgets differently, or move the widgets in the repeater cell.