Blazor column checkboxes in datagrid

[Johnathan]

Hello,

Requirement:  

Render a checkbox in the datagrid for a boolean value.

Checking or unchecking the checkbox will fire the isChanged event so a toolbar will show the 'update' button as enabled on a multi-select datagrid.

We have the following:

 <SfGrid ID="GridDataID" @ref="Grid" DataSource="@GridData" AllowSelection="true" Toolbar="@ToolbarItems" AllowGrouping="true" AllowSorting="true" AllowPaging="true" AllowPdfExport="true">

                    <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" Mode="EditMode.Batch"></GridEditSettings>

                    <GridSelectionSettings EnableToggle="true" Type="SelectionType.Multiple"></GridSelectionSettings>

                    <GridEvents OnActionBegin="GridActionBegin" TValue="DataModel" OnToolbarClick="ToolbarClickHandler" OnBatchSave="BatchSaveHandler"></GridEvents>

                    <GridPageSettings PageCount="2"></GridPageSettings>

                    <GridColumns>

                        <GridColumn Field=@nameof(Data.onlist) HeaderText="On List" EditType="EditType.BooleanEdit" TextAlign="TextAlign.Center" Width="50"></GridColumn>

...

When the datagrid is rendered, it shows as true or false.

Once the true or false is clicked, the rendering changes to a checkbox.  I want it to render as a checkbox before the click.

I tried Type="ColumnType.Checkbox" but the datagrid does not catch the edit event once the checkbox is selected or not selected.

so

 <GridColumn Field=@nameof(DataModel.onlist) HeaderText="On List" Type="ColumnType.CheckBox" EditType="EditType.BooleanEdit" TextAlign="TextAlign.Center" Width="50"></GridColumn>

and 

 <GridColumn Field=@nameof(DataModel.onlist) HeaderText="On List" Type="ColumnType.CheckBox" TextAlign="TextAlign.Center" Width="50"></GridColumn>

do not work.

I tried the template option from documentation.  This renders a checkbox 'over' the datagrid's checkbox so no click event is captured.

After digging through the documentation for some time, I need a hand.

Please help

[Rahul Narayanasamy]

Hi Johnathan, 

Greetings from Syncfusion. 

We have validated your query with the provided details and we suspect that you want to change the checkbox at single click and save the checkbox value to Grid datasource. Based on your requirement, we have prepared a sample. We have achieved your requirement by using EditTemplate and Grid events(CellSelected, OnCellEdit, OnCellSave). Here, we have rendered a checkbox in EditTemplate and edit the checkbox at single click. Find the below code snippets and sample for your reference. 

 

<SfGrid ID="Grid" @ref="grid" AllowPaging="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Edit", "Update" })" Height="530px" Width="100%" EnableAltRow="true" 

        AllowSorting="true" AllowFiltering="true"> 

    <GridSelectionSettings Mode="Syncfusion.Blazor.Grids.SelectionMode.Both"></GridSelectionSettings> 

    <GridEditSettings AllowEditing="true" Mode="EditMode.Batch" AllowEditOnDblClick="true"></GridEditSettings> 

    <GridEvents OnCellEdit="OnCellEdit" OnCellSave="OnCellSave" CellSelected="CellSelectHandler" OnToolbarClick="ToolbarClickHandler" TValue="OrdersDetails"></GridEvents> 

    <GridColumns> 

        <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@TextAlign.Center" Width="140"></GridColumn> 

        . . . 

       <GridColumn Field=@nameof(OrdersDetails.Verified) HeaderText="Admin" Width="50" DisplayAsCheckBox="true"> 

            <EditTemplate> 

                @{ 

                    <SfCheckBox @ref="CheckboxInstance" ID="Verified" @bind-Checked=@CheckboxChecked ValueChange="@OnValueChange"> 

                    </SfCheckBox> 

                } 

            </EditTemplate> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

 

 

@code{ 

    SfCheckBox CheckboxInstance; 

    . . . 

   public async void CellSelectHandler(CellSelectEventArgs<OrdersDetails> args) 

    { 

        . . . 

       if (CurrentEditCellIndex == 3) 

        { 

            await grid.EditCell(CurrentEditRowIndex, fied[CurrentEditCellIndex]); 

        } 

    } 

    . . . 

   public void OnCellEdit(CellEditArgs<OrdersDetails> args) 

    { 

        if (args.ColumnName == "Verified") 

        { 

            . .  

        } 

    } 

    public void OnCellSave(CellSaveArgs<OrdersDetails> args) 

    { 

        . . . 

   } 

    . . . 

} 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1633750983  

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/how-to/single-click-editing-with-batch-mode/ 

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

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

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

If the above requirement does not meet your requirement, could you please get back to us with more details. 

Regards,
Rahul 

[Johnathan]

Thank you Rahul.  That works!

[Rahul Narayanasamy]

Hi Johnathan, 

 

Thanks for the update. 

 

Please get back to us if you need further assistance. 

 

Regards, 

Rahul