Data bind a checkbox to grid and allow single click of checkbox to update data

[Keith A Price]

I have a Boolean field in my dataset to mark the status as DONE.

I would like to display that field in my Grid as a checkbox and allow the user to mark that row as Done by clicking the checkbox w/o having to enter Edit mode.

How can I do this?

[Vignesh Natarajan]

Hi Keith,  

 

Thanks for contacting Syncfusion support. 

 

Query: “I would like to display that field in my Grid as a checkbox and allow the user to mark that row as Done by clicking the checkbox w/o having to enter Edit mode.” 

 

We have analyzed your query and we have achieved your requirement using ColumnTemplate feature of the Grid. using column template feature of Grid, we have rendered the Checkbox component and disabled it when Boolean values is true.  

 

When Boolean value is false, checkbox will be enabled and once checked. For that particular record, checkbox will be disabled (after selection). Refer the below code example.   

 

<SfGrid DataSource="@OrderData"> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Center" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer ID" TextAlign="TextAlign.Center" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" TextAlign="TextAlign.Center" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(Order.ShipName) HeaderText="Ship Name" TextAlign="TextAlign.Center" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.Verified) HeaderText="Verified" TextAlign="TextAlign.Center" Width="120"> 

            <Template> 

                @{ 

                    var ord = context as Order; 

                    <SfCheckBox @bind-Checked="ord.Verified" Disabled="@(ord.Verified)" TChecked="bool"></SfCheckBox> 

                } 

            </Template> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

 

 

If you don’t want to disable the checkbox, kindly remove the Disabled property from CheckBox component. Kindly refer the below sample for your reference 

 

Sample: https://www.syncfusion.com/downloads/support/forum/168853/ze/DataGrid_Server865055343.zip 

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan