Dont want to uncheck/uncheck the disabled checkbox when clicking checkbox header

[Akshatha]

Hi Team,

In the following grid 2nd row is disabled, when clicking on header checkbox(in blue clor) disabled checkbox is unchecked/uncheck.

But i dont want to uncheck/uncheck the disabled checkbox when clicking checkbox header

<e-column type='checkbox' field= "isSelected" disabled="isClosed" [allowFiltering] ="false" > </e-column>

    

 public rowDataBound(args) {

      if(args.data.isClosed === true) { 

        args.row.classList.add('e-disabled'); 

        args.row.classList.add('disablecheckbox'); 

        args.row.getElementsByClassName('e-gridchkbox')[0].classList.add('disablecheckbox'); 

    } 

  }

[Ajith Govarthan]

Hi Akshatha, 

Query: In the following grid 2nd row is disabled, when clicking on header checkbox(in blue clor) disabled checkbox is unchecked/uncheck.But i dont want to uncheck/uncheck the disabled checkbox when clicking checkbox header 

 

Based on your query, you want prevent checkbox selection in the disabled checkbox while clicking the header checkbox. Based on that, we have prepared sample in that we have used the rowSelecting event using this event we have selected only the rows which does not contain the e-disabled CSS class. 

We have also disabled the selection for the disabled rows.  For your convenience we have attached the sample so please refer the sample for your reference. 

Code Example: 

App.component.ts 

rowDataBound(args) { 

    if (args.data["Verified"] === false) { 

      args.row.classList.add("e-disabled"); 

    } 

  } 

  rowSelecting(args) { 

    let removedIndexLength = 0; 

    if (args.data["Verified"] === false) { 

      args.cancel = true;   // disabled selection for disabled rows 

    } 

    if (args.row.length > 1) { 

      args.rowIndexes.filter(rowIndex => { 

        if ( 

          this.grid.getRowByIndex(rowIndex).classList.contains("e-disabled") 

        ) { 

          args.rowIndexes.splice(rowIndex + removedIndexLength, 1); 

          removedIndexLength--; 

        } 

      }); 

    } 

  } 

Sample Link: https://stackblitz.com/edit/angular-a8rpsx-vsb2ka?file=app.component.ts 

Please get back to us if you need further assistance. 

Regards, 

Ajith G. 

[Sphere]

Hi  Syncfusion Team

Here is the same problem, but my disable checkox is in serial arrangement.

I try to adjust your sample code, and disable checkbox is still ticked after clicking checkbox in the header.

Is there any idea to solve it?

Many thanks.

[Pavithra Subramaniyam]

Hi Sphere,

We have modified the logic for skipping the disabled row while selecting inside the rowSelecting event. Please refer to the below code example and sample link for more information.

rowSelecting(args) {

  .  .  .

  if (args.row.length > 1) {

    var index = [];

    args.rowIndexes.filter((rowIndex) => {

      if (this.grid.getRowByIndex(rowIndex).classList.contains('e-disabled')) {

        // getting the disabled row indexes

        index.push(rowIndex);

      }

    });

    index.forEach((p) =>

      args.rowIndexes.splice(args.rowIndexes.indexOf(p), 1)

    );

  }

}

 

https://stackblitz.com/edit/angular-a8rpsx-r6kmcm?file=app.component.ts

Please get back to us if you need further assistance on this.

Regards,

Pavithra S