how to hide column in fuelux datagrid

Question

I am trying to create a hidden column which will contain the unique "id" of the row as an attribute in say a "data-id" one. Because i can't seem to work out how to retrieve the data model behind the row. I'm using server-side datasource.

columns: [{
  property: 'hiddencolumn',
  label: '',
  hidden: true   <-- ?????
} .. .. ],

In the formatter i use some placeholder tag, could be a span

$.each(items, function(index, item) {
  item.hiddencolumn = '<span data-id="' + item.id + '"</span>';
});

then i add a click handler to the row and then get the data-id column:

$('#MyGrid').on('loaded', function() {
  $('#MyGrid > tbody > tr').click(function() {
    console.log($(this).find('> td > span').attr('data-id'));
  });
});

Is this correct? Or should I attempt to add data-id to the tr tag/row itself? The above concept works, but i just need to know how to hide the column :)

thanks

EDIT 14th Apr - here's what I did to solve this. Use data-id and hide the span in an existing column. For me, I had a "date" and "id" field in my model. I choise to tag id onto the date field.

formatter: function(items) {
  $.each(items, function(index, item) {
    item.date = item.date + '<span style="visibility: hidden;" data-id="' + item.id + '"/>';
  });
}

Then retrieve the id like so (using jquery)

$('#MyGrid').on('loaded', function() {
  $('#MyGrid > tbody > tr').click(function() {
    console.log($(this).find('> td > span').attr('data-id')); // value is here
  });
});

ok?

Answer 1

The columns property is just for visible columns. So, it sounds like you'll want to remove that and in your formatter create a span with a data-id attribute for one of your other (visible) columns. I usually do this in the final column if there are any buttons or other controls for acting on the item in the row.