Sort Table with Drag and Drop

Very slick. Going to use this for sure!

The one problem with this solution is that it makes tables with textareas in them uneditable or selectable.

Hmm, even if you click on the ‘edit’ row action?

Yes, it blocks the rich text panel that comes up.

I love this and can work around the inline editing of the text. Thanks!

Matt~

This is very cool!

Thanks for sharing with the community 🙂
Karen

Karen, can you file the rich text issue as a bug with skuid?

Works great. I additional save the model after setting the index.

// Sprint Work Drag &amp; Drop reorder var component = skuid.$C('sk-39dlIj-483'), listContents = component &amp;&amp; component.element.find('.nx-list-contents'); listContents.sortable({ placeholder: "ui-state-highlight", 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.Sprint_Rank__c; if (index + 1 !== order) { model.updateRow(row,'Sprint_Rank__c',index+1,{initiatorId:component._GUID}); } }); <b> $.blockUI(); $.when( model.save() ) .done(function(){ $.unblockUI(); }); </b> } });<br>

John~

Clarification question: Is this specific to when you use Matt’s snippet or to tables in general? 

Thanks!
Karen

This is anytime you apply a JQuery UI sortable to a skuid table.

John,

Have you tried tabbing over to the rich text area? 

Thanks!
Amy

You can tab over but you can’t click into it. It’s not really an acceptable solution to train users to do this.

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?