Messages

1

Help for ParamQuery Grid (free version) / checkbox column display only true/false

« on: January 10, 2015, 04:16:48 am »

Hi,

I have copied the PQ example for checkbox selection code, and on the checkbox column, instead of displaying a checkbox which can either be checked/unchecked, I get the text 'true' or 'false'.
Any idea what's wrong on my page settings?? I get it in IE,Chrome and FF.

here is the code:

$(function () {
    //state of the checkbox and row selection is being saved in state field.
    var data = [
        {rank:1, company:'Exxon Mobil',revenues: '339,938.0',profits: '36,130.0', state: true},
        {rank:2, company:'Wal-Mart Stores',revenues: '315,654.0', profits:'11,231.0', state: false},
        {rank:3, company:'Royal Dutch Shell', revenues:'306,731.0', profits:'25,311.0', state: false},
        {rank:4, company:'BP', revenues:'267,600.0',profits: '22,341.0', state: false},
        {rank:5, company: 'General Motors',revenues: '192,604.0', profits:'-10,567.0', state: true},
        {rank:6, company: 'Chevron', revenues:'189,481.0', profits:'14,099.0', state: false},
        {rank:7, company: 'DaimlerChrysler',revenues: '186,106.3',profits: '3,536.3', state: false},
        {rank:8, company: 'Toyota Motor', revenues:'185,805.0',profits: '12,119.6', state: false},
        {rank:9, company: 'Ford Motor', revenues:'177,210.0',profits: '2,024.0', state: false},
        {rank:10, company: 'ConocoPhillips', revenues:'166,683.0', profits:'13,529.0', state: true},
        {rank:11, company: 'General Electric',revenues: '157,153.0', profits:'16,353.0', state: false},
        {rank:12, company: 'Total', revenues:'152,360.7', profits:'15,250.0', state: false},
        {rank:13, company: 'ING Group', revenues:'138,235.3', profits:'8,958.9', state: false},
        {rank:14, company: 'Citigroup', revenues:'131,045.0', profits:'24,589.0', state: false},
        {rank:15, company: 'AXA', revenues:'129,839.2', profits:'5,186.5', state: false},
        {rank:16, company: 'Allianz',revenues: '121,406.0', profits:'5,442.4', state: false},
        {rank:17, company: 'Volkswagen', revenues:'118,376.6',profits: '1,391.7', state: true},
        {rank:18, company: 'Fortis', revenues:'112,351.4', profits:'4,896.3', state: false},
        {rank:19, company: 'Crédit Agricole', revenues:'110,764.6', profits:'7,434.3', state: false},
        {rank:20, company: 'American Intl. Group', revenues:'108,905.0',profits: '10,477.0', state: false}
    ];
 
    var obj = {
        width:700,
        height:200,
        editable: false,           
        title:"Checkbox selections",
        selectionModel: { type: 'none', subtype:'incr', cbHeader:true, cbAll:true},             
        flexHeight:true,
        flexWidth: true,       
        pageModel: {type:"local", rPP:10 },
        colModel:
        [
            { title: "Rank", width: 100, dataType: "integer",dataIndx:"rank"},
            { title: "Company", width: 220, dataType: "string", dataIndx:"company"},
            { title: "Revenues ($ millions)", width: 180, dataType: "float", align: "right", dataIndx:"revenues" },
            { title: "Profits ($ millions)", width: 170, dataType: "float", align: "right", dataIndx:"profits" },
            { title: "", dataIndx: "state", width: 30, minWidth:30, align: "center", type:'checkBoxSelection', cls: 'ui-state-default', resizable: false, sortable:false }
        ],
        dataModel: {
            data: data,
            location: "local",
            sorting: "local",
            sortIndx: "profits",
            sortDir: "down"
        }
    };
    var $grid = $("#grid_selection_checkbox").pqGrid(obj);
});   

Thanks,

Jacky

2

Help for ParamQuery Grid (free version) / Re: How do I call a javascript function on mouseover row in json grid?

« on: January 08, 2015, 09:40:35 pm »

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

3

Help for ParamQuery Grid (free version) / Re: How do I call a javascript function on mouseover row in json grid?

« on: January 08, 2015, 09:26:15 pm »

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 ((-:

4

Help for ParamQuery Grid (free version) / How do I call a javascript function on mouseover row in json grid?

« on: January 08, 2015, 06:27:24 pm »

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