Hey Kenny, when does this error occur?
I am trying to get this to work when using the table as a parameterized embedded view with multiple versions embedded on a parent view. I have this working with the table, but when I go to my parent view that has 3x of these tables embedded, the drag and drop only works on one of the three tables (different table each time). If, for instance, table 1 on the parent view is working, if I drag and drop in table 2 or 3, it changes the order on table 1.
Any idea how I can get this to work independently on all three embedded tables in my parent view?
This script selects all the tables in the view, are you putting the markdown inside each embeded view?
provide copy of the views so i can take a look, this post is a bit old for me to remember what i all did , there are also multiple versious running around the forum so yeah...
Sorry for reviving an old thread!
There is one view with the table and markdown on it (dragTable view). That table view gets embedded three times on a parent view. The parent view passes in a parameter to the table view to make tell the table what data source to pull data from.
When accessing the parent view via it's URL, when you try to drag and drop from one of the three tables, the view 'randomly' selects which one of the three tables actually moves data. For instance , if you drag row 1 in table 1 to the bottom row, instead of the data in table 1 moving, row 1 in table 3 moves. The affected table may be different each time you reload the page.
drag_table_test.zip (78.7 KB)
Here in an example of the views and how they work. Note that in this example, the data is the same in the tables, the only parameter that the parent view is passing in is the table name. This is showing the same functionality though, from a drag and drop perspective.
No worries, still happy to help, just needed to see what you were working with
This seems like an older version of the code without mutation observer
. Meaning that if you data updates, it might loose its functionality (especially when updating from an empty table to a full one.) Look a bit further in this topic to read more about this if this cause can happen to you.
Anyways to make this functional with multilpe sub views on the screen, you can add this.
This viewSelector
will make sure it will only select things inside the view (note this does include sub views!)
If you are gonna use an updated version of this code, be sure to add the viewSelector +
to every querySelector
const viewPath = this.closest('[data-component-path]').getAttributeNode('data-component-path').value;
const viewSelector = 'div[data-component-path^="'+viewPath.substr(0, viewPath.lastIndexOf(':'))+'"] ';
document.querySelectorAll(viewSelector + '.tr-group.ia_table__rowGroup')