Webgrid: Get model item on row click

Question

I am trying to find a way to make an entire row clikable. The tutorials I found so far use the item that is visible on the table to create the link for each row. For example

$(function(){
    $('tbody tr').live('hover', function(){
        $(this).toggleClass('clickable');
    }).live('click', function(){
        location.href = '/Details/' + $(this).find('td:first').text();  
    }); 
});

This uses the model item stored in the html tag td for each row. However, I want to be able to use an item not stored on the table, but in the model item represented by that row. I want to use an id that I do not want present on the table.

For example, say my webgrid uses a model that contains the parameters SSN, FirstName and Lastname. But my webgrid only show the FirstNmae and Lastname. I want to make the rows clickable but instead use the SSN to build the on click link location.

I thought of including a hidden column in which I pass the id. However hidden columns do create some extra space on the table although they are not visible; and I do not want this.

How can I achieve this? How can I get a value in the model but not on the table when a row is clicked. Is it possible set one of my columns with an id which will be the model item I want to use to create the link on row click?

Answer 1

You don't have to display the value, but you obviously will need to be able to access it, as you seem to have indicated. You can apply it as an id attribute value of an element in the row for example or you can use a hidden form field. Or, if you are working with the HTML5 doctype, you can use custom data attributes