Hiding empty database table column

Question

I'm trying to hide the whole column when my database returns nothing, but it still treats the database field (ex. {something}) as a valid input.

$('#mytable th').each(function(i) {
  var remove = 0;

var tds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')')
tds.each(function(j) {
  if (this.innerHTML == '') remove++;
});
if (remove == ($('#mytable tr').length - 1)) {
  $(this).hide();
  tds.hide();
 }
});

https://jsfiddle.net/wwmyxp9o/9/

This is what the front of it looks right now:

I've tried this code based on Stephen Walcher's code remove/hide table's empty column(s), including <th> , but still no luck.

I've just started doing something on this scale, I appreciate any help to this problem.

Thanks,

Z

Answer 1

Z - the {fields} are in the HTML for the Codecharge templating, so the Jquery in the jsfiddle won't work (as there is something there) - and it looks like there is a space after each template field, which is also not Nothing (so this.InnerHTML == '' will not be true)

I played with the jsfiddle and suggest a couple of changes that might help:

1. Codecharge doesn't layout the HTML correctly until published - so the closing </table> tag is actually mid-table and will confuse jquery
2. The separator and footer rows both use 'colspan=55' and when I removed them (and moved the closing </table> tag to the end), it worked for a test column.

Alternatively, server side, you could add Codecharge panels around each column (it's an option in the Grid Builder Wizard which will save you a bunch of time) and you can turn them 'panelname6.Visible = false' individually depending on the values.

Use the BeforeShowRow to flag each column number and then loop through and hide the panels using custom code in the Grid BeforeShow event. You could also store the columns to hide in a hidden field and use jquery to hide them using similar code to what you are using.

Edit for Grid Options - panels

The Grid Builder has some options late in the process (Step 7 I think) which allows you to tick 'Add Panels to each column (for Hide/Show functionality)' which will add panels around each column (and column heading) so you can turn them on and off in code behind. However, as they should be uniquely named you could also use jQuery to turn off full columns.

Specify if all controls are taken into the blocks of the following type: <!-- BEGIN ControlType ControlName --><!-- END ControlType ControlName --> It will be used to dynamically hide/show controls on the page.

From Codecharge Manual on "Grid Builder".

It is more work to set up the column flagging in the code behind to turn off the panels, but something like (pseudo-code):

BeforeShowRow
  $flagCol1Hide = ($flagCol1Hide OR $Container->col1Value->GetValue() > 0);
  $flagCol2Hide = ($flagCol2Hide OR $Container->col2Value->GetValue() > 0);
  //etc
end

BeforeShow
  // For the Grid (aka $Component in this case), with Panels as children
  $Component->PanelCol1->Visible = !$flagCol1Hide;
  $Container->PanelCol2->Visible = !$flagCol2Hide;
end

As for the Totals, if you can't get them, you can also include your own totalling in the BeforeShowRow, and add them to the display totals in BeforeShow. (see Codecharge Help on 'Simple Report with Total').