ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: rsgmedia on October 07, 2016, 04:23:04 pm

Title: pqSelect with Paramquery Grid
Post by: rsgmedia on October 07, 2016, 04:23:04 pm

We want to add pqSelect (multiselect dropdown with checkboxes) in pqGrid. We have found few options to do the same and it worked.
We are facing few issues like
1. when we select values and come out of the cell values doesn't show as comma separated.
2. when we again open the dropdown all the selected values (check boxes) doesn't get select and we loose all selected data.

we are creating pq-grid dynamically on run-time on click of a button.

Here is code snippet:
var colModel = [{
   title: "Zones",
   dataIndx: "zones",
   width: 200,
   editor: {
      type: 'select',
      options: Zones,
      attr: "multiple='multiple'",
      init: function(ui) {
         ui.$cell.find("select").pqSelect({
            checkbox: true,
            multiplePlaceholder: 'Select Zone',
            width: '100%',
            search: false
         });
      },
      mapIndices: {
         name: "zones",
         id: "zone_id"
      },
      labelIndx: "name",
      valueIndx: "id"
   }
}, {
   dataIndx: "zone_id",
   hidden: true
}];

//Zones is a global object
var Zones = [{
   "name": "A1",
   "active": 1,
   "description": "dsads",
   "modified_by": null,
   "created_timestamp": 1474294158,
   "modified_timestamp": null,
   "id": "32"
}, {
   "name": "B1",
   "active": 1,
   "description": "dsads",
   "modified_by": null,
   "created_timestamp": 1474294158,
   "modified_timestamp": null,
   "id": "33"
}, {
   "name": "C1",
   "active": 1,
   "description": "dsads",
   "modified_by": null,
   "created_timestamp": 1474294158,
   "modified_timestamp": null,
   "id": "34"
}];

Title: Re: pqSelect with Paramquery Grid
Post by: paramvir on October 10, 2016, 09:44:04 am

Please make these 2 additions/changes in column.editor:

Code: [Select]

init: function(ui) {                   
         //add this
         var val = ui.cellData==null? "": ui.cellData;
         ui.$cell.find("select").val( val.split(",") ).pqSelect({
            checkbox: true,
            multiplePlaceholder: 'Select Zone',
            width: '100%',
            search: false
         });
  },
  //also implement getData callback.
  getData: function(ui){
return ui.$cell.find("select").val();
  }


Title: Re: pqSelect with Paramquery Grid
Post by: rsgmedia on October 17, 2016, 01:28:18 pm

Hi,

It worked very well. Thanks!!

How can we enable multiselect grouping with the same? Do we need to change the data or what?

Title: Re: pqSelect with Paramquery Grid
Post by: paramvir on October 17, 2016, 06:44:00 pm

You just need to mention groupIndx for grouping.

http://paramquery.com/pro/api#option-column-editor

Title: Re: pqSelect with Paramquery Grid
Post by: rsgmedia on October 17, 2016, 07:05:11 pm

Thanks!! we will will try it.

We need close or open event of pqSelect. Are these available? change event i am using it's working fine.

Title: Re: pqSelect with Paramquery Grid
Post by: paramvir on October 18, 2016, 04:45:44 pm

pqSelect doesn't have open / close events, though grid has corresponding events like editorBegin, editorEnd, etc which can be used.

http://paramquery.com/pro/api#event-editorBegin

http://paramquery.com/pro/api#event-editorEnd