How can we add single selectable checkbox in a grid in Pivot mode?

[EPM Solutions]

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

[paramvir]

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.

[EPM Solutions]

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

[paramvir]

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

[EPM Solutions]

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

[paramvir]

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

[EPM Solutions]

Hello Team.

Thanks a lot.