Sort Table with Drag and Drop

I found a workaround for the rich text issue: use a handle for the sortable action. Add a row action with no actions and put in the class of the icon. Here is code with the handle, save and requery: (function(skuid){ var $ = skuid.$; $(document.body).one(‘pageload’,function(){ var component = skuid.$C(‘johntt’), listContents = component && component.element.find(‘.nx-list-contents’); listContents.sortable({ placeholder: “ui-state-highlight”, handle: ‘.fa-ellipsis-v’, stop: function( event, ui ) { var data = ui.item.data(‘object’), model = data.list.model, movedRow = data.row, target = $(event.target); target.children().each(function(index,tr){ var row = $(tr).data(‘object’).row, order = row.Order__c; if (index + 1 !== order) { model.updateRow(row,‘Order__c’,index+1,{initiatorId:component._GUID}); } }); $.blockUI(); $.when(model.save()).done(function(){ model.updateData(function(){ $.unblockUI(); }); }); } }); }); })(skuid);

Clever workaround! I like it

John,

I’m glad you found a workaround, and thanks for sharing it with the community!

Thanks!
Amy

Perfect! I’m definitely implementing the handle. Thanks, John!

I took this and made a super fancy version :D

Going further down the fancy rabbit hole I used this SpinKit | Simple CSS Spinners to put in a css based spinner

Matt, this is cool. Will come in very handy

I remodeled my super fancy version above as a master page snippet invokable from child pages  :D

This is a dumb question, but how do I do this part:

“I have an Order__c field on the object which starts at index 1, and I’m just updating that field after every reorder.”


Add a field called Order to the object and model or rename the field in the javascript to another field you already defined to do this.

This is an extremely dumb question… i’ve put the first presented code as a new in-line snippet, and modified the component Id and the field name…is there anything else I need to do to make it work? 

It’s not a snippet it’s an inline code (the option without parenthesis).

Thanks John! however when i move them the values of the index field remain the same. is it supposed to do that?

How do you account for table pagination? For example, when showing rows 6-10 and reordering, it puts the sort order 1-5, ignoring the 1-5 that already exists on the table’s first page. Any workaround here or just advising users to ‘Show All’ before reordering?

Here’s the solution:

In the stopHelper function I found the current table page and page size to get my start number.

component = skuid.$C(tableId), currentPage = component.list.currentPage, currentPageSize = component.list.currentPageSize, startNumber = currentPage * currentPageSize;


Then, I add that startNumber to the updateRow function:

model.updateRow(row, orderByFieldApiName, index + 1 + startNumber, { initiatorId: component._GUID });

Nice work, Craig!

Thanks! Always nice to answer your own question. I did notice if you have display all rows set, you need to add some logic to account for the ‘All’ response from currentPageSize:

if (isNaN(startNumber)) startNumber = 0;<br>

Always love it when people are able to answer their own question and share their findings with the community. Thanks, Craig!

Hey everyone - This is fantastic!  I am s javascript rookie, so could use a little help.  I implemented this for a multi-tab table, and when dragging a line, my mouse arrow is a significant distance away from the actual row in motion.  Any suggestions on how to improve the “tightness” of the arrow to the moving row to improve user experience? Thanks!

Anne, could you post the code that you’re using? I believe there are a couple versions in this thread. I had a similar issue when I first implemented it and needed to adjust the helper styling with some CSS to bring it closer.