Set only one checkbox to be selectable in a grid at a time

[Ignacy Mielniczek]

Hello,

We are using the GridComponent in "Normal" edit mode, which has N number of rows and every row has a checkbox only in one specific column. We have added a checkbox using <ng-template> to that column and now we would like to limit this grid to have only one checkbox selected at a time based on a flag:

1. So when there is already a flag set to True to one of the records (when rendering for the first time), that rows' checkbox should be checked and all others checkboxes should be disabled until the checked checkbox is unchecked.
2. When there is no record which has its flag set to True, then all the checkboxes should be enabled at the render time.
3. So, when someone checks it disables all other rows checkboxes automatically.

Best regards,

Ignacy Mielniczek

[Dineshnarasimman Muthu]

Hi Ignacy,

Greetings from Syncfusion Support.

Query: Disable all checkbox if one is selected

After reviewing your query, we were able to understand that all the checkboxes selection must be disabled if one checkbox is checked and enabled if the checkbox is unchecked. Our suggest is to set a flag in rowDeselect event and in rowSelecting event disabling the select by setting args.Cancel as true. To assist you, we have included a code snippet and a sample.

 

 rowDeselected(args) {

    this.checked = false;

  }

  rowSelecting(args) {

    if (this.checked === true) {

      args.cancel = true;

    }

    this.checked = true;

  }

 

 

Sample: https://stackblitz.com/edit/angular-kkqato-azpqb5?file=src%2Fapp.component.ts,src%2Fapp.component.html,src%2Fdata.ts,src%2Fapp.component.css

If we misunderstood your requirement, please share the below details that will be helpful for us to provide better solution.

• Share your requirement step by step with detailed description.
• Share your requirement scenario in pictorial representation or video demonstration.
• Share your sample grid rendering code.

Regards,

Dineshnarasimman