In jqxGrid, how do I add a new calculated column from JSON data?

Question

My JSON data has fields baseQuantity and unitCost. I want to add a new field called totalCost which would be baseQuantity * unitCost.

I'm trying to add the data using loadComplete, but it doesn't seem to work.

ANOTHER alternative I could do is to loop through objData and inject a new field with the calculated value. But aside from that, is there any way I could do it via jqxGrid's API?

var jsonString = [{ "baseQuantity":"1", "unitCost":"2"}, { "baseQuantity":"3", "unitCost":"4"}];
var objData = $.parseJSON(jsonString);

var srcData = {
        datatype: "json",
        datafields: [ 
            { name : 'baseQuantity', type : 'number' },
            { name : 'unitCost', type : 'number' }
        ],
        localdata : objData
    };

var adapterData =  new $.jqx.dataAdapter(srcData, {
    loadComplete: function (records) {
        var modifiedDataArray = new Array();
        for (var i = 0; i < records.length; i++) {

            var modifiedData = records[i];
            modifiedData.totalPayment = modifiedData.baseQuantity * modifiedData.unitCost;

            modifiedDataArray.push(programme);
        }
        return modifiedDataArray;
    }
});

$('div#jqxGrid').jqxGrid({
    width: '100%',
    source: adapterData,
    theme: getTheme(),
    pageable: true,
    autoheight: true,
    sortable: true,
    altrows: true,
    columns: [
        { datafield: 'baseQuantity', text: 'Base Qty.', width: 120 }
        { datafield: 'unitCost', text: 'Unit Payment' , width: 120 }
    ]
});

A.O. · Answer 1 · 2013-08-14T16:56:21.133

3

Use the cellrenderer function:

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm

{ text: 'totalCost', datafield: 'totalCost', width: 70, cellsalign: 'right', columntype: 'number',
  cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
            var rowData = $("#jqxGrid").jqxGrid('getrowdata', row);
            return rowData.baseQuantity * rowData.unitCost;
        }   
}

edited Aug 14 '13 at 16:56

answered Aug 14 '13 at 16:23

A.O.

3,733
6
30
49

I'm using JSP, but I'm gibing +1 for the effort. In the end, I just injected the new value through a loop. However, I'm still interested in an "ideal" answer, if there is one. – geffchang Aug 14 '13 at 16:45
Have you tried experimenting with the cellrenderer attribute of that column? It is passed the row of the cell – A.O. Aug 14 '13 at 16:53
What is good about this solution is that the computer only process the row it needs to show. The bad part : you can't sort, group or filter on this column. – NLemay Oct 10 '13 at 20:15

score 0 · Answer 2 · answered Oct 10 '13 at 20:23

Don't use the event "loadComplete" but "beforeLoadComplete" instead. Here is an example :

var dataAdapter = new $.jqx.dataAdapter(source,
    {
        beforeLoadComplete: function (records) {
            records[0]['firstname'] = "Michael";
            return records;
        }
    }
);

Than you can loop through all records, and generate you computed column. This is the official solution they seems to give here : http://www.jqwidgets.com/community/topic/computed-column/

In jqxGrid, how do I add a new calculated column from JSON data?

2 Answers2