ParamQuery grid support forum
General Category => Help for ParamQuery Pro => Topic started by: queensgambit9 on October 12, 2017, 03:29:35 pm
-
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.
-
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.
-
How can I check if the user selected from visible to hidden state for a column?
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;
})
-
val() or $select.find("option:selected") of a select list provides all selected options at a given time.
//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
-
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?
-
Please use the following souce in this demo: https://paramquery.com/pro/demos/showhide_columns
$(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.
$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;
}
})());
-
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.
-
Sorry the question is not clear enough.
Could you please share more details and jsfiddle of the issue faced by you.
-
Almost solved. Question though why column isn't hidden after:
$( "select.columnSelector" ).val(oldVal).pqSelect( "refreshData" );
columnSelector is updated but I have to do also:
column.hidden = false;
grid.refresh();
to get the grid updated...
Do I need to refresh something else to get grid updated directly?
-
Whenever value is set via jquery i.e., val(value), change event doesn't fire automatically, it has to be triggered manually.
So
$( "select.columnSelector" ).val(oldVal).trigger( 'change' ).pqSelect( "refreshData" );
-
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.
//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;
}
})());