Is there event to indicate change in grouping ?

[TeeJT]

Is there event to indicate change in grouping ?
When the user adds or removes or changes the order of the grouping, is there an event for this?

[TeeJT]

What I needed to do was like this:
a) When the column was selected for grouping, that column is hidden.
b) When the column was removed for grouping, that column is shown.

Since there is no event for grouping that I know - I had to use the JavaScript setTimeout function which is not elegant at all. But it's a workaround until this event is available for me.

I use you demo at http://paramquery.com/pro/demos/export_local

For the Javascript:

Code: [Select]

$(function () {
var gridName = "grid_export";
var gridDiv = "div#" + gridName;
var grid;
var ColSelectorVals = [];
var GrpSelectorVals = [];
var agg = pq.aggregate,
            format = function(val){
                return pq.formatNumber(val, "$##.00");
            }

        //define custom aggregate "all" and now it can be used in any column.
        agg.allNum = function(arr, col){
            return "Avg: " + format( agg.avg(arr, col) )
                +"<BR>Max: " + format( agg.max(arr, col) )
                +"<BR>Min: " + format( agg.min(arr, col) );
        }
function hideGrpCols() {
// Hide column with grouping
// get colIdx
var colM = grid.getColModel();
var ColSelectList = $("select.columnSelector").val();
var gModel = $(gridDiv).pqGrid( "option", "groupModel" );
GrpSelectorVals = [];
for (var i=0; i<gModel.dataIndx.length; i++) {
var grpIdx = gModel.dataIndx[i];
GrpSelectorVals.push(grpIdx);
var grpColIdx = ColSelectList.indexOf(grpIdx);
var colIndx = grid.getColIndx( {dataIndx: grpIdx });
if (grpColIdx != -1) {
// hide grouped column
colM[colIndx].hidden = true;
ColSelectList.splice(grpColIdx,1);
}
}
$( "select.columnSelector" ).val(ColSelectList);
$( "select.columnSelector" ).pqSelect( "refreshData" );

//refresh colModel after show/hide columns for grouped columns.
$(gridDiv).pqGrid( "option", "colModel", colM );
grid.refreshView();
}
var myRender = function(ui){
var rd = ui.rowData;
var gModel = $(gridDiv).pqGrid( "option", "groupModel" );
var gpIdx = -1;
// Fing gpIdx - the Idx of this current row
for (var i=0; i<gModel.dataIndx.length; i++) {
if (ui.dataIndx == gModel.dataIndx[i]) {
gpIdx = i;
break;
}
}

if (rd.pq_gtitle) {
// Add spacing in front of sub group title header
var plural = (rd.pq_items > 1) ? 's' : '';
var gpSpacer = " &nbsp; &nbsp; &nbsp; ";
var preText = "";
for (var i = 0; i < gpIdx; i++) {
preText += gpSpacer;
}

//console.log("dataIndx=" + ui.dataIndx + ", gpIdx=" + gpIdx + ", rd.pq_gtitle=" + rd.pq_gtitle + ", preText=" + preText + ", uicellData=" + ui.cellData + ", rd.pq_items=" + rd.pq_items);
return preText + ui.cellData + " (" + rd.pq_items + " item" + plural + ")";
}
// for normal rows
/*
if (!rd.pq_gsummary && !rd.pq_gtitle){
return rd.Quantity + " " + ui.cellData;
}
*/
}
        var columns = [
            { title: "Order ID", width: 100, dataIndx: "OrderID", dataType: "string", hidden: true },
            { title: "Customer Name", width: 140, dataIndx: "CustomerName", dataType: "string", hidden: true,
render: function(ui){
return myRender(ui);
},
},
            { title: "Product Name", width: 150, dataType: "string", dataIndx: "ProductName", hidden: false,
render: function(ui){
return myRender(ui);
},
},
            { title: "Unit Price", width: 120, dataIndx: "UnitPrice", dataType: "float",
format: '$##,###.00', align: "right", hidden: false,
render: function(ui){
return myRender(ui);
},
summary: {
                    edit: false,
                    type: "allNum" //use custom aggregate.
}
            },
            { title: "Qty", width: 50, dataIndx: "Quantity", dataType: "float", align: "right", hidden: false,
render: function(ui){
return myRender(ui);
},
},
    { title: "Order Date", width: 100, dataIndx: "OrderDate", dataType: "date", format: "dd-M-yy", hidden: false,
render: function(ui){
return myRender(ui);
},
},
    { title: "Required Date", width: 100, dataIndx: "RequiredDate", dataType: "date", format: "dd-M-yy", hidden: true,
render: function(ui){
return myRender(ui);
},
},
    { title: "Shipped Date", width: 100, dataIndx: "ShippedDate", dataType: "date", format: "dd-M-yy", hidden: true,
render: function(ui){
return myRender(ui);
},
},
            { title: "ShipCountry", width: 100, dataIndx: "ShipCountry", dataType: "string", hidden: false,
render: function(ui){
return myRender(ui);
},
},
            { title: "Freight", width: 100, align: "right", dataIndx: "Freight", dataType: "float", hidden: false,
summary: { type: "max", edit: true },
render: function(ui){
return myRender(ui);
},
},
            { title: "Shipping Name", width: 120, dataIndx: "ShipName", dataType: "string", hidden: false,
render: function(ui){
return myRender(ui);
},
},
            { title: "Shipping Address", width: 180, dataIndx: "ShipAddress", dataType: "string", hidden: true,
render: function(ui){
return myRender(ui);
},
},
            { title: "Shipping City", width: 100, dataIndx: "ShipCity", dataType: "string", hidden: false,
render: function(ui){
return myRender(ui);
},
},
            { title: "Shipping Region", width: 110, dataIndx: "ShipRegion", dataType: "string", hidden: true,
render: function(ui){
return myRender(ui);
},
},
            { title: "Shipping Postal Code", width: 160, dataIndx: "ShipPostalCode", dataType: "string", hidden: true,
render: function(ui){
return myRender(ui);
},
}
];
        var dataModel = {
            location: "remote",           
            dataType: "JSON",
            method: "GET",
            url: "/Content/invoice.json"
        }
        var groupModel = {
            on: true,
            dataIndx: ['CustomerName'],
            collapsed: [false],
header: true,
headerMenu:false,
showSummary: [true],
            //merge: true,
summaryEdit: true,
            //grandSummary: true,
        };
var toolbar = {
items: [
{ type: '<span>Select columns:</span>'
},
{
type: 'select',
//label: 'Select visible columns:',
cls: 'columnSelector',
attr: "multiple='multiple'", style: "height:60px;",
options: function (ui) {
var CM = this.getColModel(),
opts = [];
for (var i = 0; i < CM.length; i++) {
var obj = {},
column = CM[i];

obj[ column.dataIndx ] = column.title;
opts.push(obj);
}
return opts;
},
listener: function (evt) {
var arr = $(evt.target).find("option:selected").map(function(){
return this.value;
}).get(),
CM = this.getColModel();

for (var i = 0; i < CM.length; i++) {
var column = CM[i],
dataIndx = column.dataIndx;

//hide the column if not a selected option.
column.hidden = ($.inArray(dataIndx, arr) == -1);
}
this.option("colModel", this.option("colModel")); //refresh the colModel.
this.refresh();
grid.refreshView();
}
},
{
type: '<BR>',
},

{
type: 'select',
label: 'Format: ',               
attr: 'id="export_format"',
options: [{ xlsx: 'Excel', csv: 'Csv', htm: 'Html', json: 'Json'}]
},
{
type: 'button',
label: "Export",
icon: 'ui-icon-arrowthickstop-1-s',
listener: function () {

var format = $("#export_format").val(),                           
blob = this.exportData({
//url: "/pro/demos/exportData",
format: format,                               
render: true
});
if(typeof blob === "string"){                           
blob = new Blob([blob]);
}
saveAs(blob, "pqGrid."+ format );
}
},
{ type: '<span>| Groupings (drag to area below):</span>'
}

]
};

        $(gridDiv).pqGrid({
            width: "100%",
            height: 500,
            dataModel: dataModel,
groupModel: groupModel,
numberCell: { show: false },
            pageModel: { type: 'local', rPP: 10, rPPOptions: [1, 5, 10, 15, 20] },
            scrollModel: { lastColumn: null },
            colModel: columns,
showTop : true,
showToolbar : true,
collapsible: false,
stripeRows: false,
            create: function (evt, ui) {
$("<span id='btnHeaderSpacer'>&nbsp; &nbsp;</span>").prependTo("div.pq-slider-icon");
$("<span id='btnHeader'>Settings ▼</span>").prependTo("div.pq-slider-icon");
                var CM = this.getColModel(),
                    opts = [];
                for (var i = 0; i < CM.length; i++) {
                    var column = CM[i];
                    if (column.hidden !== true) {
                        opts.push(column.dataIndx);
                    }
                }
                //initialize the selected options in toolbar select list.
                $("select.columnSelector").val(opts);
ColSelectorVals = opts.slice(0);

                //disable OrderDate column.
                $("select.columnSelector").find("option[value='OrderDate']").prop('disabled', true);

                //convert it into pqSelect.
                $("select.columnSelector").pqSelect({
                    checkbox: true,
                    multiplePlaceholder: 'Select visible columns',
                    maxDisplay: 0,
label: 'Select',
                    width: '80%'
                });

$("select.columnSelector").on("change", function(evt){
//ColSelectorVals = $("select.columnSelector").val();
});

            },
complete: function( event, ui ) {
grid = this; //pq.grid(gridDiv);
$("div.pq-group-item").click(function(event){
if (event.target.className != "pq-group-remove ui-icon ui-icon-close") {
event.stopImmediatePropagation();
}
});

$("div.pq-group-header").on("drop", function(event){
setTimeout(function(){
hideGrpCols();
}, 30);
});

$(gridDiv).pqGrid({
refreshHeader: function( event, ui ) {

$("span.pq-group-remove").on("click", function(event){
setTimeout(function(){
var grpIdx = event.target.closest("div.pq-group-item").attributes["data-indx"].nodeValue;
var colM = grid.getColModel();
var ColSelectList = $("select.columnSelector").val();
var colIndx = grid.getColIndx( {dataIndx: grpIdx });
if (colIndx != -1) {
// unhide column that is not grouped
colM[colIndx].hidden = false;
ColSelectList.push(grpIdx);
}
$( "select.columnSelector" ).val(ColSelectList);
$( "select.columnSelector" ).pqSelect( "refreshData" );

//refresh colModel after show/hide columns for grouped columns.
$(gridDiv).pqGrid( "option", "colModel", colM );
grid.refreshView();
}, 30);
});
},
refresh: function( event, ui ) {
$("span.pq-group-icon").hide();
$("span.pq-group-toggle").hide();
}
});
grid.refresh();
},


            toolbar: toolbar,
            title: "Shipping Orders",
            resizable: true
        });

pq.grid(gridDiv).one("complete", function( event, ui ) {
grid = this; //pq.grid(gridDiv);

$(gridDiv).pqGrid({
refresh: function( event, ui ) {
$("span.pq-group-icon").hide();
$("span.pq-group-toggle").hide();
}
});
$("pq-select-button").pqSelect( "option", "width", 800);
grid.refresh();
var state = grid.saveState();
//console.log("State1: " + state);
//console.log("colModel: " + JSON.stringify(grid.colModel));
var state = '{"colModel":[{"width":140,"dataIndx":"CustomerName","hidden":true},{"width":100,"dataIndx":"OrderID","hidden":true},{"width":150,"dataIndx":"ProductName"},{"width":120,"dataIndx":"UnitPrice"},{"width":50,"dataIndx":"Quantity"},{"width":100,"dataIndx":"OrderDate"},{"width":100,"dataIndx":"RequiredDate","hidden":true},{"width":100,"dataIndx":"ShippedDate","hidden":true},{"width":100,"dataIndx":"ShipCountry"},{"width":100,"dataIndx":"Freight"},{"width":120,"dataIndx":"ShipName"},{"width":180,"dataIndx":"ShipAddress","hidden":true},{"width":100,"dataIndx":"ShipCity"},{"width":110,"dataIndx":"ShipRegion","hidden":true},{"width":160,"dataIndx":"ShipPostalCode","hidden":true}],"height":500,"datestamp":1480994627455,"width":"100%","groupModel":{"dataIndx":["CustomerName"],"dir":["up"],"collapsed":[false]},"pageModel":{"rPP":20,"curPage":1},"sortModel":{"sorter":[]},"freezeRows":0,"freezeCols":0}';
//grid.loadState({state})


$("div.pq-toolbar").hide();
$("div.pq-group-header").hide();
$("span.pq-group-icon").hide();
$("span.pq-group-toggle").hide();
$('span#btnHeader').css( 'cursor', 'pointer' );


$("span#btnHeader").on("click", function () {
if ( $("div.pq-toolbar").is( ":hidden" ) ) {
$("span#btnHeader").html("Settings ▲" );
$("div.pq-toolbar").slideDown( "fast");
$("div.pq-group-header").slideDown( "fast", function(){
grid.refresh();
});
} else {
$("span#btnHeader").html("Settings ▼" );
$("div.pq-toolbar").slideUp("fast");
$("div.pq-group-header").slideUp( "fast", function(){
grid.refresh();
});
}
});


});
    });

The HTML is:

Code: [Select]


    <div id="grid_export" style="margin: auto;">
    </div>
<style>
.pq-toolbar, .pq-group-header {
background: #FFFFCC;
}
.pq-group-item {
background: #EAF6FF;
}
.pq-merge-inner {
background: #FFDDCC;
text-align: left !important;
}
.pq-summary-row {
background: #DDFFCC;
}
pq-group-icon {
display: none;
}
.pq-grid{
font-size:9pt;
}
</style>



[paramvir]

sort event can be used since it's fired whenever there is change in grouping.

groupModel.dataIndx and groupModel.dir can be checked for any grouping changes inside the sort event.

[paramvir]

groupChange event has been added in v3.3.5

http://paramquery.com/pro/api#event-groupChange