drag and drop table reordering

  • 1
  • Question
  • Updated 2 years ago
  • Answered
Hi, I'm trying to figure out how I can reorder an entire list each time a list item is dropped into a new position. I've implemented something that almost works (works the first time you try and but not the second) and need some direction on what's causing it to break on subsequent events. Here is the code:

var params = arguments[0],
$ = skuid.$,
oldIndex,
newIndex;
var model = skuid.model.getModel("Fabric");
var modelRows = model.getRows();

//Table->Display->Advanced->Unique id
$("#Skuid_Fabric_Trim tbody").sortable({
start: function(event, ui) {
oldIndex = ui.item.index();
},
stop: function(event, ui) {
newIndex = ui.item.index();

for(i = 0; i < modelRows.length; i++){
if(i == newIndex) model.updateRow(modelRows[oldIndex], 'Popularity__c', newIndex);
else model.updateRow(modelRows[i], 'Popularity__c', i);
}

//save the listed models
var models = [model];
skuid.model.save(models,{callback:function(result){
if (result.totalsucess) {
skuid.model.updateData(models); //requery model
}
}});
}
});
Photo of John Watson

John Watson

  • 584 Points 500 badge 2x thumb

Posted 2 years ago

  • 1
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
I just implemented a jQuery.sortable() solution which is working nicely: https://community.skuid.com/skuid/topics/sort-table-with-drag-and-drop
Photo of jili@heidrick.com

jili@heidrick.com

  • 2,032 Points 2k badge 2x thumb
Hi my table is inside a tab. So I cannot register the sortable on page load. I had to do it on models.loaded event...