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)

whoabackoff · Accepted Answer · 2011-06-14T16:07:33.067

9

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 );
    });
}

edited Jun 14 '11 at 16:07

answered Jun 14 '11 at 15:25

whoabackoff

1,603
4
17
32

I was getting 'false'. I changed the alert to alert(this.innerHTML) to get the value of the row; reference: https://groups.google.com/forum/?fromgroups=#!topic/flexigrid/eCTdXHATyuE – Keith John Hutchison Mar 02 '13 at 01:18
Its worth noting that the event will only fire when clicking on the specific column (celDiv) and not the entire row. – beterthanlife Oct 02 '13 at 14:28
this is great! i diddn't knew about the process function possibility and did all this in my success function. Worked too, but your approach is the mor readable one, thx! – xmoex Apr 29 '14 at 08:47

score 2 · Answer 2 · answered Nov 01 '12 at 09:42

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
});

answered Nov 01 '12 at 09:42

zulucoda

818
12
24

This would effectively define one action for the whole row, whereas flexigrid process allows you to have an action per column. Also, the DOM navigation in jquery that you specify can be quite costly in legacy browsers (not sure if you care) – zaitsman Feb 22 '14 at 09:38
@zaitsman thanks for the comment mate. the way i was using flexgrid I wanted the user to be able to click anywhere in the row. i never thought about performance issues tho, anyway thanks for advising me on this, i will have to run some tests. – zulucoda Mar 09 '14 at 16:46

score 1 · Answer 3 · answered Apr 05 '13 at 22:39

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);
}

score 0 · Answer 4 · answered May 07 '15 at 12:23

0

I think this variant little better than whoabackoff

$('.TableName').click(function(event){
        $('.res').html('dbl');
        alert('dbl');
});

answered May 07 '15 at 12:23

sty4

16
3

score -1 · Answer 5 · answered Jun 08 '11 at 14:34

-1

does this help? http://www.flexigrid-asp.net/demo/updatepanel.aspx you can have a look at it with firebug, to see where the event is hooked. keep in mind that the flexigrid.js file is a bit different than the one from the official project.

answered Jun 08 '11 at 14:34

ra00l

570
4
20

How do you handle row onclick events using Flexigrid?

5 Answers5