Datagrid with CheckBox Row Selection

[Ditchford]

Hello

I have a DataGrid with Checkbox like this:

I am trying to do 2 things and cannot for the life of me figure it out:

1. Allow the user to select only one row in total, i.e. if the user selects a second row then the currently selected row should toggle off

2. Disable the Select /Deselect All (top left next to the word Demograph)

Would really appreciate any help as this has me stumped.

Thanks

[Rahul Narayanasamy]

Hi Ditchford, 

Greetings from Syncfusion. 

Query: Allow the user to select only one row in total, i.e. if the user selects a second row then the currently selected row should toggle off 

We have validated your query and you want to select only one row while using CheckBox column. Here, we have achieve your requirement by using RowSelecting event and ClearSelection method of the Grid. Find the below code snippets for your reference. 

 

<SfGrid @ref="Grid" DataSource="@Orders" AllowSelection="true" AllowPaging="true"> 

    <GridEvents RowSelecting="RowSelectingHandler" TValue="Order"></GridEvents> 

    <GridSelectionSettings Type="SelectionType.Single"></GridSelectionSettings> 

    <GridColumns> 

        <GridColumn Type="ColumnType.CheckBox" Width="50"></GridColumn> 

        . . . 

    </GridColumns> 

</SfGrid> 

 

@code{ 

    SfGrid<Order> Grid; 

    . . .  

    public async Task RowSelectingHandler(RowSelectingEventArgs<Order> args) 

    { 

        await Grid.ClearSelection();   //clear selection  

    } 

} 

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/events/#rowselecting  

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSelection  

Query: Disable the Select /Deselect All (top left next to the word Demograph) 

You want to disable the SelectAll checkbox in checkbox column. You can achieve this requirement by using below CSS. Find the below code snippets and sample for your reference. 

<style> 

    .e-headercelldiv.e-headerchkcelldiv .e-checkbox-wrapper.e-css { 

        pointer-events: none; 

        opacity: 0.5; 

    } 

</style> 

Sample: https://www.syncfusion.com/downloads/support/forum/162803/ze/BlazorApp1SampleCheckBox1542961102 

Please let us know if you have any concerns. 

Regards, 

Rahul