Hi folks,
I have been trying to get the show/hide columns feature to work like shown in the demo, but I am having trouble. I am getting this.getColModel() is not valid. I tried changing that to colModel, but it says that is undefined. When I change it to "columns" it shows a multi-select with the columns listed, but not in the checkbox style shown in the demo, and you can't do anything with the items in the list. Below is the code, thanks for any help:
<!DOCTYPE html>
<html>
<head>
<!--jQuery dependencies-->
<link rel="stylesheet" href="
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
<script src="
http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<!--ParamQuery Grid css files-->
<link rel="stylesheet" href="../grid/pqgrid.min.css" />
<link rel="stylesheet" href="../grid/pqSelect/pqselect.min.css" />
<!--add pqgrid.ui.css for jQueryUI theme support-->
<link rel="stylesheet" href="../grid/pqgrid.ui.min.css" />
<!--ParamQuery Grid Office theme (optional)-->
<link rel="stylesheet" href="../grid/themes/Office/pqgrid.css" />
<!--ParamQuery Grid js files-->
<script type="text/javascript" src="../grid/pqgrid.min.js" ></script>
<script type="text/javascript" src="../grid/pqSelect/pqselect.min.js" ></script>
<style>
.pq-grid {
font-size: 12px;
}
</style>
<script>
$(function () {
function pqDatePicker(ui) {
var $this = $(this);
$this
//.css({ zIndex: 3, position: "relative" })
.datepicker({
yearRange: "-20:+0", //20 years prior to present.
changeYear: true,
changeMonth: true,
showButtonPanel: true,
onClose: function (evt, ui) {
$(this).focus();
}
});
//default From date
$this.filter(".pq-from").datepicker("option", "defaultDate", new Date("01/01/1996"));
//default To date
$this.filter(".pq-to").datepicker("option", "defaultDate", new Date("12/31/1998"));
}
var data =
[{"actioncategory":"Exceptions","actiondate":"11\/06\/2013","actiontext":"John Doe submitted with the comment 'testing'.","action_context":"exceptions.ajax_processrecords","anomaly_type":"Test","browser_info":"Mozilla\/5.0 (Windows NT 6.1; WOW64) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/30.0.1599.101 Safari\/537.36","browser_info_ver":"Chrome\/30.0.1599.101","days_old":"886.85","exceptionid":"2","location":"229","park":"ABCD","region":"AAA","remote_addr":"111.11.111.11","username":"John Doe","wonum":""}]
var columns =
[
{ dataIndx: "state", maxWidth: 30, minWidth: 30, align: "center", resizable: false,
type: 'checkBoxSelection', cls: 'ui-state-default', sortable: false, editor: false,
dataType: 'bool',
cb: {
all: false, //checkbox selection in the header affect current page only.
header: true //show checkbox in header.
}
},
{title:"Region", width:80, dataType:"string", dataIndx: "region",
filter: { type: "select",
attr: 'multiple',
condition: 'range',
valueIndx: "region",
options: ['AKR','IMR','MWR','NCR','NER','PWR','SER','WASO'],
listeners: ['change']
}
},
{title:"Park", width:50, dataType:"string", dataIndx: "park",
filter: { type: 'textbox', condition: 'begin', listeners: ['keyup'] }
},
{title:"Table Name", width:150, dataType:"string", dataIndx: "actioncategory",
filter: { type: 'textbox', condition: 'begin', listeners: ['keyup'] }
},
{title:"Location ID", width:150, dataType:"integer", align: "right", dataIndx: "location", halign: "center",
filter: { type: 'textbox', condition: 'begin', listeners: ['keyup'] }
},
{title:"Work Order ID", width:150, dataType:"string", dataIndx: "wonum", halign: "center",
filter: { type: 'textbox', condition: 'begin', listeners: ['keyup'] }
},
{title:"Anomaly Type", width:200, dataType:"string", align: "right", dataIndx: "anomaly_type",
filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }
},
{title:"Action Text", minWidth:1000, dataType:"string", dataIndx: "actiontext",
filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }
},
{title:"Date/Time", width:150, dataType:"date", dataIndx: "actiondate",
filter: { type: 'textbox', condition: "between", init: pqDatePicker, listeners: ['change'] }
},
{title:"Days Old", width:150, dataType:"date", dataIndx: "days_old",
filter: { type: 'textbox', condition: 'equal', listeners: ['keyup'] }
},
{title:"IP Address", width:150, dataType:"string", dataIndx: "remote_addr",
filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }
},
{title:"Browser Info", width:1500, dataType:"string", dataIndx: "browser_info",
filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }
},
{title:"Action Context", width:200, dataType:"string", dataIndx: "action_context",
filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }
},
{title:"Exception ID", width:150, dataType:"string", dataIndx: "exceptionid",
filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }
},
{title:"Detailed Browser Info", width:250, dataType:"string", dataIndx: "browser_info_ver",
filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }
}
];
;
var loadStateSuccess;
var obj = {
width:'98%',
height: 'flex',
showTop: true,
showBottom: true,
//collapsible: false,
columnTemplate: { minWidth: "75" },
showHeader: true,
roundCorners: false,
rowBorders: true,
columnBorders: true,
selectionModel: { type: 'cell' },
numberCell: { show: true },
stripeRows: true,
title: "Audit Log Search and Filter",
colModel: columns,
create: function (evt, ui) {
var CM = this.getColModel(),
opts = [];
for (var i = 0; i < CM.length; i++) {
var column = CM
;
if (column.hidden !== true) {
opts.push(column.dataIndx);
}
}
//initialize the selected options in toolbar select list.
$(".columnSelector").val(opts);
//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;
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,
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();
}
}]
},
dataModel: {
data: data,
location: "local",
},
sortModel: {
//type: 'remote',
single: false,
sorter: [{ dataIndx: 'days_old', dir: 'up' }],
space: true
},
pageModel: { type: 'local', rPP: 15, rPPOptions: [10, 15, 20]},
filterModel: { on: true, mode: "AND", header: true },
create: function () {
//restore state of grid.
loadStateSuccess = this.loadState({ refresh: false });
}
};
var grid = pq.grid("#grid_json", obj );
$(window).on('unload', function () {
$("#grid_state").pqGrid('saveState');
});
});
</script>
</head>
<body>
<div id="grid_json" style="margin:auto;"></div>
</body>
</html>
