Devextreme-reactive: How to disable the selection option for few rows based on the condition

[sakthi7081]

I need to disable the selection option for few rows based on the condition on the given data and make all other rows to be enabled for selection.

For example if I have a row with a boolean field 'Isselected' then only if the value is 'no' then the selection should be enabled else it should be disabled for selection.

[MaximKudriavtsev]

Hi,
 
Use the Devextreme React Core Components to disable selection for a few rows. This example demonstrates it.

[sakthi7081]

Thanks @MaximKudriavtsev It works for me so good!!!

[sakthi7081]

I have another question with the same functionality. I couldn't work this on Grouping. The select all option in header selects all the rows that are enabled for selection despite of the selection functionality on Grouping.

[MaximKudriavtsev]

@sakthi7081,

In my example all works fine - the select all button selects only enabled selection rows.
Group by owner and click the select all button to see this.

[sakthi7081]

The actual scenerio for group by is to select only the expanded group while select all check box is clicked, but in this scenerio (if Id column gets grouped in the example) while selecting select all even if Id=1 group is not expanded, the rows in this group gets selected. Can you please help me in finding the solution for this problem.

[MaximKudriavtsev]

Thank you for the clarification. I suggest you take a look at one of the following workarounds:
 

1. You can modify the IntegratedSelection plugin to make other built-in plugins work correctly. As you can see, Grid tracks the rowsWithAvailableToSelect function to detect which rows are available for selection. To achieve the required behavior, you need to copy the IntegratedSelection plugin to your application and change the rowsWithAvailableToSelect function there. I've created an online sample to illustrate this approach in action.
    
   NOTE: This suggestion is based on a private API and I can't guarantee that it won't be changed in the future. We appreciate your understanding.
    
2. You can use the controlled mode and perform all calculations in the onSelectionChange event handler. In this case, you need to define the headerCellComponent property in the TableSelection's plugin and manage its selectAll state. Refer to the following sample.
    

Please review these suggestions and let me know you results.

I'd also like to clarify that we process support inquiries related to usage scenarios in the Support Center. Feel free to contact us there if you have any further questions.

[sakthi7081]

@MaximKudriavtsev Thanks a lot for supporting with all my queries. The above solution gives me a lot more information on the solution to my questions.

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.