Bug in Show/Hide Columns

[TeeJT]

I refer to your demo at http://paramquery.com/pro/demos/showhide_columns.

I used the code below and I have a disabled column "OrderDate" which is visible.

If I remove "Product Name" column using the drop down select list - it removes both "Product Name" and "Order Date" columns which is not what I want - it should only remove "Product Name" column.
This is the same for other columns.

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: 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,
headerMenu:false,
            //merge: true,
//summaryEdit: true,
            //grandSummary: true,
        };
var gridName = "grid_showhide_columns";
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).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();
}
},
{
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, 10, 20, 30, 40, 50, 100] },
            scrollModel: { lastColumn: null },
            colModel: columns,
showTop : true,
showToolbar : true,
collapsible: false,
            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);
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%'
                });
/*
$(".columnSelector").change(function () {
$(".columnSelector").find("option[value='OrderDate']").prop('disabled', false);
console.log($(".columnSelector").find("option[value='OrderDate']").prop('disabled'));
var opts = [];
$( "select.columnSelector option:selected" ).each(function() {
//var val1 = $( this ).val();
opts.push($(this).val())
//$('[name=options]').val( val1 );
});
//$(".columnSelector").val(opts);
console.log(opts);
setTimeout(function(){
$(".columnSelector").val(opts);
//$(".columnSelector").find("option[value='OrderDate']").prop('disabled', true);
}, 500);

})
*/
            },
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 id='btnHeader'>Settings ▼</span>").prependTo("div.pq-slider-icon");
$('span#btnHeader').css( 'cursor', 'pointer' );
grid.refresh();
$("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);
},
            toolbar: toolbar,
            title: "Shipping Orders",
            resizable: true
        });

    });


[paramvir]

It's because $(".selector").val() doesn't include disabled options even if they are selected.

Please use the below to get array of selected options in select list.

Code: [Select]

var arr = $(evt.target).find("option:selected").map(function(){
return this.value;
}).get(),

instead of

Code: [Select]

    var arr = $(evt.target).val(),


[TeeJT]

Thank you very much! It's working beautifully now!

[TeeJT]

How do I hide the groupModel > icon ?
I don't want it to be displayed.

Okay my grid.refresh() was not placed at end of complete event.

Now it's OK.