THIS IS COOL! - A javascript code to let user choose which column want to see

API & Customization Show & Tell
21

Guilhermebastian2 - to make it work for other views I recommend working through Knack's API documentation for Jquery and JavaScript customisation - especially the events we can work with here http://helpdesk.knackhq.com/support/solutions/articles/5000447139-customization-with-jquery-and-javascript#events to pick the right view.

To make the code work for ALL tables and ALL search tables it would be:

$(document).on('knack-view-render.table', function(event, view, data) {
  addTableColumnChoose(view);
});

$(document).on(‘knack-view-render.search’, function(event, view, data) {

addTableColumnChoose(view);

});

To make the choices list down instead of across requires changes to the code that builds variable h that'll need a bit of work on the html table - happy for someone to have a go here as I won't get a chance for a while...


22
Brad, also, how did you find that knack-view-render.view_6 made it work? I'm trying to apply the code for seach tables also and it is not working. Should I look for another element? And if yes, should I duplicate the code and change knack-view-render.view_6 for the new element or I can use the same code for both elements? How do I do that? Thanks!

 

23
Perfect! Only one question more. How can I config the field to show one above the other and not side by side? I'm trying to modify it, but was not lucky.. thx!

 

24

Guilhermebastian2, already does that for me with my tests and the code uses th.text which is the column text and not the field name.  If I edit the column text in Knack to display text other than the field name it still works with the new text for me.

Can you confirm after a bowser refresh that it's showing field names and not column text names?

Again - thanks for finding that code snippet for us to modify to work with knack tables.

25

WOW BRAD! It worked perfect! Nice job! It solved me a big problem! tks a lot.

Only one question. The menu with the columns name is getting the fields names. Is there a way to make it get the edited columns name? For example: i have field (column) called "Date" and I renamed the display name to "Data". Is it possible to make your code get the "Data" name and not the field name "Date"?

Thanks again for the amazing job!

26

Great find Guilhermebastian2, I've been following your question there hoping someone would know.

Applying to Knack meant:

  • Converting the code into a simple function to be called for any view we want.
  • Finding a spot to inject a link to show the controls (.clearfix element is it).
  • Changing the selectors to match Knack, and modifying the new controls to not clash with existing Knack IDs.
  • Positioning the controls.


Here's the code, change the render code to target views instead of adding this to all tables.

 

$(document).on('knack-view-render.view_6', function(event, view, data) {
  addTableColumnChoose(view);
});

var addTableColumnChoose = function(view) {

//See http://helpdesk.knackhq.com/support/discussions/topics/5000074312 and https://jsfiddle.net/HvA4s/

var clearFix = $(’#’ + view.key + ’ > div.kn-records-nav.clearfix’);

clearFix.append("<div class=‘clear’><a href=’#’ class=‘choose-columns’>Choose Columns</a></div>");


$('#' + view.key + ' .choose-columns').click(function() {
    var headers = $('#' + view.key + ' &gt; table th').map(function() {
    	var th =  $(this);
    	return {text: th.text(), shown: th.css('display') != 'none'};
    });

  var h = ['&lt;div id=tableChooseColumns&gt;&lt;button id=done&gt;Done&lt;/button&gt;&lt;table&gt;&lt;thead&gt;&lt;tr&gt;'];
  $.each(headers, function() {
    	h.push('&lt;th&gt;&lt;input type=checkbox',
           (this.shown ? ' checked ' : ' '),
           '/&gt; ',
           this.text,
           '&lt;/th&gt;');
	});
	h.push('&lt;/tr&gt;&lt;/thead&gt;&lt;/table&gt;&lt;/div&gt;');
	$('body').append(h.join(''));
    var pos = $('#' + view.key + ' .choose-columns').position();
    $('#tableChooseColumns').css({'position': 'absolute','left': '20px', 'top': pos.top,'padding': '5px', 'border': '1px solid #000', 'background': '#fff'});
  
	$('#done').click(function() {
    	var showHeaders = $('#tableChooseColumns input').map(function() { return this.checked; });
    	$.each(showHeaders, function(i, show) {
        	var cssIndex = i + 1;
        	var tags = $('#' + view.key + ' &gt; table th:nth-child(' + cssIndex + '), #' + view.key + ' &gt; table td:nth-child(' + cssIndex + ')');
        	if (show)
            	tags.show();
          	else
            	tags.hide();
    	});
    
    	$('#tableChooseColumns').remove();
    	return false;
	});

	return false;
});



}

haven't tested in all situations including showing filter controls and the effect on the 'Choose Columns' link so this might need tweaking yet.

Thanks again to Guilhermebastian2 for getting this started.