Igniteui-angular: How to disable selection for few rows based on any condition in multi selection of igx-grid ignite UI for angular?

[ivanovla]

Hello.
I have the same question as here:
https://www.infragistics.com/community/forums/f/ignite-ui-for-angular/119601/how-to-disable-selection-for-few-rows-based-on-any-condition-in-multi-selection-of-igx-grid-ignite-ui-for-angular/530761

Your colleague’s decision was this:
https://stackblitz.com/edit/igx-grid-preselected-rows.

But that does not work. If you select everything, then the logic of work is lost.

[ViktorSlavov]

Hi @ivanovla ,
Thanks for the thorough explanation!

I think your desired behavior can be achieved by templating the header checkbox and attaching a listener to the onRowSelectionChange event emitter:
On the emitter, filter the newSelection, removing all of the disabled IDs from it.
For the header, override the default header with a checkbox that does the following:

• Handle the click event, stopping it's propagation (so it does not trigger the default header behavior)
• Call the grid's selection API depending on the state - deselect all rows if totalSelectable - totalSelected === 0 or select all selectable rows (data - disabled)
• Handles it's view state depending on the selection state (checked state and indeterminate state)

For the rows that are not selectable, hide the selectors by providing a conditional template.

Here is a small StackBlitz sample with the proposed setup - when you have the time, give it a look and let us know if this works for your scenario.