ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: EPM Solutions on June 05, 2020, 04:18:16 pm

Title: How can we add single selectable checkbox in a grid in Pivot mode?
Post by: EPM Solutions on June 05, 2020, 04:18:16 pm

Our requirement is to add an checkbox in front of last child of group tree as shown in image2 below.

Checkbox should be single selectable at time and on checked its cell background-color should get change in any other color.

Please give some example of it.

Problem url:

https://stackblitz.com/edit/js-y31u1u?file=index.html

Title: Re: How can we add single selectable checkbox in a grid in Pivot mode?
Post by: paramvir on June 05, 2020, 08:25:04 pm

1. Do you need checkbox in front of each child node as highlighted in yellow in your image.

2. By single selectable, do you mean that when a checkbox is checked, other checkboxes should be unchecked and their background reset to default.

Title: Re: How can we add single selectable checkbox in a grid in Pivot mode?
Post by: EPM Solutions on June 06, 2020, 11:32:12 am

Hello Team,

Thanks for quick reply,

Yes I need the same. But when we checked a node, sets background-color to light red or purple of Company Name(chhild node). Checking another row causes previous row to be set unchecked(set default background).

Title: Re: How can we add single selectable checkbox in a grid in Pivot mode?
Post by: paramvir on June 08, 2020, 11:15:06 am

1. Add these to groupModel

Code: [Select]

checkbox: true, cascade: false, useLabel: true

2. Implement the beforeCheck and check events to limit checkbox to single check and change cell style.

Code: [Select]

      beforeCheck: function(evt, ui){
        var G = this.Group();
        G.getCheckedNodes().forEach(function(node){
          node.pq_group_cb = false;
          node.pq_cellstyle[ui.dataIndx] = {};
        })
      },
      check: function(evt, ui){       
        var style = ui.rows[0].rowData.pq_cellstyle = {}; 
        style[ui.dataIndx] = {
          "background-color": (ui.check? "#aaffff": "")
        }
      },


https://stackblitz.com/edit/js-7wbsny?file=index.html

Title: Re: How can we add single selectable checkbox in a grid in Pivot mode?
Post by: EPM Solutions on June 08, 2020, 12:58:57 pm

Hello Team,

Thanks,

I have one problem, I applied the your suggested css code in a grid with bootstrap theme in below URL.

It is not working. Can you please check it?

Problem URL:
https://stackblitz.com/edit/js-9vbyfq?file=index.js

Title: Re: How can we add single selectable checkbox in a grid in Pivot mode?
Post by: paramvir on June 08, 2020, 02:47:30 pm

It's not the bootstrap theme, but you are using an old 5.4 version of pqgrid in which this solution doesn't work.

Please upgrade the version.

https://stackblitz.com/edit/js-nzgynq?file=index.html

Title: Re: How can we add single selectable checkbox in a grid in Pivot mode?
Post by: EPM Solutions on June 08, 2020, 03:54:34 pm

Hello Team.

Thanks a lot. :)