Add ascending row numbers to grid views

Ask the Community No-Code Solutions
1

My use case is printing Action Item lists for committees. I wanted to prepend a column to grid views, with an ascending counter, so that people in the meeting could easily refer to “row 26” or “Action item number 14” or whatever - makes it easier to reference a specific row either on screen or in a print/PDF if they are numbered. Cant be part of the data because it needs to remain ascending 1 to N regardless of filters and sorting. Lots of use cases where having the rows sequentially numbered would be useful. I know of no native way in Knack to do this.

image
image235×750 4.59 KB

Code below to achieve this:

/************************************************************************
  ADD REFERENCE NUMBERS TO ALL THE LISTS OF ACTIONS, ETC.
*************************************************************************/
// VIEWS THAT NEED ROW NUMBERS PREPENDED
var rowNumberViews = ['view_226', 'view_253', 'view_262', 'view_445', 'view_203', 
   'view_205', 'view_173', 'view_178', 'view_158', 'view_163', 'view_301', 'view_311', 
   'view_325', 'view_326', 'view_143', 'view_148', 'view_128', 'view_133', 'view_246'];

rowNumberViews.forEach(function(viewId) {
  $(document).on('knack-view-render.' + viewId, function(event, view, data) {
    
    // Add header
    $('#' + viewId + ' thead tr').prepend('<th>#</th>');
    
    // Add row numbers
    $('#' + viewId + ' tbody tr').each(function(index) {
      $(this).prepend('<td style="text-align: center;">' + (index + 1) + '</td>');
    });

    // Empty cell in footer if exists
    $('#' + viewId + ' tfoot tr').each(function() {
      $(this).prepend('<td></td>');
    });

  });
});
1 Like