Flexigrid - Lightweight but rich data grid

[eluser]Unknown[/eluser]
[quote author="Charles Bandes" date="1209511329"]Is it possible to make the rows clickable so that I can attach an action to the row? (Ferinstance, click a name, run an ajax call to bring up data in another div)[/quote]

Yes you can, see below:

1. Add this variable to the line 19 p = $.extend({ ondbclick: null,

2. Add .dblclick event as shown below

Code:

//line 724
$('tbody tr',g.bDiv).each
(
    function ()
    {
        $(this)
        .click(
            function (e)
            {
                var obj = (e.target || e.srcElement);
                                if (obj.href || obj.type) return true;
                                     $(this).toggleClass('trSelected');                                        
                if (p.singleSelect) $(this).siblings().removeClass('trSelected');
            }
        )

//below .click add this line        
.dblclick(
    
function (e)                                 {                                            
    if(typeof p.ondbclick == 'function'){
        p.ondbclick($(this).attr('id').substr(3));
    }
})

3. In flexigrid configuration add the name of you method to ondbclick

Code:

$("#flex1").flexigrid
(
    {
        url: 'post2.php',
        dataType: 'json',
        title: 'Countries',
        pagetext: 'Page',
        pagestat: 'Showing {from} to {to} of {total} items',
        outof: 'of',
        findtext: 'Find',
        procmsg: 'Processing, please wait ...',
        colModel : [
            {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
            {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
            {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
            {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: false},
            {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
        ],
        buttons : [
            {name: 'Add', bclass: 'add', onpress : test},
            {name: 'Delete', bclass: 'delete', onpress : test},
            {separator: true}
        ],
        searchitems : [
            {display: 'ISO', name : 'iso'},
            {display: 'Name', name : 'name', isdefault: true}
        ],
        sortname: "iso",
        sortorder: "asc",
        usepager: true,        
        useRp: true,
        rp: 15,
        showTableToggleBtn: true,
        width: 700,
        height: 200,
        ondbclick: editMe
    }
);

4. create the method that you need to make a call

Code:

function editMe(id){
    alert(id);
}