createTable method problem

[motoguru]

Hello,

I've recently bought the PRO version of the grid. First problem which I discovered is method "createTable" not working properly I suppose. I'm getting an output:

<table cellspacing="0" cellpadding="0" class="pq-grid-table pq-grid-td-border-right pq-grid-td-border-bottom "><tbody><tr class="pq-row-hidden"><td style="width:31px;"></td></tr><tr class="pq-grid-row pq-grid-oddRow" pq-row-indx="0"><td class="pq-grid-number-cell ui-state-default"><div class="pq-td-div">&nbsp;</div></td></tr></tbody></table>

Using Your example:

$("#myGrid").pqGrid("createTable", {
            $cont: $("#myCustomContainer"),
            data: [["Total", "5", "10"]]
        });


Exactly the same output I get using my previous summing function I used with demo, which is:

data object (dataS in the code): [["'<strong>Summary: </strong>'", "''", "'1 695 184,47'", "'1 936 894,21'", "'2 264 940,72'", "'2 595 945,96'", "''", "''"]]

(please note empty cells as I sum not all of the columns but specified),

and then this code:

       $summary = $('<div class="pq-grid-summary"></div>').prependTo($(".pq-grid-bottom", this));
       var summaryData = calculateSummary(summaryDetails, arrayData);
       var dataS = [summaryData];
       var tbl = { data: dataS, $cont: $summary };
       $("#" + gridDivElementId).pqGrid("createTable", tbl);

in the $summary container gives the output:

<table cellspacing="0" cellpadding="0" class="pq-grid-table pq-grid-td-border-right pq-grid-td-border-bottom "><tbody><tr class="pq-row-hidden"><td style="width:31px;"></td></tr><tr class="pq-grid-row pq-grid-oddRow" pq-row-indx="0"><td class="pq-grid-number-cell ui-state-default"><div class="pq-td-div">&nbsp;</div></td></tr></tbody></table>

which is exactly the same as Your example in the API documentation.


Why this one is working properly in DEMO version but not in paid? Or maybe I'm doing something wrong? Plase note the grid is displayed well in both versions with the same, not changed data.

EDIT:
or maybe there is better way to use collumn summary simmilar to grouping one but WITHOUT using row grouping?

[paramvir]

motoguru

Are you using JSON (array of row objects ) or 2 dimensional Array (array of row arrays) data in your grid?

Could you please post entire code of your grid so that I could look what's going on.

[motoguru]

Ok then,

As I generate my grid data from .NET (I wrote an object called GridProvider which is preparing data to the javascript) I'll try to put as much information from output as possible.

So, my colModelDetails (colModel) contains such rows:

{title:'Some title for string value', dataType: 'string', width:100,align:'right'}
{title:'Some title for float value', dataType: 'float', width:100,align:'right'}

and so on,

My arrayData is an array of:

[0, 'Some string value for column title', '290203.80', '327279.80', '378428.80', '428080.50', '88225.07', '30%'],
[1, 'Some string value for column title', '2902303.80', '327219.80', '37328.80', '422.50', '8822.07', '30%']
 
and so on.


Then my grid id generated this way:

  var gridResizable = false;
   var resultsPerPage = 15;
    var obj = {
        dataModel: {
            data: arrayData,
            sorting: "local",
        },
        colModel: colModelDetails,
        title: "Grid title",
        resizable: gridResizable,
        flexHeight: true,
        freezeCols: 1,
        numberCell: { show: true },
        editable: false,
        selectionModel: { type: 'row' },
        scrollModel: { autoFit: true },

 //here I tried to "override" grouping as automatic summary with grouping works well (when I have some summary objects in colModel as in API)
        //groupModel: {
        //    dataIndx: ["someCol"],
        //    collapsed: [false],
        //    title: ["Group title"],
        //    dir: ["up"]
        //    //,icon: ["circle-plus", "circle-triangle", "triangle"]
        //},

        pageModel: {
            type: "local",
            rPP: resultsPerPage,
            strRpp: "",
            strDisplay: " results from {0} to {1} of {2} all"
        },
        hwrap: false,
        wrap:false,
    };

    var $summary = "";
    obj.render = function (evt, ui) {
       $summary = $('<div class="pq-grid-summary"></div>').prependTo($(".pq-grid-bottom", this));
       var summaryData = calculateSummary(summaryDetails, arrayData);
       var dataS = [summaryData];
 alert(dataS.toSource());
//this alert gives me output (and this is the result od calculateSummary function, dont worry about incoming parameters, just note the output which is the result of summing all the dataArray fields I want to sum, the empty fields gives an empty break - just omits one column to put the sum under the proper one - this one was working very well in demo):
[["'<strong>Summary: </strong>'", "''", "'1 695 184,47'", "'1 936 894,21'", "'2 264 940,72'", "'2 595 945,96'", "''", "''"]]


       var tbl = { data: dataS, $cont: $summary };
       $("#gridDiv").pqGrid("createTable", tbl);
       

//this one I used to test Your API example:

        //$("#" + gridDivElementId).pqGrid("createTable", {
        //    $cont: $("#genZestBtn"),
        //    data: [["Total", "5", "10"]]
        //});
       


    }

    obj.rowSelect = function (evt, ui) {
        var rowIndx = parseInt(ui.rowIndx)+1;
        manageSelectedRow(ui.rowData, rowIndx); //function for selected row management - working properly
    }

    obj.refresh = function (evt, ui) {
 //EMPTY BODY
    }

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

[paramvir]

I couldn't get complete code so as to reproduce your issue. But I understand that you are using 2 dimensional array format for the rows.

I've created a working demo based on your data format for your reference

http://paramquery.com/pro/demos/summary

Kindly note:

1) Though Pro is derived from Free version, they are not completely identical in every aspect.

2) Frozen summary row is independent of row grouping summary feature.

[motoguru]

Hello again,

Thank You for all the answers and working example. Unfortunately this doesn't work for me. It's almost the same example as in pqGrid DEMO version row summary example which was working fine for me. After few hours of solving the problem I was able to find a solution. I'll try to explain why the problem occured so others in the future could solve it too maybe.

I'm using js function to generate grid, for example:

function getGrid(....custom params....) {

//here goes preparation code and grid obj declarations as in Your example above

//then the problem is function refresh does not recognize '$grid' parameter so does not fire at all:

 obj.refresh = function (evt, ui) {
            if ($grid) {
                var data = [summaryData];
                var obj = { data: data, $cont: $summary }
                $grid.pqGrid("createTable", obj);
            }
        }

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

//solution: FIRE REFRESH EVENT MANUALLY HERE:

        $grid.pqGrid('refresh');

//optionally return the object:
        return $grid;
}


As You can see it's outside $(function(){...}); and the object $grid is undefined above in refresh function declaration. If we fire "refresh" event manually, everything starts to work fine. I don't know why in demo there was no such a problem, but in pro it definitely is (every other code was working fine after migration). Finally method createTable does not work properly (for some reason) inside render event.

I know the problem was really simple and funny, but caused real brainstorm for me and maybe someone will find this solution useful as well.

One more suggestion. In the grouping example colModel raises new feature: summary. This is really cool. Why don't provide the same feature for entire column without using grouping mechanizm, as (probably) grouping is being used less than summary?

Thank You once again.


Best regards.

[paramvir]

motoguru

createTable doesn't work inside render event because createTable is an API method and grid initialization is incomplete inside this event as noted in API documentation. Any $grid.pqGrid( ..... ) won't work in render event.
http://paramquery.com/pro/api#event-render

I see frozen rows is also mentioned in the render event description which might be the cause of confusion.

Thanks for your feedback on colModel.summary (without grouping) feature.  Note has been taken and it might be added in the forthcoming versions.

[motoguru]

Yeah, I figured out that it won't work inside render so that I used refresh as in Your example. When it wasn't working as well I tried to fire refresh method manually and it solved my problem Maybe it's because I use separate function to create the grid rather than using code inside jquery $(function(){...}); in a stream.

Once again thanks for feedback.