Hi,
I have two drag and drop sortable widgets on the same screen, and have a problem:
OnChange event of both lists are trigger the same client action event, although each of them point to another client action.
My example:
First sortable widget points to childGroupList list:
Second widget points to QuestionsListSortable list: :
Once I drag QuestionsListSortable list, QuestiomSortableOnChange event is trigger - as expected
But, once I drag childGroupList list, QuestiomSortableOnChange event is triggertoo - instead of ChildGroupSortableOnChange client action
Am I missing something?
Thanks!
Is your two lists are nested?
Like a list inside another list
not, the list are not nested
Hi Fang!
Can you please share the oml file?
Hi, was I able to share the link to the screen that implemented the two lists?
Or share oml to understand the way you are doing it?
Maybe it's a conflict in the extend, try putting different names in the classes.
Regards
Hi Leonardo Pires ,
Could you explain how to put different names in the classes of the extend property please?
See my extend property of the two lists:
1. "dragClass: 'light-grey-class', handle: '.sort-handle-child', ghostClass: 'blue-background-class', animation: 300"
2. "dragClass: 'light-grey-class', group: 'questionList', handle: '.sort-handle', ghostClass: 'blue-background-class', animation: 300"
I have the same issue. Did you manage to solve it @Fang Experts?
Same issue.[Technical:]The issue seems to be that the TriggerOnChange in the Sortable's JavaScript is global, so another instance will overwrite it.To fix this, the script has to be modified so that you also instance TriggerOnChange. One option I tried was to insert the $parameters.WidgetId to the name, and attach this function to the window. However, I found this did not work if you Sortables are encased in blocks. The solution to this was to attach a TriggerOnChange to the list element and have a global TriggerOnChange be passed the WidgetId, find that element, and call its TriggerOnChange. Replace the SortableOS script (in the Sortable block's SetSortable) with this:
SortableEvent = null;// Define a unique function for this instance by attaching it to the DOM elementvar wbElement = document.getElementById($parameters.WidgetId);wbElement.TriggerOnChange = function(a, b) { return $actions.TriggerOnChange(a, b); // Call the action specifically bound to this element};// Global function to trigger the specific instance's functionTriggerOnChange = function(widgetId, a, b) { var element = document.getElementById(widgetId); if (element && typeof element.TriggerOnChange === "function") { return element.TriggerOnChange(a, b); }};// Define the Extend configuration with the updated call to the TriggerOnChange function$actions.SetVariable("Extend", ["{", $parameters.Extend === "" ? $parameters.Extend : $parameters.Extend + ",", "onEnd: function(e) {", "SortableEvent = e;", "TriggerOnChange('" + $parameters.WidgetId + "', e.newIndex, e.oldIndex);", // Call with widget ID"}}"].join(""));// Instantiate Sortable with the unique Extend variablenew Sortable(document.getElementById($parameters.WidgetId), Extend);[Non technical:]
Clone the SortableDragandDrop_lib module. Replace the Sortable block with the one in the attached oml
i'm using two different parallel list both have sortable sort option either one is not working what is the solution for this.