How do you handle row onclick events using Flexigrid?

Question

My flexigrid is setup. All I need is an event that gets called when the user clicks on a row. From there, I will send the user to another page based on the data contained in that row. But I can't seem to find any examples on how to do this.

I'm looking for a clear example on how to handle row onclick events using flexigrid.

I'm also interested in any other javascript table frameworks that could be used in this situation. I've been taking a peek at DataTables and it looks like it may be a better alternative (and the project appears to be more active)

Answer 1

In the initial setup for the flexigrid, add the attribute process: procMe to the column model. Example:

colModel : [
    { display: 'Request', name : 'id', process: procMe }
]

and then create a callback:

function procMe( celDiv, id ) {
    $( celDiv ).click( function() {
        alert( id );
    });
}

Answer 2

A better solution

Adding process to colModel didnt work for me.

colModel : [
{ display: 'Request', name : 'id', process: procMe }
]

this solution below is what I'm using:

var gridRows = $("#data-grid tbody tr");

gridRows.click(function (event) {
  displaySelectedItem($(this).attr('id').substr(3));
  return false; //exit
});

Answer 3

Flexigrid column as link

colModel: [
        {
            display: 'DomainName', name: 'DomainName', width: 180, 
            sortable: true, align: 'left', 
            process: function (col, id) 
                     {
                       col.innerHTML = "<a href='javascript:domainEdit(" + id + ");' 
                                   id='flex_col" + id + "'>" + col.innerHTML + "</a>";
                     }
        }]

Link Function

function domainEdit(domainID) {
    alert('domainID' + domainID);
}