Skip to content

Commit c7eed1d

Browse files
authored
Update README.md
1 parent 1bc0533 commit c7eed1d

File tree

1 file changed

+18
-12
lines changed

1 file changed

+18
-12
lines changed

README.md

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,35 @@
11
<!-- default badges list -->
2-
![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/520094985/24.2.1%2B)
2+
![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/520094985/25.1.3%2B)
33
[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1106334)
44
[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
55
[![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)
66
<!-- default badges end -->
77

8-
# Grid for Blazor - Disable Selection Checkboxes in Specific Rows
8+
# Blazor Grid - Disable Selection Checkboxes in Specific Rows
99

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).
1111

1212
![Grid with Disabled Selection Checkbox](result.png)
1313

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.
1515

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
1717

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:
1919

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.
2121

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.
2323

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.
2525

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.
2733

2834
## Files to Review
2935

@@ -37,8 +43,8 @@ Follow the steps below to allow users to select only the items that match your c
3743

3844
## More Examples
3945

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)
4248
<!-- feedback -->
4349
## Does this example address your development requirements/objectives?
4450

0 commit comments

Comments
 (0)