Author Topic: pqSelect with Paramquery Grid  (Read 5141 times)

rsgmedia

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 50
    • View Profile
pqSelect with Paramquery Grid
« 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"
}];

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: pqSelect with Paramquery Grid
« Reply #1 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();
  }
« Last Edit: October 10, 2016, 10:04:47 am by paramquery »

rsgmedia

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 50
    • View Profile
Re: pqSelect with Paramquery Grid
« Reply #2 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?

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: pqSelect with Paramquery Grid
« Reply #3 on: October 17, 2016, 06:44:00 pm »
You just need to mention groupIndx for grouping.

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

rsgmedia

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 50
    • View Profile
Re: pqSelect with Paramquery Grid
« Reply #4 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.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: pqSelect with Paramquery Grid
« Reply #5 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