Skip to main content

Ever since moving to V2 I’ve missed this capability.

Not sure if this is helpful, but based on an old forum post here I have some custom code that can be used in conjunction with V1 tables that enables dragging and dropping to re-order the table. Not sure if this can be adopted for V2, but let me know if you happen to get it working.


In-line snippet. Make sure this loads only when the table is displaying on the screen (can put table inside a tabset with hide-tabs and on first render run this snippet):

“Index” is a UI only number field setup on the model the table is referencing.



var params = argumentse0];
var $ = skuid.$;

try {

let waitForElement = function(initEle, callback, chunkTime, context) {
context = context || window;
chunkTime = chunkTime || 250;

function doChunk() {
var ele = initEle.call(context);
if (typeof ele !== "undefined") {
var error = false;
try {
callback.call(context, ele);
} catch (err) {
error = true;
console.log('Still waiting for element .. Error: ' + err);
}

if (!error) {
console.log('Wait for element complete: ' + ele '_GUID']);
clearInterval(ourInterval);
}
}
}

var ourInterval = setInterval(doChunk, chunkTime);
}

waitForElement(
function() {
//Define element
return skuid.$C('sk-3fU2-1272');
},
function(component) {
// Wait complete (if this doesn't error)
var listContents = component && 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.Index;
if (index !== order) {
model.updateRow(row, 'Index', index, {
initiatorId: component._GUID
});
}
});
//Make sure model data is properly sorted
model.data.sort((a, b) => (a.Index > b.Index) ? 1 : -1);
}
});
});
} catch (e) {
console.error(e);
}

I wish we could but jquery seems to be unavailable in V2. Known issue since 2019. 😦


Reply