Hiding and Showing Widgets at the top

[TeeJT]

Is there a way to show and hide the widgets at the top of the grid for ColumnSelector, Export Formats, Group Header? What I mean is that all these headers can be minimized to a small button and expanded only when needed.
Something like the collapse and expand of the accordion widget in jQuery - https://jqueryui.com/accordion/

[paramvir]

There is no inbuilt feature of grid to do that, it could be done by placing a button in the toolbar and animating the toolbar with jQuery slideDown API though.

[TeeJT]

I tried this using your example at http://paramquery.com/pro/demos/group_rows
I used the slideUp and slideDown jQuery method as you recommended however the Local Paging division at the bottom changes width. What I want is that that only the height of the main table should change when doing the slideUp and slideDown and not of other divisions.

Please replace the code of the example with this below:

Code: [Select]

$(function () {
        var columns = [
            { title: "Order ID", width: 100, dataIndx: "OrderID", hidden: true },
            { title: "Customer Name", width: 130, dataIndx: "CustomerName" },
            { title: "Product Name", width: 190, dataIndx: "ProductName" },
            { title: "Unit Price", width: 100, dataIndx: "UnitPrice", align: "right" },
            { title: "Quantity", width: 100, dataIndx: "Quantity", align: "right" },
    { title: "Order Date", width: 100, dataIndx: "OrderDate" },
    { title: "Required Date", width: 100, dataIndx: "RequiredDate", hidden: true },
    { title: "Shipped Date", width: 100, dataIndx: "ShippedDate", hidden: true },
            { title: "ShipCountry", width: 100, dataIndx: "ShipCountry"},
            { title: "Freight", width: 100, align: "right", dataIndx: "Freight" },
            { title: "Shipping Name", width: 120, dataIndx: "ShipName" },
            { title: "Shipping Address", width: 180, dataIndx: "ShipAddress", hidden: true },
            { title: "Shipping City", width: 100, dataIndx: "ShipCity" },
            { title: "Shipping Region", width: 110, dataIndx: "ShipRegion", hidden: true },
            { title: "Shipping Postal Code", width: 160, dataIndx: "ShipPostalCode", hidden: true }
];
        var dataModel = {
            location: "remote",           
            dataType: "JSON",
            method: "GET",
            url: "/Content/invoice.json"
        }
        var groupModel = {
            on: true,
            dataIndx: ['CustomerName'],
            collapsed: [false],
//header: false,
icon: false,
            //merge: true,
//summaryEdit: true,
            //grandSummary: true,
        };
var gridName = "grid_group_rows";
var gridDiv = "div#" + gridName;
        $(gridDiv).pqGrid({
            width: "100%",
            height: 500,
            dataModel: dataModel,
groupModel: groupModel,
numberCell: { show: false },
            pageModel: { type: 'local', rPP: 20, rPPOptions: [1, 10, 20, 30, 40, 50, 100] },
            scrollModel: { lastColumn: null },
            colModel: columns,
showToolbar : true,
collapsible: false,
complete: function( event, ui ) {

//$(gridDiv).pqGrid( "groupOption", {"header": true});
$("div.pq-toolbar").hide();
$("span.pq-group-icon").hide();
$("span.pq-group-toggle").hide();
$("div.pq-group-header").hide();
$("<span id='btnHeader'>▼</span>").prependTo("div.pq-slider-icon");
$('span#btnHeader').css( 'cursor', 'pointer' );
$("span#btnHeader").click(function () {
if ( $("div.pq-toolbar").is( ":hidden" ) ) {
//if ($(gridDiv).pqGrid( "groupOption", "header")) {
$("span#btnHeader").html("▲" );
$("div.pq-toolbar").slideDown( "slow" );
//$(gridDiv).pqGrid( "groupOption", {"header": false});
$("div.pq-group-header").slideDown( "slow" );
} else {
$("span#btnHeader").html("▼" );
$("div.pq-toolbar").slideUp("slow");
//$(gridDiv).pqGrid( "groupOption", {"header": true});
$("div.pq-group-header").slideUp( "slow" );
}
});
},
            create: function (evt, ui) {
                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);

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

                //convert it into pqSelect.
                $(".columnSelector").pqSelect({
                    checkbox: true,
                    multiplePlaceholder: 'Select visible columns',
                    maxDisplay: 100,
                    width: 'auto'
                });
            },
            toolbar: {
                items: [{
                    type: 'select',
                    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).val(),
                            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();
                    }
                }]
            },
            //numberCell: { resizable: true, width: 40, title: "#", minWidth: 25 },
            title: "Shipping Orders",
            resizable: true
        });

    });


[paramvir]

it can be done with grid.refresh() upon slideDown completion.

Code: [Select]

complete: function( event, ui ) {
var grid = this;
//$(gridDiv).pqGrid( "groupOption", {"header": true});
$("div.pq-toolbar").hide();
$("span.pq-group-icon").hide();
$("span.pq-group-toggle").hide();
$("div.pq-group-header").hide();
$("<span id='btnHeader'>▼</span>").prependTo("div.pq-slider-icon");
$('span#btnHeader').css( 'cursor', 'pointer' );
$("span#btnHeader").click(function () {

if ( $("div.pq-toolbar").is( ":hidden" ) ) {
//if ($(gridDiv).pqGrid( "groupOption", "header")) {
$("span#btnHeader").html("▲" );
$("div.pq-toolbar").slideDown( "slow" );
//$(gridDiv).pqGrid( "groupOption", {"header": false});
$("div.pq-group-header").slideDown( "slow", function(){
grid.refresh();
});
} else {
$("span#btnHeader").html("▼" );
$("div.pq-toolbar").slideUp("slow");
//$(gridDiv).pqGrid( "groupOption", {"header": true});
$("div.pq-group-header").slideUp( "slow", function(){
grid.refresh();
});
}
});
},


[TeeJT]

Using this demo - http://paramquery.com/pro/demos/export_local
I find that when I click the "Settings" button at the top of grid - the settings will be slide down and up as I toggle the "Settings" button.
However if I click the "Refresh" icon at the bottom of the grid, when I click the "Settings" button at the top of grid - the settings will just slide down and immediately slide up so I am unable to view the settings.
What I can I do?

Code: [Select]

$(function () {
        var columns = [
            { title: "Order ID", width: 100, dataIndx: "OrderID", hidden: true },
            { title: "Customer Name", width: 140, dataIndx: "CustomerName" },
            { title: "Product Name", width: 150, dataIndx: "ProductName" },
            { title: "Unit Price", width: 100, dataIndx: "UnitPrice", align: "right", summary: { type: "avg", edit: false }, },
            { title: "Quantity", width: 100, dataIndx: "Quantity", align: "right" },
    { title: "Order Date", width: 100, dataIndx: "OrderDate" },
    { title: "Required Date", width: 100, dataIndx: "RequiredDate", hidden: true },
    { title: "Shipped Date", width: 100, dataIndx: "ShippedDate", hidden: true },
            { title: "ShipCountry", width: 100, dataIndx: "ShipCountry"},
            { title: "Freight", width: 100, align: "right", dataIndx: "Freight" },
            { title: "Shipping Name", width: 120, dataIndx: "ShipName" },
            { title: "Shipping Address", width: 180, dataIndx: "ShipAddress", hidden: true },
            { title: "Shipping City", width: 100, dataIndx: "ShipCity" },
            { title: "Shipping Region", width: 110, dataIndx: "ShipRegion", hidden: true },
            { title: "Shipping Postal Code", width: 160, dataIndx: "ShipPostalCode", hidden: true }
];
        var dataModel = {
            location: "remote",           
            dataType: "JSON",
            method: "GET",
            url: "/Content/invoice.json"
        }
        var groupModel = {
            on: true,
            dataIndx: ['CustomerName'],
            collapsed: [false],
//header: false,
headerMenu:false,
showSummary: [true],
            //merge: true,
summaryEdit: false,
            //grandSummary: true,
        };
var gridName = "grid_export";
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();
}
},
{
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: 20, 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='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 ) {
var grid = this; //pq.grid(gridDiv);

$("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").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();
});
}
});
$(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();
},
            toolbar: toolbar,
            title: "Shipping Orders",
            resizable: true
        });

    });


[TeeJT]

Is there any reply to my question on 2 Dec ?
It only happens when I click the refresh icon below the grid.

[paramvir]

The issue is happening because complete event is fired again upon click of refresh button at bottom leading to multiple click event bindings on $("span#btnHeader").

Please use either

grid.one( "complete", function(){}); instead of complete event callback complete: function(){}.

or

$("span#btnHeader").one( "click", function () {}); instead of $("span#btnHeader").click(function () {});

[TeeJT]

I have done what you suggested in the weekend before your reply but it is still the same result.
Using this demo - http://paramquery.com/pro/demos/export_local

Code: [Select]

$(function () {
var gridName = "grid_export";

        var columns = [
            { title: "Order ID", width: 100, dataIndx: "OrderID", hidden: true },
            { title: "Customer Name", width: 140, dataIndx: "CustomerName" },
            { title: "Product Name", width: 150, dataIndx: "ProductName" },
            { title: "Unit Price", width: 100, dataIndx: "UnitPrice", align: "right",
summary: { type: "avg", edit: false }, },
            { title: "Quantity", width: 100, dataIndx: "Quantity", align: "right" },
    { title: "Order Date", width: 100, dataIndx: "OrderDate" },
    { title: "Required Date", width: 100, dataIndx: "RequiredDate", hidden: true },
    { title: "Shipped Date", width: 100, dataIndx: "ShippedDate", hidden: true },
            { title: "ShipCountry", width: 100, dataIndx: "ShipCountry"},
            { title: "Freight", width: 100, align: "right", dataIndx: "Freight",
summary: { type: "max", edit: false }, },
            { title: "Shipping Name", width: 120, dataIndx: "ShipName" },
            { title: "Shipping Address", width: 180, dataIndx: "ShipAddress", hidden: true },
            { title: "Shipping City", width: 100, dataIndx: "ShipCity" },
            { title: "Shipping Region", width: 110, dataIndx: "ShipRegion", hidden: true },
            { title: "Shipping Postal Code", width: 160, dataIndx: "ShipPostalCode", hidden: true }
];
        var dataModel = {
            location: "remote",           
            dataType: "JSON",
            method: "GET",
            url: "/Content/invoice.json"
        }
        var groupModel = {
            on: true,
            dataIndx: ['CustomerName'],
            collapsed: [false],
//header: false,
headerMenu:false,
showSummary: [true],
            //merge: true,
summaryEdit: false,
            //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();
}
},
{
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: 20, 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='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 ) {
var 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();
},
            toolbar: toolbar,
            title: "Shipping Orders",
            resizable: true
        });

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

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



[paramvir]

Please use grid.one( "complete", function(){}); instead of grid.on( ... )

to prevent multiple click event bindings on $("span#btnHeader").

http://paramquery.com/pro/api#method-one

[TeeJT]

Thanks! Sorry I thought it was a typing error. I thought you meant .on method.