How to disable column check-all header

How to disable column check-all header

Posted by: sdayal on 9 August 2021, 4:36 am EST

• 

  sdayal

  • Post Options:
  • Link
    Copy

  Posted 9 August 2021, 4:36 am EST

  Hi team,

  In the below snippet, i’m able to select all rows using the select-all header checkbox even though i have some rows with disabled checkbox.

  https://stackblitz.com/edit/angular-faea2p?file=src/app/app.component.ts

  steps:-

  1. apply filter on section column as ‘B’.
  2. now select the check-all header .(even though the individual rows checkboxes are disabled i’m able to select those rows).

  How can i achieve the functionality of skipping the disabled rows using the select-all header.
  
  And if All the rows displayed have disabled checkboxes then the header check-box should also be disabled.
  
  Example:-
  
  Section filter with ‘B’. we have 2 rows and each have disabled checkbox so the header checkbox should also be disabled

  Regards

• 

  sdayal

  • Post Options:
  • Link
    Copy

  Posted 9 August 2021, 11:48 pm EST

  Hi team,

  Can you please help us with the solution.

  Regards

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 10 August 2021, 4:35 am EST

  Hi,

  To make the header checkBox disabled, when all the rows are disabled, you may check the rows with the wj-stat-disabled class and store them in the global array which you may use to toggle between disabled state.

  Note: You need to clear the global array(arr) on collectionChanged and filterApplied event.

  You may also refer to the sample demonstrating the same:

  https://stackblitz.com/edit/angular-ybbafy

  Let us know if that’s works for you.

  Regards,
  
  Ashwin

• 

  sdayal

  • Post Options:
  • Link
    Copy

  Posted 10 August 2021, 6:35 am EST

  Hi Ashwin,

  We facing two issues in the above snippet

  1. we have huge data so when we click on header check-box , rows checkboxs get checked on by one so it looks like a lighting effect.
  2. deselect of header check-box is not working in your snippet

  https://stackblitz.com/edit/angular-p43wnj?file=src/app/app.component.ts

  Also, Since we are platinum license holder , where can we post our question in order to get answer within 24 hours time because we need solution asap. And we are unable to use the contacts provided on the website.

  Regards

• 

  sdayal

  • Post Options:
  • Link
    Copy

  Posted 11 August 2021, 12:03 am EST

  Hi team,

  Please help us with the solution.

  Regards

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 11 August 2021, 1:05 am EST

  We are working on this and will update you as soon as possible.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 11 August 2021, 7:10 am EST

  Hi Shiva,

  I’ve updated the sample as per your requirement.

  1. The lightning effect was caused because the collectionView was getting refreshed after every disabled checkbox gets unchecked, so to resolve the issue instead of setting the row isSelected property you may set the checkbox’s checked property to false. You also need to change the isSelected property state for the disabled rows by calling unCheckDisabledRow method in the itemChecked event of selector Class and pageChanged event of collectionView to do the same on the next page.

  Please refer to the updated sample:

  https://stackblitz.com/edit/angular-zs8gny

  2. I am afraid this will be expected behavior. When the select all checkbox is checked, some of the rows are unchecked (as per the requirement), the checkbox goes into an indeterminate state. But after the indeterminate state, the checkbox will always go into the checked state (browser’s behavior) and will check all the rows again but due to some rows not being selected it will go back into an indeterminate state. So I would suggest you either check all the rows or implement a custom selection checkbox without using the Selectors.

  Regarding platinum license, you can post your queries on the my support portal in your account:

  https://www.grapecity.com/my-account/my-support

  and we will try to reply within 24 hours (except on weekends). But sometimes, due to the complexity of the query, it may take use more than 24 hours to provide a response. In that case we will update you accordingly.

  ~regards

• 

  sdayal

  • Post Options:
  • Link
    Copy

  Posted 11 August 2021, 9:11 am EST

  Hi Ashwin,

  de-select is our requirement. So is there any work around for this ?
  
  example:-
  
  if i have 10000 rows in our grid and we selected it using select-all check-box then in order to de-select i have to individually de-select 10000 rows .
  
  So we need de-select in our application.

  regards

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 12 August 2021, 5:38 am EST

  Hi,

  As explained earlier it would not be possible to uncheck the check-all selector, as all the rows are not selected so it will remain in an indeterminate state. If you wish to use a checkbox to select or unselect all the rows, you may add a checkbox manually to the header of the selector column and handle the selection based on that checkbox state without going to an indeterminate state.

  Please refer to the sample demonstrating the same:

  https://stackblitz.com/edit/angular-t7t8mc

  Let us know if works for you.

  ~regards