Show total amount as fixed footer for each column .

[SANDEEP GUPTA]

Hi All,  

        I am new to this forum and started working using this grid few days back . I need a help from you all. Is there  a way I can show total amount as fixed footer for each column . Below is a example for same 

http://trirand.com/blog/jqgrid/jqgrid.html

Go to 

New in version 3.5--> Summary Footer Row

Thanks in advance.

Regards,

Sandeep

[paramquery]

Here is the URL for ParamQuery summary demo

http://paramquery.com/demos/summary

[Sandeep Gupta]

Thanks this works with local array data  . But I am not able to calculate total values when  I am using json data from remote using ajax calls.During ajax when I calculate values I am not able to assign during the append of html div at end as they get lost due to ajax request. 

Thanks in advance.

Can you please help on this. 

Regards,

Sandeep

--
You received this message because you are subscribed to the Google Groups "paramquery" group.
To unsubscribe from this group and stop receiving emails from it, send an email to paramquery+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Regards,
Sandy

[Sandeep Gupta]

Hi All, 

  I am able to achieve this with json remote data. But got stuck at another issue . I have a search criteria which I select on panel and get the data and bind it to grid. Total shows correct value at first time but on subsequent search with different data the total row doesn't gets updated. Is there a way to rebind the whole grid same as first time it works on click of every search button. 

Below is the code I am using . 

  var $summary = "";

            $summary = $("<div class='pq-grid-summary'  ></div>")

            obj.render = function (evt, ui) {

                $summary.prependTo($(".pq-grid-bottom", this));

            }

            obj.refresh = function (evt, ui) {

                var data = [summaryData];

                var obj = { data: data, $cont: $summary }

                $("#grid_array").pqGrid("createTable", obj);

            }

            var grid = $("#grid_array").pqGrid(obj);

I put a alert in the js and the values for footer are getting passed updated ones but it is not reflecting on the gird as first time. 

Please help .

Regards, 

Sandeep 

--
Regards,
Sandy

[paramquery]

Great Job! 

Looks like you are doing search and calculating summary remotely.

In that case you can bind summary data with dataModel during dataModel.getData callback as below

this.summary = jsonResponse.summary;

which you can retrieve later in refresh callback

 obj.refresh = function (evt, ui) {

                var summaryData = ui.dataModel.summary;

[Paramvir Dhindsa]

createTable method refreshes the summary row (footer ) whenever it's invoked during the lifecycle of the grid. For example it updates the footer in online demo whenever cell value changes.

Debug your code to ensure you get updated summaryData in refresh callback.

Your code is dependent upon back end source code so I can't reproduce the test case entirely on my system. Use http://jsfiddle.net/ to share your test case.

On Tue, Apr 2, 2013 at 2:27 PM, Sandeep Gupta <sgup...@gmail.com> wrote:

Thanks. But currently also I am binding the summaryData during getdata ajax call and I do get the total values in it during each search but after the call refresh the footer row is not re drawn again and shows the old value . 

Is there a way I can redraw the whole footer table for total on each search result. 

below is the complete code

        colM = [

        { title: "Date/Month", width: colwidth, align: "center", editable: false

        },

        { title: "Online Enrolments", width: colwidth, align: "center", editable: false

        },

        { title: "Offline Enrolments", width: colwidth,  align: "center", editable: false

        },

{ title: "Online Enrolments (%)", width: colwidth, dataType: "decimal", align: "center", editable: false

}

];

        var hdnfieldSort = $('#hdnsort');

        var summaryData;

        var dataModel = {

            location: "remote",

            sorting: "remote",

            dataType: "JSON",

            method: "GET",

            editable: false,

            sortIndx: 0,

            sortDir: "up",

            getUrl: function () {

                var sortDir = (this.sortDir == "up") ? "asc" : "desc";

                var sort = ['date', 'cnt1', 'cnt2', 'cnt3'];

                hdnfieldSort.val(sort[this.sortIndx] + '|' + sortDir);

                return { url: "/JQueryGetData.aspx/GetData", data: "cur_page=" + this.curPage +

                   "&fromDate=" + fromDate +

                   "&toDate=" + toDate +

                   "&sortBy=" + sort[this.sortIndx] + "&dir=" + sortDir + "&radiolistVal=" + rdoButton

                    + "&ClickedControl=JPEnrolments"

                };

            },

            getData: function (dataJSON) {

                if (dataJSON != null) {

                    var myArray = [];

                    $.each(dataJSON, function (index, s) {

                        myArray.push([s.Date, s.cnt1, s.cnt2, s.cnt3]);

                    });

                    summaryData = ["<b>Total</b>", myArray[myArray.length - 1][1], myArray[myArray.length - 1][2], myArray[myArray.length - 1][3]];

                    myArray.pop();

                    dataJSON = myArray;

                }

                return {

                      totalRecords: myArray.length + 1, curPage: 1, data: dataJSON

                };

            }

        }

         

          $.extend(colM[3], {

              render: function (ui) {

                  var data = ui.data, rowIndx = ui.rowIndx;

                  return data[rowIndx][3] + '%';

              }

          });

        if (dataModel != null) {

            $("#divMessageBox").attr("style", "display:none");

            $('#gridViewWrapper1').fadeIn('slow').show();

            $('#chartViewWrapper1, #chartTitle1').hide();

            $('.excel-wrapper').attr("style", "display:block");

            var obj = {

                width: '100%',

                colModel: colM,

                dataModel: dataModel,

                resizable: false,

                numberCell: false,

                draggable: false,

                editable: false,

                flexHeight: false,

                flexWidth: true,

                height: 222,

                scrollModel: { pace: "fast", horizontal: false }

            };

            var $summary = "";

            $summary = $("<div class='pq-grid-summary'  ></div>")

            obj.render = function (evt, ui) {

                $summary.prependTo($(".pq-grid-bottom", this));

            }

            obj.refresh = function (evt, ui) {

                var data = [summaryData];

                var obj = { data: data, $cont: $summary }

                $("#grid_array").pqGrid("createTable", obj);

            }

            var grid = $("#grid_array").pqGrid(obj);

            $("#grid_array").pqGrid("option", "topVisible", false);

        }

Regards, 

Sandeep

[Paramvir Dhindsa]

I put up a similar test http://paramquery.com/demos/summary_remote to test refresh of summary values with random values which works fine.

Try to use http://paramquery.com/content/js/pqgrid.min.js

and 

http://paramquery.com/Content/css/pqgrid.min.css

to see whether it fixes your issue.

On Wed, Apr 3, 2013 at 9:36 AM, Sandeep Gupta <sgup...@gmail.com> wrote:

Hi , 

I just created another webform with below code 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="JetReports.Reports.JetPrivilege.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <!--jQuery dependencies-->

    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"  type="text/javascript"></script>    

    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"  type="text/javascript"></script>

<!--PQ Grid files-->

 <link rel="stylesheet" href="../../App_Themes/Default/PqGrid.css/pqgrid.dev.css" type="text/css"/>

   <script  type="text/javascript" src="../../Scripts/PQGrid.js/pqgrid.dev.js"></script>

</head>

<body>

    <form id="form1" runat="server">

      <asp:TextBox ID="txtFromDate" ClientIDMode="Static" runat="server"  Width="75px"></asp:TextBox>

      <asp:TextBox ID="txtToDate" ClientIDMode="Static" runat="server"   Width="75px"></asp:TextBox>

     <asp:HiddenField ID="hdnsort" runat="server" ClientIDMode="Static" />

     <asp:Button ID="btnSearch" Visible="true" runat="server" Text="Generate Report" 

                                 OnClientClick=" return funcGenerateData()"     />

    <div id="grid_array" style="width:960px;"></div>

    </form>

</body>

<script type="text/javascript">

    function funcGenerateData() {

        var pageWidth = $("#grid_array").width();

        var colwidth = (pageWidth / 4);

        colM = [

               { title: "Date/Month", width: colwidth, align: "center", editable: false

               },

               { title: "Online Enrolments", width: colwidth, align: "center", editable: false

               },

               { title: "Offline Enrolments", width: colwidth, align: "center", editable: false

               },

        { title: "Online Enrolments (%)", width: colwidth, dataType: "decimal", align: "center", editable: false

        }

        ];

        var fromDate = $('#txtFromDate').val();

        var toDate = $('#txtToDate').val();

        var hdnfieldSort = $('#hdnsort');

        var summaryData;

        var dataModel = {

            location: "remote",

            sorting: "remote",

            dataType: "JSON",

            method: "GET",

            editable: false,

            sortIndx: 0,

            sortDir: "up",

            getUrl: function () {

                var sortDir = (this.sortDir == "up") ? "asc" : "desc";

                var sort = ['ReportDate', 'OnlineCount', 'OfflineCount', 'OnlinePercentage'];

                hdnfieldSort.val(sort[this.sortIndx] + '|' + sortDir);

                return { url: "/JQueryGetReportsData.aspx/GetData", data: "cur_page=" + this.curPage +

                          "&fromDate=" + fromDate +

                          "&toDate=" + toDate +

                          "&sortBy=" + sort[this.sortIndx] + "&dir=" + sortDir + "&radiolistVal=Date&ClickedControl=JPEnrolments"

                };

            },

            getData: function (dataJSON) {

                var myArray = [];

                if (dataJSON != null) {

                    $.each(dataJSON, function (index, s) {

                        myArray.push([s.ReportDate, s.OnlineCount, s.OfflineCount, s.OnlinePercentage]);

                    });

                    summaryData = ["<b>Total</b>", myArray[myArray.length - 1][1], myArray[myArray.length - 1][2], myArray[myArray.length - 1][3]];

                    myArray.pop();

                    dataJSON = myArray;

                }

                return {

                    totalRecords: myArray.length, curPage: 1, data: dataJSON

                };

            }

        }

        $.extend(colM[3], {

            render: function (ui) {

                var data = ui.data, rowIndx = ui.rowIndx;

                //                       if (data[rowIndx][0] == 'Total') {

                //                           summaryData = ["<b>Total</b>", data[rowIndx][1], data[rowIndx][2], data[rowIndx][3]];

                //                       }

                return data[rowIndx][3] + '%';

            }

        });

        var obj = {

            width: '100%',

            colModel: colM,

            dataModel: dataModel,

            resizable: false,

            numberCell: false,

            draggable: false,

            editable: false,

            flexHeight: false,

            flexWidth: true,

            height: 240,

            scrollModel: { pace: "fast", horizontal: false }

        };

        //               alert(obj.data.length); 

        //               for (var i = 0; i < obj.data.length; i++) {

        //                   obj.data[i].push("");

        //               }

        var $summary = "";

        obj.render = function (evt, ui) {

            alert('render');

            $summary = $("<div class='pq-grid-summary'  ></div>")

                   .prependTo($(".pq-grid-bottom", this));

        }

        obj.refresh = function (evt, ui) {

            var data = [summaryData]; //2 dimensional array

            var obj = { data: data, $cont: $summary }

            alert(summaryData);

            $("#grid_array").pqGrid("createTable", obj);

        }

        var $grid = $("#grid_array").pqGrid(obj);

        return false;

    }

        

</script>    

</html>

I added alert in obj.refresh and it reflects updated summaryData but it doesn't reflects the 

same in footer . Is there any thing else that needs to be declared here....

Please help 

[Paramvir Dhindsa]

It doesn't matter where you place your refesh ( to refresh footer) button as long as you are using API correctly. It should work fine.

Please take help of http://jsfiddle.net/ to show your issue.

PS: Please reply to google group and not to me.

On Thu, Apr 4, 2013 at 11:48 AM, Sandeep Gupta <sgup...@gmail.com> wrote:

Thanks a lot Paramvir . But the issue I have a external button on click of which I get the data from json and that event doesn't refresh the value on the footer totals. 

In your case it is a button which is hitting the refresh button on footer specifically and it changes the value on footer totals. 

Thanks. 

Please suggest. 

I have to trigger the refresh of footer div on click of search button when data binds after the first page load and not on the click of external refresh button click .

So can you add a button on your html other grid and on click of the jquery footer refreshes . 

Thanks .