How do I call a javascript function on mouseover row in json grid?

[jacky]

Hi,

I'd like to implement a call for javascript function on mouseover for each row (each row sends different value to the function) on a json grid.

Any idea how I do it? where do I define the mouseover row call and where and how should I write the mouseover function (lets say for example I want to call "alert(rowId)" for each mouseover row)?

Thanks,

Jacky

[paramvir]

you could use a delegate mouseenter event on the grid.

$( '.pq-grid' ).on ('mouseenter', '.pq-grid-row', function(evt){
  var rowIndx = $(this).attr( 'pq-row-indx' );
  alert( rowIndx );
});

[jacky]

Hi Again,

Thanks for the fast reply.

I I take the simple example from the site:

$(function () {
    var data = [
        { rank: 1, company: 'Exxon Mobil', revenues: '339,938.0', profits: '36,130.0' },
        { rank: 2, company: 'Wal-Mart Stores', revenues: '315,654.0', profits: '11,231.0' },
        { rank: 3, company: 'Royal Dutch Shell', revenues: '306,731.0', profits: '25,311.0' },
        { rank: 4, company: 'BP', revenues: '267,600.0', profits: '22,341.0' },
        { rank: 5, company: 'General Motors', revenues: '192,604.0', profits: '-10,567.0' },
        { rank: 6, company: 'Chevron', revenues: '189,481.0', profits: '14,099.0' },
        { rank: 7, company: 'DaimlerChrysler', revenues: '186,106.3', profits: '3,536.3' },
        { rank: 8, company: 'Toyota Motor', revenues: '185,805.0', profits: '12,119.6' },
        { rank: 9, company: 'Ford Motor', revenues: '177,210.0', profits: '2,024.0' },
        { rank: 10, company: 'ConocoPhillips', revenues: '166,683.0', profits: '13,529.0' },
        { rank: 11, company: 'General Electric', revenues: '157,153.0', profits: '16,353.0' },
        { rank: 12, company: 'Total', revenues: '152,360.7', profits: '15,250.0' },
        { rank: 13, company: 'ING Group', revenues: '138,235.3', profits: '8,958.9' },
        { rank: 14, company: 'Citigroup', revenues: '131,045.0', profits: '24,589.0' },
        { rank: 15, company: 'AXA', revenues: '129,839.2', profits: '5,186.5' },
        { rank: 16, company: 'Allianz', revenues: '121,406.0', profits: '5,442.4' },
        { rank: 17, company: 'Volkswagen', revenues: '118,376.6', profits: '1,391.7' },
        { rank: 18, company: 'Fortis', revenues: '112,351.4', profits: '4,896.3' },
        { rank: 19, company: 'Crédit Agricole', revenues: '110,764.6', profits: '7,434.3' },
        { rank: 20, company: 'American Intl. Group', revenues: '108,905.0', profits: '10,477.0' }
        ];
 
    var obj = { width: 700, height: 400, title: "Grid From JSON data", flexHeight: true };
    obj.colModel = [{ title: "Rank", width: 100, dataType: "integer", dataIndx: "rank" },
                       { title: "Company", width: 200, dataType: "string", dataIndx: "company" },
                       { title: "Revenues ($ millions)", width: 150, dataType: "float", align: "right", dataIndx: "revenues" },
                       { title: "Profits ($ millions)", width: 150, dataType: "float", align: "right", dataIndx: "profits",
                           render: function (ui) {
                               var rowData = ui.rowData,
                                dataIndx = ui.dataIndx,
                                cellData = rowData[dataIndx],
                                profits = cellData.replace(",", ""),
                                revenues = rowData["revenues"].replace(",", "");
                               if (profits/revenues > 0.1) {
                                   return "<span style='color:green;'>" + cellData + "</span>";
                               }
                               else {
                                   return "<span style='color:red;'>" + cellData + "</span>";
                               }
                           }
                       }];
    obj.dataModel = {
        data: data,
        location: "local",
        sorting: "local",
        paging: "local",
        curPage: 1,
        rPP: 10,
        sortIndx: "revenues",
        sortDir: "up",
        rPPOptions: [1, 10, 20, 30, 40, 50, 100, 500, 1000]
    };
    var $grid = $("#grid_json").pqGrid(obj);
});   


Where and how do I implement that code? $( '.pq-grid' ).  would be $("#grid_json")?  how would I translate  '.pq-grid-row' to that code?  and 'pq-row-indx' ?

Sorry for the trouble, but I am very new to that topic and very enthusiastic to learn it ((-:

[jacky]

OK. got it now. seems to work great.

However, if I want to call a javascript function (like the alert()) with a specific cell value, how do I do that?

Thanks again,

Jacky