[Table Column Reorder] DragTable ignoring reorder when combined with TableColumnToggle widget
Question
dragtable
Web icon
Forge component by Justin Babel

First, I would like to think you for all of your hard work in supporting the Outsystems community.


I have been working on a case tracking system and DragTable functionality is in high demand from our end users.  (along with being able to select the table columns in their view). However in testing I am seeing that the DragTable reordering seems to be ignored in some instances when the column toggling is also in play.


You can see in the screenshot below that Created By should be in position 0 followed by Last Update Dt but when the page renders we are seeing Last Update Dt in position 0.






Also, this is not a defect... but we attempted to use a multi-sort widget on tables along with the DragTable widget.   The sort widget includes a popup window to select the sort criteria when the user right clicks on the sort icon.   This looks like it's being called in Jquery when contextmenu is invoked.   However the dragging of table columns seems to also trigger this right click function.   Any idea how I can work around that?

Hi Josh,

Thanks for the positive feedback!

For the first issue, I am having a hard time reproducing this behavior. If possible could you share a sample OML with me with the table you are seeing this issue, so I can see the exact pattern of events that may be causing this.

For the second issue, are you using the 'DragHandle' input, that will specify an area that will trigger the dragging functionality. This may help, as the event won't be triggered on the entire table column header. You can see an example of this on the demo module. If you are using this, and it is still happening, I will need to dig in a bit to see what other options you can use or adjustments I can make to fix this behavior.

Thanks,

Justin

Here is a file that has the two table scenarios I was talking about.    The Table test page has the ColumnToggle along with the DragTable.   I can't send data with the file but for testing purposes you just need some case entities that have created and lastupdate dates along with the userID of the person that created and updated the case.   


What I'm seeing is that if I drag the columns around they should be showing in the order below but usually the Create Dt column ends up stuck at the end instead of being in position 3.  (but really it's hard telling where columns end up and when I start using the column toggle at the same time things get really interesting.

{"Created By":0,"Last Update By":1,"Create Dt":2,"Last Update Dt":3}


For the second table, just click on the drag handle on one of the first two columns and you should see the sorting widget screen appear.   That widget should only appear if a right click event happens, but it seems like the dragging of the column is being seen as a contextmenu action.

TestModule.oml

I created a new example OML that has a button to create new cases.   I figured it will be a bit more straight forward.


When you reorder on the dragtable/toggle column sheet you should see that the column order doesn't persist properly once you navigate away from the page.


On the sorting widget example just drag any column and the right click contextmenu should appear.  

DragTableExample.oml

Did the example OML help?   Are you able to recreate, or did I configure something incorrectly?

Hi Josh,

Unfortunately, I am having some technical issues with my personal environment right now, but I was able to analyze the code to see if there was anything that stuck out that may be different, as I was still having a hard time reproducing this behavior.

One thing I noticed that was different about your values vs my demo is that the id's of the columns for the DragTable widget have spaces in them where mine don't. I messed around with the DOM of the example page and changed some of the column ids to have spaces in them, and I started to notice some funky behavior as well.

So without being able to publish, I couldn't confirm, but I suspect that if you change the id values of your columns to not have spaces, this might correct the issue.

Let me know if that ends up being the case and I will have to add some code to the component to remove spaces for any columns to correct this issue you are seeing.

If this doesn't end up being the issue, I will have to wait until I can publish the sample in my environment to dig in a bit deeper.

Thanks,

Justin

My initial testing has had favorable results.   Removing the spaces in the column id's seems to have resolved the reordering issue I was seeing.   I will spend more time with this today and make sure it's working as anticipated.

 I'm still puzzled by the second issue with the click/drag being seen as a right click event, but I suspect that may be something that cannot be corrected easily.   Although if you have any ideas I will certainly give them a shot.  Thank you again for your support!   It is much appreciated.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.