prime
prime

Reputation: 15574

How to access other row data from a cell's custom formatter in JqGrid

I have an XML data source like below,

<root>
    <item priceOri = "100" discount = "10"></item>
    <item priceOri = "200" discount = "110"></item>
    .
    .
    .
</root>

And I'm populating those data to a table using JqGrid. the code is something like below.

datatype : 'xml',
colModel: [ 
  ... 
  {name:'priceOri', index:'priceOri', width:60,xmlmap : "[priceOri]", align:"center"},
  {name:'discount', index:'discount', width:60,xmlmap : "[discount]", align:"center"},
  {name:'price', index:'price', width:60,xmlmap : "[price]", align:"center", editable: true, formatter:discountFmatter},
  ...
 ]

xmlReader: {
    root: "root",
    row: "item",
    repeatitems: false
},  

The formatter is like below.

function discountFmatter (cellvalue, options, rowObject)
{
   var price;
   // do calculation based on other cell values in the same column
   //price = priceOri - discount;
   var new_format_value = price;
   return new_format_value
}   

As in the code I need to access other values in the item tag to calculate the price section. So basically I want to access other cell values in that same row. How can I do that.

I used below code snippets but they resulted as undefined

rowObject[0]  // undefined
rowObject.priceOri //undefined

Can anyone show me the steps to achieve this.

UPDATE : I have the JqGrid version 4.4.0 of Tony Tomov. Since I'm working on a already developed application I can't change or update that library versions. So I have to do it using the same JqGrid version 4.4.0.

Seems like Oleg's rowObject instanceof Element ? $(rowObject).attr("priceOri") : rowObject.priceOri is working for this requirement.

UPDATE 2 : (Because rowObject.rewards wont work in below case)

new XML has below changed format,
< item priceOri = "100" discount = "10" rewards = "20" >< /item >

So new formatter will be like,

function discountFmatter (cellvalue, options, rowObject)
{
   var price;
   // do calculation based on other cell values in the same column
   //price = priceOri - discount - rewards;
   var new_format_value = price;
   return new_format_value
}  

Note that I don't display the value rewards in the jQgrid table. So how can I achieve this.

Oleg's answer : In case of usage old jqGrid you will have to add new column rewards. You can use hidden: true property in the column. Free jqGrid allow you to use additionalProperties

Upvotes: 4

Views: 2891

Answers (1)

Oleg
Oleg

Reputation: 221997

There an important problem in processing of data inside of custom formatter. The format of rowObject is the same as the item of input data. Thus one have to use rowObject[0] or rowObject.priceOri to process the JSON data depend on whether repeatitems: false was used of not. In the same way the code of custom formatter should be another to process the JSON data, which uses the next of the nodes or the attributes. One have to use $(rowObject).find(">priceOri") or $(rowObject).attr("priceOri") (the last one corresponds the format of your data).

Event more complex (for understanding) have to be the code if one uses loadonce: true additionally. One will have to use the expressions described above only during processing the data loaded from the server. The next processing (after local sorting, paging or filtering) have to use rowObject.priceOri notation.

I develop free jqGrid fork of jqGrid short after Tony have changed the licence agreement of jqGrid (see the post), made the product commercial (see the prices) and have rename jqGrid to "Guriddo jqGrid JS". Since about one year of development of free jqGrid I implemented many features (the most from there are described in the wiki and readmes to every published version).

Free jqGrid holds the format of rowObject parameter the same as before to hold compatibility with previous versions, but the parameter option is extended. It contains rowData property with parsed data. To access to priceOri inside of custom formatter in free jqGrid one can use options.rowData.priceOri. Thus you can use

function discountFmatter (cellvalue, options, rowObject) {
    return parseFloat(options.rowData.priceOri) -
           parseFloat(options.rowData.discount);
}

The code of formatter works in the same way in case of usage loadonce: true and it will stay working even if you would change the format of returned data from XML to JSON (for example to improve the performance of your code).

The demo uses the latest code of free jqGrid from GitHub and it displays

enter image description here

It uses the following code

$(function () {
    "use strict";
    function discountFmatter (cellvalue, options, rowObject) {
        return parseFloat(options.rowData.priceOri) -
                parseFloat(options.rowData.discount);
    }

    $("#grid").jqGrid({
        url: "prime.xml",
        datatype: "xml",
        colModel: [ 
            { name: "priceOri", xmlmap: "[priceOri]" },
            { name: "discount", xmlmap: "[discount]" },
            { name: "price", xmlmap: "[price]", editable: true,
                formatter: discountFmatter }
        ],
        cmTemplate: { width: 60, align: "center" },
        iconSet: "fontAwesome",
        xmlReader: {
            root: "root",
            row: "item",
            repeatitems: false
        },
        loadonce: true,
        viewrecords: true,
        rownumbers: true,
        caption: "Stack Overflow Example"
    });
});

Upvotes: 1

Related Questions