jQuery Grid Plugin - jqGrid

tony said:

Hello,

It all depend how is defined your content - i.e the value of vl in change event.

Regards

In the example above if I set the vl value to group by col4, the grouping total is listed in the col5 header.  This example works correctly if I set the groupSummaryPos value to "footer" instead of "header".

tony said:

Hello,

I see the id column is set to frozen. Do you call somewhere in your script the frozen column.

Please in the future give us the whole test case. This way you will get help.

Without a test case I can not help.

Regards

Apologies -- I was playing around trying to get around this issue.  Here's the full snippet.  Note: If I enable the multiselect property, the summary total correctly shows up under column 4 when I perform a grouping.  If I disable the multiselect property, the summary total incorrectly shows up under column 5 when I perform the grouping.

(function() {
    // Get the JSON data from the server.
    $(document).ready(function() {
       
            // We can read in JSON directly into the grid, but this provides us a way to perform
            // any transformation before we add the data to the grid?
            var txHistoryLineItems = [];
            var txHistoryLineItems1 = {
              id: 1,
              col1: 'Jake',
              col2: 'Smith',
              col3: 44,
              col4: 113,
              col5: 'Some Description'
            };
            var txHistoryLineItems2 = {
              id: 2,
              col1: 'Joan',
              col2: 'Thomas',
              col3: 44,
              col4: 113,
              col5: 'Line1\nLine2\nLine3\Line4'
            };
            var txHistoryLineItems3 = {
              id: 3,
              col1: 'John',
              col2: 'Mott',
              col3: 44,
              col4: 113,
              col5: 'Another Description'
            };
            txHistoryLineItems.push(txHistoryLineItems1);
            txHistoryLineItems.push(txHistoryLineItems2);
            txHistoryLineItems.push(txHistoryLineItems3);
           
            var $historyGrid = $("#historyGrid");
           
            $historyGrid.jqGrid({
                // Allow columns to be dragged
                sortable: false,
                data: txHistoryLineItems,
                datatype: 'local',
                colNames: ["ID", "Column 1", "Column 2", "Column 3", "Column 4", "Column 5"
                ],
                colModel: [
                    {name: "id", index: "id", hidden: true, frozen: true},
                    {name: "col1", index: "col1", frozen: true},
                    {name: "col2", index: "col2", sortable: false},
                    {name: "col3", index: "col3", draggable: false},
                    // Add a summary type property for grouping total
                    {name: "col4", index: "col4", resizable: false, summaryType:'sum', align: "right", formatter: "currency", formatoptions: {decimalPlaces: 2, prefix: '$'}},
                    {name: "col5", index: "col5"}
                ],
                grouping: true,
                groupingView : {
                    useColSpanStyle: true,
                    // Whether to show the grouping column
                    groupColumnShow : [false],
                    // Formatting for the group header {0} is the value, {1} is the count
                    groupText : ['<b>{0} ({1})</b>'],
                    groupCollapse : true,
                    // Whether to show the group summary
                    groupSummary : [true],
                    // Put summary total at header or footer area -- putting on header causes a problem.
                    // groupSummaryPos: ['footer'],
                    groupSummaryPos: ['header'],
                    // Allow summary total row to show on a grouping collapse.
                    showSummaryOnHide: true
                },
                // Add header titles to the column headers
                headertitles: true,
                // Allow multiple columns to be sorted by the user.
                multiSort: true,
                // Allow multiple rows to be selected.
                // multiselect: true,
                rowNum: 500,
                height: 375,
                width: 500,
                shrinkToFit: false
            });
           
            $historyGrid.jqGrid('setFrozenColumns');

            $("#chngroup").change(function(){
                var vl = $(this).val();
                if(vl) {
                    if(vl == "clear") {
                        $historyGrid.jqGrid('groupingRemove',true);
                    } else {
                        $historyGrid.jqGrid('groupingGroupBy',vl);
                    }
                }
            });
    });
}());