Jqgrid : row multiplication not working

Question

I have two issues here with my jqgrid table, first, it does not do sorting in ascending or descending order when you click on the column headers.

The problem I am having is I want to multiply Num1 and Num2 and show the output in the virtual Result column, How do i mutilpy the Num1 and Num2 and show the output in virtual column

i was using this example How do I make a non database column in jqGrid?

here is my code. my Result column doesnt show any of the result of Num1 x Num2

     <!DOCTYPE html>
    <html lang="en">
    <head>

            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    
        <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/themes/redmond/jquery-ui.css" />
        <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.5/css/ui.jqgrid.css" />
        <style type="text/css">
            html, body { font-size: 75%; }
        </style>
     <script type="text/ecmascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script> 
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/jquery-ui.min.js"></script>
        <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.5/js/i18n/grid.locale-en.js"></script>
        <script type="text/javascript">
            $.jgrid.no_legacy_api = true;
            $.jgrid.useJSON = true;
        </script>
        <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.5/js/jquery.jqGrid.src.js"></script>
        
        <title>Jqgrid data </title>
    </head>
    <body>
    <div style="margin-left:20px">
        <table id="nplGrid"></table>
        
    </div>
        <script type="text/javascript">
       
        $(document).ready(function () {
            $("#nplGrid").jqGrid({
                url: 'json/data-bcp2.json',
                datatype: "json",
                colModel: [
                    { label: 'Id', name: 'Id', width: 145 },
                    { label: 'Symbol', name: 'Symbol', width: 90 },
                    { label: 'Quantity', name: 'Quantity', width: 100, align: "right" },
                    /*{ label: 'Value1', 
                        name: 'Value1', 
                        width: 80, 
                        sorttype: 'number', 
                        formatter: 'number',
                        align: 'right'
                    }, */
                    { label: 'Price', name: 'Price', width: 180, sorttype: 'number' , align: "right",formatter: 'currency', formatoptions: { prefix: " $", suffix: " "}},
                    { label: 'Value', name: 'Value', width: 180, sorttype: 'number', align: "right",formatter: 'currency', formatoptions: { prefix: " $", suffix: " "} },
                    { label: 'Pledged', name: 'Pledged', width: 80, sorttype: 'integer' } , 
                     { label: 'Num2', name: 'Num2', width: 80, formatter:'currency' },  
                     { label: 'Result', name: 'Result', width: 80,formatter:'currency',
                      formatter:function(cellvalue, options, rowObject) {
                            var amount = parseInt(rowObject.Num1,10),
                            tax = parseInt(rowObject.Num12,10);
                          return $.fmatter.util.NumberFormat(amount*tax,$.jgrid.formatter.currency);
                        } 
                     }  
                ],

                gridview: true,
                rownumbers: true,
                sortname: "invdate",
                viewrecords: true,
                sortorder: "desc",
                caption: "Just simple local grid",
                height: "100%",
                footerrow: true,


                loadComplete: function () {
                    var $self = $(this),
                        sum = $self.jqGrid("getCol", "Price", false, "sum");

                    $self.jqGrid("footerData", "set", {invdate: "Total:", Price: sum});
                        
                        sum1 = $self.jqGrid("getCol", "Value", false, "sum");

                    $self.jqGrid("footerData", "set", {invdate: "Total:", Value: sum1});
                }

                
            });
            
        });

    </script>
    
        
    </body>
    </html>

JSON DATA BELOW:

 {
   "rows":[
        {
                "Id":"C14999",
                "Symbol":"AA",
                "Quantity":"10000000 ",
                "Price":"2500000",
                "Value":"2500000",
                "Pledged":"Y",
                "Num1":"4",
                "Num2":"20"
                
              },
              {
                "Id":"C14999",
                "Symbol":"IRTX",
                "Quantity":"253432250",
                "Price":"3382000",
                "Value":"857107.87",
                "Pledged":"Y",
                "Num1":"12",
                "Num2":"31"
              },
              {
                "Id":"C14999",
                "Symbol":"MMM",
                "Quantity":"143440000",
                "Price":"100000",
                "Value":"1434400",
                "Pledged":"Y",
                "Num1":"22",
                "Num2":"20"
               
              },
              {
                "Id":"C14999",
                "Symbol":"FMCX",
                "Quantity":"285657660",
                "Price":"187125",
                "Value":"62476901 ",
                "Pledged":"N",
                "Num1":"232",
                "Num2":"20"  
              },
              {
                "Id":"C14999",
                "Symbol":"CEB",
                "Quantity":"1228000000",
                "Price":"949000",
                "Value":"116537200 ",
                "Pledged":"Y",
               "Num1":"2",
                "Num2":"10"
              },
              {
                "Id":"C23456",
                "Symbol":"VETF",
                "Quantity":"13984000000",
                "Price":"256000",
                "Value":"357990400",
                "Pledged":"Y",
                 "Num1":"14",
                "Num2":"20"
              }
   ]
}

It looks like your previous question, but the `Quantity` still contains commas and the values from 3 columns `Quantity`, `Value` and `Value` contains unneeded spaces. All integers and floats are included in JSON as strings instead of numbers. It makes additional problems and increase unneeded the size of transferred data. It would be practical to serialize numbers just as numbers. — Oleg, Apr 06 '16 at 18:51
Currently my table renders correctly, the problem I am having is I want to multiply Num1 and Num2 and show the output in the virtual Result column, How do i mutilpy the Num1 and Num2 and show the output in virtual column — user244394, Apr 06 '16 at 18:58

score 1 · Accepted Answer · answered Apr 06 '16 at 20:13

1

It looks like your previous question, but the Quantity still contains commas and the values from 3 columns Quantity, Value and Value contains unneeded spaces. All integers and floats are included in JSON as strings instead of numbers. It makes additional problems and increase unneeded the size of transferred data. It would be practical to serialize numbers just as numbers. I mean that it would be better to return the item

{
    "Id":"C14999",
    "Symbol":"AA",
    "Quantity":" 1,000.0000 ",
    "Price":" 25.00000 ",
    "Value":" 25000.00 ",
    "Pledged":"Y",
    "Num1":"4",
    "Num2":"20"
}

like

{
    "Id":"C14999",
    "Symbol":"AA",
    "Quantity":1000.0000,
    "Price":25.00000,
    "Value":25000.00,
    "Pledged":"Y",
    "Num1":4,
    "Num2":20
}

By the way, the most standard serialization libraries, which you could use on the server side will be automatically cut unneeded 0 values after the decimal point of the numbers. On cause one can do the change inside of beforeProcessing callback of jqGrid, but it would be less effective.

Now about the problem with sorting. The format of the data returned from the server looks strange. It is like

{
    "rows": [
        {...},
        {...},
        ...
        {...}
    ]
}

instead of just

[
    {...},
    {...},
    ...
    {...}
]

In any way, the response don't provide any information about the total number of pages. Thus I can suppose that you don't implemented any server side sorting, paging or filtering of the data. You should use loadonce: true option in the case. It informs jqGrid to save the returned data locally (as JavaScript object saved in internal parameters data and _index). After the first loading jqGrid will change initial datatype to "local" and all next paging and sorting requests will be done locally without communication with the server.

You grid use sortname: "invdate", sortorder: "desc" option, but no column with the name invdate exist in the grid.

I wrote my recommendation (in my answer on your previous question) to use free jqGrid from CDN instead of old jqGrid loaded from my server. Free jqGrid allows to specify forceClientSorting: true option, which means that the client sort the data on the first loading.

I can continue, but I created the demo https://jsfiddle.net/OlegKi/mnf72611/3/. I think that it should do close to what you want to implement.

answered Apr 06 '16 at 20:13

Oleg

220,925
34
403
798

Oleg- Thanks a lot, this was really helpful. I am trying to keep my application simple by getting the JSOn service from the server and displaying on the jqGrid. Also, I want to add a link to all in column 1. for example "C14999" will be < href="www.somelink.com?C14999&id=1">C14999, so when the user click on this, it opens a new page with some information related to "C14999" and then display a jgGrid table based on the id of "C14999". Is it possible to do? – user244394 Apr 06 '16 at 21:21
@user244394: You are welcome! It's easy to do. One can use `formatter: "showlink"` (see [the wiki article](https://github.com/free-jqgrid/jqGrid/wiki/improvement-of-formatter:-%22showlink%22)). The modified demo will be https://jsfiddle.net/OlegKi/mnf72611/4/ – Oleg Apr 06 '16 at 21:37
Oleg - I noticed you used parameter serverResponse to stringify, but in actual JSON coming from server it wont have var serverResponse just [...] , so how and what do i pass to JSON.stringify("")? – user244394 Apr 07 '16 at 14:58
@user244394: It's just the implementation of JSFiddle. The [the documentation](http://doc.jsfiddle.net/use/echo.html). We need create the demo which communicate with the server and get some data from the server. JSFiddle provide Echo service, but it should know which data should be returned. Thus one *send* first the data to the echo server which one expect to return. The lines `url: "/echo/json/", mtype: "POST", postData: { json: JSON.stringify(serverResponse) }` just corresponds to `url: 'json/data-bcp2.json'` which returns `serverResponse`. – Oleg Apr 07 '16 at 15:01
Oleg- Thanks a bunch, One thing I noticed when I copy this to my local host, the header arrows for sorting doesnot show up. Am i missing something ? here is my FIDDLE for the one of my localhost https://jsfiddle.net/3xgb1b35/4/ . Also, how can i change the color say to red or green table instead of blue – user244394 Apr 07 '16 at 19:02
@user244394: You are welcome! You need include [Font Awesome](http://fontawesome.io/) CSS, for example from https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css. See [here](http://free-jqgrid.github.io/getting-started/index.html) and [here](https://github.com/free-jqgrid/jqGrid/wiki/Using-Font-Awesome-in-free-jqGrid-4.8). You can click on "External Resources" (see on the left side) of the demo https://jsfiddle.net/3xgb1b35/4/ to see all CSS and JS resources be used. – Oleg Apr 07 '16 at 19:36
@Oleg- I ran into some issues how the numbers are being displayed $600.000,00 instead of $600,000.00. Also, when i try to pass/output mydata json from server to postData: { json: JSON.stringify(mydata) }, I get mydata not found.. not sure what i am doing wrong here. Here is my fiddle link https://jsfiddle.net/dev2020/exw6hug9/2/ – user244394 Apr 11 '16 at 19:28
@user244394: In the demo https://jsfiddle.net/OlegKi/exw6hug9/3/ I see `$600,000.00`. You should verify wither you included some another locale (like `grid.locale-de.min.js`) in your real demo? You don't need to include any locale if you need to display dates/numbers in en-US format. – Oleg Apr 11 '16 at 19:45
@Oleg- Thank you. Yes i had included local like (grid.locale-de.min.js) file in my demo and still the comma shows up at the end $600.000,,00 instead of $600,000.00. here is my fiddle https://jsfiddle.net/dev2020/exw6hug9/8/ – user244394 Apr 11 '16 at 20:19
@user244394: Sorry, but do you read what I write you? Your last demo contains `` and I wrote you just now that you should **remove it**. – Oleg Apr 11 '16 at 20:22
sorry missed that thanks you for ur help. that worked – user244394 Apr 11 '16 at 20:24

Jqgrid : row multiplication not working

1 Answers1