//Simple code for dragging table rows.
LazyLoad.js([
'https://cdn.jsdelivr.net/npm/table-dragger@1.0.2/dist/table-dragger.min.js'
], function () {
$(document).on("knack-view-render.view_102 ", function(event, view, data) {
var myTable = $('#view_102 > table');
$("table.kn-table").attr('id', 'myTable');
tableDragger(document.querySelector("#myTable"), { mode: "row", onlyBody: true });
});
});
Hi Egil,
I'm not really doing much coding here - Just lazyloading someone else's work and then calling their functions. You can visit the git and read their code to see how they're doing it. To be honest I have not read it through. Best, Justin
Would you mind share a Knack solution where you have this working, Justin? I am looking to see how you are able to write back to Knack which row is in which position. If you cannot share a link, could you just in broad strokes tell me what you are doing? Are you using an auto-increment field that you are changing the values for the rows in question for using the API, for instance, or is this just used for display purposes, not actually changing data in Knack?
That's actually all built into the plugin. I'm not really doing any coding here - Just lazyloading someone else's work and then calling their functions. I've set to rows only because that's what I needed for my use case but you can do lots more with this. Check out the documentation. :)
https://github.com/sindu12jun/table-dragger
@justin
Thanks for that, I get it now, nice. Be great to find a way to move columns or manually drag and drop column order too.
This is a nice script I found to show and hide table columns has a cookie too to retain
I'll find the credit to author somewhere but this is nice
// add a table column adjuster
$(document).on('knack-view-render.view_35', function(event, view, data) {
addTableColumnChoose(view);
});
var addTableColumnChoose = function(view) {
var clearFix = $('#' + view.key + ' div.kn-records-nav.clearfix');
clearFix.append("<div class='clear'><a href='#' class='choose-columns'>Choose Columns</a></div>");
var hstring = getCookie("hstring_"+view.key);
if (hstring != ''){
var headers = JSON.parse(hstring);
$.each(headers, function(i, show) {
var cssIndex = i + 1;
var tags = $('#' + view.key + ' table th:nth-child(' + cssIndex + '), #' + view.key + ' table td:nth-child(' + cssIndex + ')');
if (show)
tags.show();
else
tags.hide();
});
}
$('#' + view.key + ' .choose-columns').click(function() {
// remove other open columns set dialog on the same page
if( $('#tableChooseColumns')!=null) {$('#tableChooseColumns').remove();}
var headers = $('#' + view.key + ' table th').map(function() {
var th = $(this);
return {text: th.text(), shown: th.css('display') != 'none'};
});
var hs;
h = ['<div id=tableChooseColumns><table><thead><tr><th style="text-align:center;padding:5px;"><button id=done class="button_a">OK</button></th></tr></thead><tbody><tr>'];
$.each(headers, function() {
h.push('<tr><td style="padding:5px;"><input type=checkbox',
(this.shown ? ' checked ' : ' '),
'/> ',
this.text,
'</td></tr>');
});
h.push('</tr></tbody></table></div>');
hs = h.join('');
$('body').append(hs);
var pos = $('#' + view.key + ' .choose-columns').position();
$('#tableChooseColumns').css({'position': 'absolute','left': '20px', 'top': pos.top,'padding': '5px', 'border': '1px solid #666', 'border-radius':'3px','background': '#fff'});
$('#done').click(function() {
var showHeaders = $('#tableChooseColumns input').map(function() { return this.checked; });
var columns =[];
$.each(showHeaders, function(i, show) {
var cssIndex = i + 1;
var tags = $('#' + view.key + ' table th:nth-child(' + cssIndex + '), #' + view.key + ' table td:nth-child(' + cssIndex + ')');
if (show)
tags.show(300,"swing");
else
tags.hide(300,"swing");
columns.push(show);
});
$('#tableChooseColumns').remove();
setCookie("hstring_"+view.key,JSON.stringify(columns),100);
mixpanel.track("Preferences changes",{"Page":("Knack: "+view.scene.name), "View":view.title});
return false;
});
return false;
});
}
/* Cookie support -----------------------------------------------*/
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length,c.length);
}
}
return "";
}
// handler to dismiss dialog just with outside click
$(document).click(function(event) {
if(!$(event.target).closest('#tableChooseColumns').length) {
if($('#tableChooseColumns').is(":visible")) {
$('#tableChooseColumns').remove();
}
}
})
Hi Phil -Just looked at your app. It's working. You need to grab the first field from the left before dragging. When it turns red you know the script is running. Cheers
This looks like it would be useful, thanks. But cant get it to work on mockup https://wasabi.knack.com/address#home/
Thanks for sharing Justin!
Justin, thanks for this. It worked first time, nice post.
M