ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: SegueTech on April 11, 2016, 04:14:29 pm

Title: Help with Show/Hide Columns
Post by: SegueTech on April 11, 2016, 04:14:29 pm: 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>




<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>


<link rel="stylesheet" href="../grid/pqgrid.min.css" />
<link rel="stylesheet" href="../grid/pqSelect/pqselect.min.css" />


<link rel="stylesheet" href="../grid/pqgrid.ui.min.css" />


<link rel="stylesheet" href="../grid/themes/Office/pqgrid.css" />


<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>
Title: Re: Help with Show/Hide Columns
Post by: paramvir on April 11, 2016, 05:20:57 pm: This code is for v3.3.0 ( the context this of listener and general callbacks in the toolbar has been changed to grid widget instance in v3.3.0 ), it seems you have been using older version hence the error.

Please consult the demo corresponding to your version.
Title: Re: Help with Show/Hide Columns
Post by: SegueTech on April 11, 2016, 06:32:57 pm: Hi there,

Sorry, I thought I had put the 3.3 version in place. I just downloaded that and put it in, and sure enough, the list pulls up and does something. Unfortunately, it's still a multi-select drop-down style and as I click each column, it only shows that column. Any ideas how I get it to work like the demo with the pqselect style and the boxes with the X in the corner?

Thanks again for the help!
Title: Re: Help with Show/Hide Columns
Post by: paramvir on April 11, 2016, 06:43:34 pm: Please also add pqSelect.min.css & pqSelect.min.js ( which is included in the SDK ) in the web page.
Title: Re: Help with Show/Hide Columns
Post by: SegueTech on April 11, 2016, 06:53:59 pm: Both of those files are listed in the includes at the top.
Title: Re: Help with Show/Hide Columns
Post by: SegueTech on April 11, 2016, 08:28:29 pm: Is there something else missing in my code to make that work and appear like in the demo? I noticed that I am setting var obj, whereas the demo code uses the ("div#blah).pqGrid() format.
Title: Re: Help with Show/Hide Columns
Post by: paramvir on April 11, 2016, 09:21:10 pm: Please correct the following:

1) use jQueryui >= 1.11.4

2) Remove the second create() callback from the object used during initialization because it overwrites the first one.

http://jsfiddle.net/o6hbwby0/
Title: Re: Help with Show/Hide Columns
Post by: SegueTech on April 11, 2016, 10:06:06 pm: That did it! Fantastic, thank you so much!