Author Topic: Prevent Group Item default action of collapsing and expanding  (Read 396 times)

TeeJT

  • Pro Ultimate
  • Jr. Member
  • *
  • Posts: 57
    • View Profile
Prevent Group Item default action of collapsing and expanding
« on: December 07, 2016, 01:13:07 pm »
Is it possible to prevent Group Item button from having the toggle action of expanding and collapsing the group?
I need this because I am creating reports and there is no reason to collapse the grouping.

paramquery

  • Administrator
  • Hero Member
  • *****
  • Posts: 2354
    • View Profile
Re: Prevent Group Item default action of collapsing and expanding
« Reply #1 on: December 07, 2016, 02:47:20 pm »
group title buttons can be removed by implementing custom column.render callback.

Code: [Select]
render: function(ui){
var rd = ui.rowData;
if(rd.pq_gtitle){
return ui.cellData + " ("+rd.pq_items+")";
}
},

TeeJT

  • Pro Ultimate
  • Jr. Member
  • *
  • Posts: 57
    • View Profile
Re: Prevent Group Item default action of collapsing and expanding
« Reply #2 on: December 08, 2016, 08:54:20 am »
What you suggested changes the cell display for the column.

I have to explain myself with an example using this demo - http://paramquery.com/pro/demos/export_local
and the code given below. When I click the Settings on the top right, the settings with the Grouping row is revealed as shown in picture attached. When I click on "Customer Name" in Grouping row, it causes the group to expand and collapse. I wish to disable this function.

Code: [Select]
$(function () {
var gridName = "grid_export";
var grid;
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) );
        }
        var columns = [
            { title: "Order ID", width: 100, dataIndx: "OrderID", dataType: "string", hidden: true },
            { title: "Customer Name", width: 140, dataIndx: "CustomerName", dataType: "string", hidden: true},
            { title: "Product Name", width: 150, dataType: "string", dataIndx: "ProductName"},
            { title: "Unit Price", width: 120, dataIndx: "UnitPrice", dataType: "float", format: '$##,###.00', align: "right",
summary: {
                    edit: false,
                    type: "allNum" //use custom aggregate.
}
            },
            { title: "Qty", width: 50, dataIndx: "Quantity", dataType: "float", align: "right" },
    { title: "Order Date", width: 100, dataIndx: "OrderDate", dataType: "date", format: "dd-M-yy" },
    { title: "Required Date", width: 100, dataIndx: "RequiredDate", dataType: "date", format: "dd-M-yy", hidden: true },
    { title: "Shipped Date", width: 100, dataIndx: "ShippedDate", dataType: "date", format: "dd-M-yy", hidden: true },
            { title: "ShipCountry", width: 100, dataIndx: "ShipCountry", dataType: "string"},
            { title: "Freight", width: 100, align: "right", dataIndx: "Freight", dataType: "float",
summary: { type: "max", edit: true }, },
            { title: "Shipping Name", width: 120, dataIndx: "ShipName", dataType: "string" },
            { title: "Shipping Address", width: 180, dataIndx: "ShipAddress", dataType: "string", hidden: true },
            { title: "Shipping City", width: 100, dataIndx: "ShipCity", dataType: "string" },
            { title: "Shipping Region", width: 110, dataIndx: "ShipRegion", dataType: "string", hidden: true },
            { title: "Shipping Postal Code", width: 160, dataIndx: "ShipPostalCode", dataType: "string", hidden: true }
];
        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 gridDiv = "div#" + gridName;
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.
                $(".columnSelector").val(opts);
console.log(opts);

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

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

            },
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();
},
/*
group: function( event, ui ) {
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' );

// this section is for testing to disable grouping action in group item
$("div#pq-group-item").off("click");
$(gridDiv).pqGrid({
group: function( event, ui ) {
}
});
// end testing section

$("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();
});
}
});


});
    });
« Last Edit: December 08, 2016, 10:29:12 am by TeeJT »

paramquery

  • Administrator
  • Hero Member
  • *****
  • Posts: 2354
    • View Profile
Re: Prevent Group Item default action of collapsing and expanding
« Reply #3 on: December 08, 2016, 10:34:08 am »
Please set groupModel.header = false which removes the grouping toolbar.

http://paramquery.com/pro/api#option-GM-header

TeeJT

  • Pro Ultimate
  • Jr. Member
  • *
  • Posts: 57
    • View Profile
Re: Prevent Group Item default action of collapsing and expanding
« Reply #4 on: December 08, 2016, 10:54:56 am »
I want the grouping toolbar and I want the user to select columns for grouping but I don't want the action associated with the Group Item buttons.
I want to prevent Group Item button default action of collapsing and expanding

paramquery

  • Administrator
  • Hero Member
  • *****
  • Posts: 2354
    • View Profile
Re: Prevent Group Item default action of collapsing and expanding
« Reply #5 on: December 09, 2016, 12:25:18 am »
Sorry I don't see any option to disable that action. I've added this to enhancement request.

TeeJT

  • Pro Ultimate
  • Jr. Member
  • *
  • Posts: 57
    • View Profile
Re: Prevent Group Item default action of collapsing and expanding
« Reply #6 on: December 09, 2016, 07:09:04 am »
Thank you very much! When will the enhancement be done? I have to deliver in one month's time but meanwhile I will try a workaround.

My workaround is using:

Code: [Select]
$("div.pq-group-item").click(function(event){
event.stopPropagation();
});

So this is my solution at the moment. 
I use your demo - http://paramquery.com/pro/demos/export_local

Code: [Select]
$(function () {
var gridName = "grid_export";
var grid;
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) );
        }
        var columns = [
            { title: "Order ID", width: 100, dataIndx: "OrderID", dataType: "string", hidden: true },
            { title: "Customer Name", width: 140, dataIndx: "CustomerName", dataType: "string", hidden: true},
            { title: "Product Name", width: 150, dataType: "string", dataIndx: "ProductName"},
            { title: "Unit Price", width: 120, dataIndx: "UnitPrice", dataType: "float", format: '$##,###.00', align: "right",
summary: {
                    edit: false,
                    type: "allNum" //use custom aggregate.
}
            },
            { title: "Qty", width: 50, dataIndx: "Quantity", dataType: "float", align: "right" },
    { title: "Order Date", width: 100, dataIndx: "OrderDate", dataType: "date", format: "dd-M-yy" },
    { title: "Required Date", width: 100, dataIndx: "RequiredDate", dataType: "date", format: "dd-M-yy", hidden: true },
    { title: "Shipped Date", width: 100, dataIndx: "ShippedDate", dataType: "date", format: "dd-M-yy", hidden: true },
            { title: "ShipCountry", width: 100, dataIndx: "ShipCountry", dataType: "string"},
            { title: "Freight", width: 100, align: "right", dataIndx: "Freight", dataType: "float",
summary: { type: "max", edit: true }, },
            { title: "Shipping Name", width: 120, dataIndx: "ShipName", dataType: "string" },
            { title: "Shipping Address", width: 180, dataIndx: "ShipAddress", dataType: "string", hidden: true },
            { title: "Shipping City", width: 100, dataIndx: "ShipCity", dataType: "string" },
            { title: "Shipping Region", width: 110, dataIndx: "ShipRegion", dataType: "string", hidden: true },
            { title: "Shipping Postal Code", width: 160, dataIndx: "ShipPostalCode", dataType: "string", hidden: true }
];
        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 gridDiv = "div#" + gridName;
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.
                $(".columnSelector").val(opts);
console.log(opts);

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

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

            },
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();
},
/*
group: function( event, ui ) {
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);
$("div.pq-group-item").click(function(event){
event.stopPropagation();
});
grid.refresh();

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

// this section is for testing to disable grouping action in group item
$("div#pq-group-item").off("click");
$(gridDiv).pqGrid({
group: function( event, ui ) {
}
});
// end testing section

$("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();
});
}
});


});
    });
« Last Edit: December 09, 2016, 07:37:26 am by TeeJT »

TeeJT

  • Pro Ultimate
  • Jr. Member
  • *
  • Posts: 57
    • View Profile
Re: Prevent Group Item default action of collapsing and expanding
« Reply #7 on: December 09, 2016, 09:46:28 am »

My workaround given has problem so I refined it using:

Code: [Select]
refreshHeader: function( event, ui ) {
$("div.pq-group-item").click(function(event){
if (event.target.className != "pq-group-remove ui-icon ui-icon-close") {
event.stopImmediatePropagation();
}
});
}


So this is my solution at the moment. 
I use your demo - http://paramquery.com/pro/demos/export_local

Code: [Select]
$(function () {
var gridName = "grid_export";
var grid;
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) );
        }
        var columns = [
            { title: "Order ID", width: 100, dataIndx: "OrderID", dataType: "string", hidden: true },
            { title: "Customer Name", width: 140, dataIndx: "CustomerName", dataType: "string", hidden: true},
            { title: "Product Name", width: 150, dataType: "string", dataIndx: "ProductName"},
            { title: "Unit Price", width: 120, dataIndx: "UnitPrice", dataType: "float", format: '$##,###.00', align: "right",
summary: {
                    edit: false,
                    type: "allNum" //use custom aggregate.
}
            },
            { title: "Qty", width: 50, dataIndx: "Quantity", dataType: "float", align: "right" },
    { title: "Order Date", width: 100, dataIndx: "OrderDate", dataType: "date", format: "dd-M-yy" },
    { title: "Required Date", width: 100, dataIndx: "RequiredDate", dataType: "date", format: "dd-M-yy", hidden: true },
    { title: "Shipped Date", width: 100, dataIndx: "ShippedDate", dataType: "date", format: "dd-M-yy", hidden: true },
            { title: "ShipCountry", width: 100, dataIndx: "ShipCountry", dataType: "string"},
            { title: "Freight", width: 100, align: "right", dataIndx: "Freight", dataType: "float",
summary: { type: "max", edit: true }, },
            { title: "Shipping Name", width: 120, dataIndx: "ShipName", dataType: "string" },
            { title: "Shipping Address", width: 180, dataIndx: "ShipAddress", dataType: "string", hidden: true },
            { title: "Shipping City", width: 100, dataIndx: "ShipCity", dataType: "string" },
            { title: "Shipping Region", width: 110, dataIndx: "ShipRegion", dataType: "string", hidden: true },
            { title: "Shipping Postal Code", width: 160, dataIndx: "ShipPostalCode", dataType: "string", hidden: true }
];
        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 gridDiv = "div#" + gridName;
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.
                $(".columnSelector").val(opts);
console.log(opts);

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

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

            },
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();
},
refreshHeader: function( event, ui ) {
$("div.pq-group-item").click(function(event){
if (event.target.className != "pq-group-remove ui-icon ui-icon-close") {
event.stopImmediatePropagation();
}
});
},

            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);
$("div.pq-group-item").click(function(event){
event.stopPropagation();
});
grid.refresh();

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

// this section is for testing to disable grouping action in group item
$("div#pq-group-item").off("click");
$(gridDiv).pqGrid({
group: function( event, ui ) {
}
});
// end testing section

$("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();
});
}
});


});
    });

paramquery

  • Administrator
  • Hero Member
  • *****
  • Posts: 2354
    • View Profile
Re: Prevent Group Item default action of collapsing and expanding
« Reply #8 on: January 06, 2017, 06:57:28 pm »
Thanks for your suggestion.

beforeGroupExpand event has been added in the upcoming version which can prevent collapse or expand of nodes when return false inside the event.