4

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?

gurpal2000
  • 1,004
  • 1
  • 17
  • 35
  • Thx mate! That worked like a charm :) In fact I didnt need to hide anything, just passed the value of item.id to another formatter within a function and I was good to go! Cheers – dan Feb 03 '15 at 02:55

1 Answers1

2

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.

Adam Alexander
  • 15,132
  • 5
  • 42
  • 41
  • Yes that would work. But in my case the action is via row click not some other action link/button. Would it be useful to have hide/show column functionality? thx – gurpal2000 Apr 07 '13 at 08:42
  • have you found the solution? let me know us too. i to have one column which contain edit button for each row. I would like to pass that row object when i clik edit button on that row – Lasang Apr 09 '13 at 10:37