Is there a way to disable the Blazor grid's checkbox that is used for selecting a row?

[Brian Wood]

I have a requirement where I need to disable row checkboxes that have a certain status.  Is there a way to use a template to disable the checkbox based on the status?  Do I need to handle this on the row selecting event?

[Vignesh Natarajan]

Hi Brian,  

 

Greetings from Syncfusion support.  

 

Query: “ have a requirement where I need to disable row checkboxes that have a certain status.” 

 

We suggest you to achieve your requirement (disable checkbox based on row value) by using QueryCellInfo event of Grid and AddClass() method to disabled the checkbox using CSS styles. Refer the below code example.  

 

<SfGrid @ref="DefaultGrid" DataSource="@Orders" AllowPaging="true">    <GridEvents QueryCellInfo="QueryCellInfoHandler" TValue="Order"></GridEvents>    <GridColumns>        <GridColumn Type="ColumnType.CheckBox" Width="60"></GridColumn>        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" IsPrimaryKey="true"></GridColumn>        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>    </GridColumns></SfGrid> <style>    .e-checkbox-disabled .e-checkbox-wrapper .e-frame {        border-color: #bdbdbd;    }     .e-checkbox-disabled .e-checkbox-wrapper {        cursor: default;        pointer-events: none;    }</style> @code{    public List<Order> Orders { get; set; }    public void QueryCellInfoHandler(QueryCellInfoEventArgs<Order> Args)    {        if (Args.Column.Type == ColumnType.CheckBox && (Args.Data.CustomerID == "ALFKI" || Args.Data.CustomerID == "ANTON"))        {            Args.Cell.AddClass(new string[] { "e-checkbox-disabled" });        }     }

 

   

Kindly download the sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/156500/ze/BlazorApp1-234551957  

 

Refer our UG documentation for your reference 

 

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

 

Kindly get back to us if you have further queries.  

 

Regards,
Vignesh Natarajan