Filter indicator

[queensgambit9]

Is there any built in functionality to indicate a filter is applied to grid?
If not, what would be a good approach for it?

Ex: User hides a column with a filter applied and then forgets there is a filter applied on a column that is no longer visible.

[paramvir]

When dataModel.dataUF.length > 0, it indicates the grid data is filtered, one or more columns are filtered.

When column.filter.value has defined value, it indicates that particular column is filtered.

[queensgambit9]

How can I check if the user selected from visible to hidden state for a column?

Code: [Select]

listener: function(evt) {
        var grid = this;
        grid.getColModel().forEach(function(column) {
       
       // if user selected from visible to hidden and filter was set, execute filter indicator...

        column.hidden = true;
        })


[paramvir]

val() or $select.find("option:selected") of a select list provides all selected options at a given time.

Code: [Select]

                            //show columns corresponding to selected options in select list.    
    $(evt.target).find("option:selected").each(function(){
    grid.getColumn({dataIndx: this.value}).hidden = false;
    })                           

change between previous selected options and current selected options can be found by calculating difference between old and new set of selected options

https://paramquery.com/forum/index.php?topic=2168.0

[queensgambit9]

Hmm...not sure I understand. What I want to do is:

If a column is changed from visible to hidden in columnSelector with a filter set -> Notify user

How do I execute only for column that was unselected in columnSelector?

[paramvir]

Please use the following souce in this demo: https://paramquery.com/pro/demos/showhide_columns

Code: [Select]


    $(function () {
        var columns = [
            { title: "Order ID", width: 100, dataIndx: "OrderID", hidden: true },
            { title: "Customer Name", width: 130, dataIndx: "CustomerName",
filter: { type: 'textbox', condition: 'begin', listener: 'keyup' }
},
            { 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"
        }

        $("#grid_showhide_columns").pqGrid({
            width: "100%",
            height: 500,
            dataModel: dataModel,
            pageModel: { type: 'local', rPP: 20, rPPOptions: [1, 10, 20, 30, 40, 50, 100] },
filterModel: {on: true, header: true},
            scrollModel: { lastColumn: null },
            colModel: columns,
            create: function (evt, ui) {
                var $sel = $(".columnSelector"),
grid = this,
                    opts = [];
                this.getColModel().forEach(function(column){                 
                    if (column.hidden !== true) {
                        opts.push(column.dataIndx);
                    }
                })
                //initialize the selected options corresponding to visible columns in toolbar select list.
                $sel.val(opts);

                //let's disable ShipCountry column.
                $sel.find("option[value='ShipCountry']").prop('disabled', true);

                //convert it into pqSelect.
                $sel.pqSelect({
                    checkbox: true,
                    multiplePlaceholder: 'Select visible columns',
                    maxDisplay: 100,
                    width: 'auto'
                })
.on('change', (function(){
//debugger;
//save initial value.
var oldVal = $sel.val() || [];
return function( evt ){
var newVal = $(this).val() || [],
diff, state;
//console.log(oldVal);
//console.log(newVal);
if(oldVal.length > newVal.length){
state = "unchecked";
diff = $(oldVal).not(newVal).get();
}
else{
state = "checked";
diff = $(newVal).not(oldVal).get();
}
diff.forEach(function(di){
var column = grid.getColumn({dataIndx: di }),
filter = column.filter;

column.hidden = (state == 'unchecked');

if( filter && filter.on && filter.value != undefined ){//TODO: add other condition values like [] for range.
alert(di);
}
})
grid.refreshCM()
grid.refresh()

console.log("diff: ", diff, " state: ", state);
oldVal = newVal;
}
})());
            },
            toolbar: {
                items: [{
                    type: 'select',
                    cls: 'columnSelector',
                    attr: "multiple='multiple'", style: "height:60px;",
                    options: function (ui) {
                        //options in the select list correspond to all columns.
                        return this.getColModel().map(function(column){
var obj = {};
                            obj[ column.dataIndx ] = column.title;
                            return obj;
});
                    }                   
                }]
            },
            numberCell: { resizable: true, width: 40, title: "#", minWidth: 25 },
            title: "Shipping Orders",
            resizable: true
        });
    });

jQuery API method .not() is used to get difference between new and old selected options.

Code: [Select]

$sel.pqSelect({
                    checkbox: true,
                    multiplePlaceholder: 'Select visible columns',
                    maxDisplay: 100,
                    width: 'auto'
                })
.on('change', (function(){
//debugger;
//save initial value.
var oldVal = $sel.val() || [];
return function( evt ){
var newVal = $(this).val() || [],
diff, state;
//console.log(oldVal);
//console.log(newVal);
if(oldVal.length > newVal.length){
state = "unchecked";
diff = $(oldVal).not(newVal).get();
}
else{
state = "checked";
diff = $(newVal).not(oldVal).get();
}
diff.forEach(function(di){
var column = grid.getColumn({dataIndx: di }),
filter = column.filter;

column.hidden = (state == 'unchecked');

if( filter && filter.on && filter.value != undefined ){//TODO: add other condition values like [] for range.
alert(di);
}
})
grid.refreshCM()
grid.refresh()

console.log("diff: ", diff, " state: ", state);
oldVal = newVal;
}
})());


[queensgambit9]

Thanks, seems to work fine.
I would like to control what happens depending on user interaction.

Ex, when user choose to continue -> hide column and clear filter value.
When user choose cancel -> Do nothing

Having an issue with setting the checkbox on column selector (checked, unchecked)...

Thanks in advance.

[paramvir]

Sorry the question is not clear enough.

Could you please share more details and jsfiddle of the issue faced by you.

[queensgambit9]

Almost solved. Question though why column isn't hidden after:

Code: [Select]

$( "select.columnSelector" ).val(oldVal).pqSelect( "refreshData" );
columnSelector is updated but I have to do also:

Code: [Select]

column.hidden = false;
grid.refresh();
to get the grid updated...

Do I need to refresh something else to get grid updated directly?

[paramvir]

Whenever value is set via jquery i.e., val(value), change event doesn't fire automatically, it has to be triggered manually.

So

Code: [Select]

$( "select.columnSelector" ).val(oldVal).trigger( 'change' ).pqSelect( "refreshData" );


[paramvir]

Previous code may not work properly if set val() via code.

Please use this corrected code for pqSelect change event, corrections made for iterations over newVal and oldVal.

Code: [Select]

                //convert it into pqSelect.
                $sel.pqSelect({
                    checkbox: true,
                    multiplePlaceholder: 'Select visible columns',
                    maxDisplay: 100,
                    width: 'auto'
                })
.on('change', (function(){
               
//save initial value.
var oldVal = $sel.val() || [];

return function( evt ){
var newVal = $(this).val() || [],
diff, state;

//previously checked but unchecked now.
$(oldVal).not(newVal).get().forEach(function(di){
var column = grid.getColumn({dataIndx: di }),
filter = column.filter;

column.hidden = true;

if( filter && filter.on && filter.value != undefined ){//TODO: add other condition values like [] for range.
alert(di);
}
})

//previously unchecked but checked now.
$(newVal).not(oldVal).get().forEach(function(di){
grid.getColumn({dataIndx: di }).hidden = false;
})

                        grid.refreshCM();
grid.refresh();

console.log("diff: ", diff, " state: ", state);
oldVal = newVal;
}
})());