You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
# Grid for Blazor - Disable Selection Checkboxes in Specific Rows
8
+
# Blazor Grid - Disable Selection Checkboxes in Specific Rows
9
9
10
-
This example illustrates how to prevent users from selecting specific data items in the [DevExpress Grid for Blazor](https://docs.devexpress.com/Blazor/403143/grid). The Grid component's [selection column](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGridSelectionColumn) displays checkboxes that allow users to select and deselect items. In this example, the component disables these checkboxes for items whose `Summary` field is set to `Mild`.
10
+
This example prevents users from selecting specific data items in the [DevExpress Blazor Grid](https://docs.devexpress.com/Blazor/403143/grid).
11
11
12
12

13
13
14
-
Follow the steps below to allow users to select only the items that match your criteria:
14
+
A [selection column](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGridSelectionColumn) displays checkboxes that selects/deselects Blazor Grid items. In this example, the Grid component disables selection checkboxes for items whose **Summary** field is set to `Mild`. The **Select All** checkbox also ignores these items.
15
15
16
-
1. Use the [DxGridSelectionColumn](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGridSelectionColumn)'s [CellDisplayTemplate](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGridSelectionColumn.CellDisplayTemplate) to replace the built-in checkbox with a custom [DxCheckBox](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1) editor.
16
+
## Implementation Details
17
17
18
-
2. Implement two-way data binding between the [Checked](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1.Checked) property of the checkbox and the template context's [Selected](https://docs.devexpress.com/Blazor/DevExpress.Blazor.GridSelectionColumnCellDisplayTemplateContext.Selected) property.
18
+
Follow the steps below to enable selection only for items matching your criteria:
19
19
20
-
3. Set the checkbox's [Enabled](https://docs.devexpress.com/Blazor/DevExpress.Blazor.Base.DxDataEditorBase-2.Enabled) property to `true` or `false`, depending on whether the current item matches your criteria.
20
+
1. Use the [DxGridSelectionColumn.CellDisplayTemplate](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGridSelectionColumn.CellDisplayTemplate)to replace the built-in checkbox with a custom [DxCheckBox](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1) editor.
21
21
22
-
4. Define a custom [HeaderTemplate](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGridSelectionColumn.HeaderTemplate) for the selection column and place a [DxCheckBox with inderminate state](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1#indeterminate-state) inside it to act as the Select All control.
22
+
2. Implement two-way data binding between the [Checked](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1.Checked) checkbox property and the template context's [Selected](https://docs.devexpress.com/Blazor/DevExpress.Blazor.GridSelectionColumnCellDisplayTemplateContext.Selected) property.
23
23
24
-
5. Implement logic in the checkbox [CheckedChanged](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1.CheckedChanged) event to manually update the grid’s selection.
24
+
3. Set the [Enabled](https://docs.devexpress.com/Blazor/DevExpress.Blazor.Base.DxDataEditorBase-2.Enabled) property to `true`/`false`, based on the current item.
25
25
26
-
6. Handle the DxGrid [SelectedDataItemsChanged](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.SelectedDataItemsChanged) event of to keep the Select All checkbox in sync with the actual selection state.
26
+
4. Place another [DxCheckBox](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1) component in the [DxGridSelectionColumn.HeaderTemplate](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGridSelectionColumn.HeaderTemplate) to display a custom **Select All** checkbox.
27
+
28
+
5. Configure this checkbox to [support three states](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1#bind-to-custom-data-types) (checked, unchecked, and indeterminate).
29
+
30
+
6. In the [CheckedChanged](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1.CheckedChanged) event, select/deselect all Grid records that match your criteria.
31
+
32
+
7. Update the **Select All** checkbox state when the Grid raises the [SelectedDataItemsChanged](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.SelectedDataItemsChanged) event.
27
33
28
34
## Files to Review
29
35
@@ -37,8 +43,8 @@ Follow the steps below to allow users to select only the items that match your c
37
43
38
44
## More Examples
39
45
40
-
-[Grid for Blazor - How to display detail information using DxFormLayout](https://github.com/DevExpress-Examples/blazor-DxGrid-Detail-Information-DxFormLayout)
41
-
-[Grid for Blazor - How to delete selected rows](https://github.com/DevExpress-Examples/blazor-dxgrid-delete-selected-rows)
46
+
-[Blazor Grid - How to display detailed information using DxFormLayout](https://github.com/DevExpress-Examples/blazor-DxGrid-Detail-Information-DxFormLayout)
47
+
-[Blazor Grid - How to delete selected rows](https://github.com/DevExpress-Examples/blazor-dxgrid-delete-selected-rows)
42
48
<!-- feedback -->
43
49
## Does this example address your development requirements/objectives?
0 commit comments