ParamQuery grid support forum

General Category => Help for ParamQuery Grid (free version) => Topic started by: BigMark on January 18, 2014, 11:37:46 pm

Title: How to refresh the summary row?
Post by: BigMark on January 18, 2014, 11:37:46 pm

Hi Sir:
    The part of  the code is as below:

  function LoadGridWithSummary(obj_ID, url, colM, sort, PageSize, topVisible, summaryData) {
    GetRowIndex = -1;
    var dataModel = {
        location: "remote",
        sorting: "remote",
        paging: "remote",
        dataType: "JSON",
        method: "GET",
        curPage: 1,
        rPP: PageSize,
        sortIndx: 0,
        sortDir: "up",
        rPPOptions: [20, 30, 40, 50, 100, 500, 1000],
        getUrl: function () {
            var orderField = (this.sortIndx == "0") ? "" : sort[this.sortIndx];
            var sortDir = (this.sortDir == "up") ? "desc" : "asc";
            if (this.curPage == 0) {
                this.curPage = 1;
            }
            return {
                url: url,
                data: "pqGrid_PageIndex=" + this.curPage + "&pqGrid_PageSize=" +
                    this.rPP + "&pqGrid_OrderField=" + orderField + "&pqGrid_OrderType=" + sortDir + "&pqGrid_Sort=" + escape(sort)
            };
        },
        getData: function (dataJSON) {
            if (dataJSON == null && dataJSON.totalRecords <= 0) {
                showTipsMsg("No Data！", 5000, 5);
            }
            return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: dataJSON.data };
        }
    };
    if (!IsNullOrEmpty(topVisible)) {
        topVisible = false;
    }
    var $summary = "";
    $(obj_ID).pqGrid({
        dataModel: dataModel,
        colModel: colM,
        editable: false,
        topVisible: topVisible,
        oddRowsHighlight: false,
        columnBorders: true,
       
        freezeCols: 0,
        rowSelect: function (evt, ui) {
            GetRowIndex = ui.rowIndxPage;
        },
        render: function (evt, ui) {
            $summary = $("<div class='pq-grid-summary'  ></div>").prependTo($(".pq-grid-bottom", this));
        },
        cellSave: function (ui) {
            //$(obj_ID).refresh();
        },
        refresh: function (evt, ui) {
            //var data = [summaryData, ["Second row for testing", "row", "for", "testing"]]; //2 dimensional array.
            var data = [summaryData]; //2 dimensional array
            var obj = { data: data, $cont: $summary };
            $(obj_ID).pqGrid("createTable", obj);
        }
    });
    $(obj_ID).pqGrid('refresh');
    pqGridResize(obj_ID, -52, -4);
}
   
  When Incoming the parameter of  summaryData ,the summary row was not changed!
   why?
   Thanks!

BigMark

Title: Re: How to refresh the summary row?
Post by: paramvir on January 19, 2014, 08:36:33 am

BigMark

First call to createTable creates a summary row.

Any subsequent call to createTable using same $cont parameter replaces the previous table with a new table,

hence createTable method can also be used to refesh table ( summary row in your case) with new data.     

Example:

Code: [Select]

var data = [ ["first", "data"]]; //2 dimensional array
var obj = { data: data, $cont: $summary };
$grid.pqGrid("createTable", obj); //initial summary row


Code: [Select]

data = [ ["another", "data" ] ]; //2 dimensional array
var obj = { data: data, $cont: $summary };//same $cont but different data.
$grid.pqGrid("createTable", obj); //refresh summary row

Please let know whether it answers your question.

Title: Re: How to refresh the summary row?
Post by: BigMark on January 19, 2014, 04:45:04 pm

Hi Sir!
    Thank you for your reply!But I'm not sure your answer.
    Can you give me an example of completed?
    I'm not quite sure how to cover the front of the  '$(obj_ID).pqGrid("createTable", obj);'
    I'm really confused!
    Looking forward to your reply!
    Thank you very much!
   
     

Title: Re: How to refresh the summary row?
Post by: paramvir on January 20, 2014, 10:58:36 pm

In this example http://paramquery.com/demos/summary

any changes in cell lead to invocation of cellSave which in turn calls obj.refresh which calls createTable to refresh summary row.

Cell changes (user action) -> cellSave (pqGrid event) -> obj.refresh (method) -> createTable (pqGrid method) -> refreshes the summary row. (end result)