How to select checkbox on single click

[KINS]

I have an sfgrid with three column.I have set editor type as boolean (checkbox).It works fine but I can not select checkbox on single click.Everytime I need to double click on checkbox to select checkbox.

Please advise how to select checkbox on single click instead of double click

[Vignesh Natarajan]

Hi Ismail,  

 

Thanks for contacting Syncfusion support.  

 

Query: “Please advise how to select checkbox on single click instead of double click” 

 

We have analyzed your query and we suggest you to achieve your requirement by rendering the SfCheckBox externally in Grid ColumnTemplate feature. Also we can handle the changes onour own using ValueChange event of Checkbox. Refer the below code example  

 

<SfGrid DataSource="@OrderData" Toolbar=@ToolbarItems> 

    <GridEditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true"></GridEditSettings> 

    <GridColumns> 

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

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

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

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

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

            <Template> 

                @{ 

                    var val = (context as Order); 

                    <SfCheckBox CssClass="e-outline e-success" @bind-Checked=@val.Verified TChecked="bool" ValueChange="@((args)=>valueChange(args,val))"></SfCheckBox> 

                } 

            </Template> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

  

@code{ 

    public string[] ToolbarItems = new string[] { "Add", "Edit", "Delete", "Update", "Cancel" }; 

  

    public void valueChange(ChangeEventArgs<bool> Args, Order record) 

    { 

        //update the changes in your database / datasource 

        Order rec = OrderData.Find(x => x.OrderID == record.OrderID); 

        rec.Verified = Args.Checked; 

    } 

 

 

For your convenience we have prepared a sample which can be downloaded from below  

Sample: https://www.syncfusion.com/downloads/support/forum/165952/ze/DataGrid1283910709.zip  

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/columns/#column-template  

 

Please get back to us if you have further queries  

 

Regards, 

Vignesh Natarajan 

[KINS]

Thanks

[Vignesh Natarajan]

Hi Ismail,  

Thanks for the update.  

We request you to achieve your requirement using the solution provided in previous update.  

Kindly get back to us if you have further queries.  

Regards, 

Vignesh Natarajan 

[KINS]

It's works fine please check my comments in attached file

                           

                               

                               

                               

                                   

                                   

                                   

                                   

                                   

                                   

                                   

                                   

                                   

                                   

                                   

                                       

                                   

                                    

                                   

                                           

                                       

                           

                       

Attachment: 1_67a3c3d5.rar

[KINS]

Please check my code also

<div class="row">

                            <SfGrid DataSource="@gridData" Toolbar="@(new List<string>() { "Update" })" AllowPaging="true" AllowSelection="true">

                                <GridEvents OnBatchSave="BatchSaveHandler" TValue="UserGroupRights"></GridEvents>

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

                                <GridColumns>

                                    <GridColumn Field=@nameof(UserGroupRights.ModuleName) HeaderText="@GetResourceProvider.GetResourceValue(Resource, "lblModuleName")" Width="80" AutoFit="true"></GridColumn>

                                    <GridColumn Field=@nameof(UserGroupRights.FunctionName) HeaderText="@GetResourceProvider.GetResourceValue(Resource, "lblFunctionName")" Width="80" AutoFit="true"></GridColumn>

                                    <GridColumn Field=@nameof(UserGroupRights.ProcessName) HeaderText="@GetResourceProvider.GetResourceValue(Resource, "lblProcessName")" Width="80" AutoFit="true"></GridColumn>

                                    <GridColumn Field=@nameof(UserGroupRights.PageName) HeaderText="@GetResourceProvider.GetResourceValue(Resource, "lblPageName")" Width="80" AutoFit="true"></GridColumn>

                                    <GridColumn Field=@nameof(UserGroupRights.PageTypeName) HeaderText="@GetResourceProvider.GetResourceValue(Resource, "lblPageType")" Width="80" AutoFit="true"></GridColumn>

                                    <GridColumn Field=@nameof(UserGroupRights.AccessFlag) Uid="chkAccess" DisplayAsCheckBox="true" HeaderText="@GetResourceProvider.GetResourceValue(Resource, "lblRightsAccess")" Width="35" EditType="EditType.BooleanEdit" AutoFit="true"></GridColumn>

                                    <GridColumn Field=@nameof(UserGroupRights.AddFlag) Uid="chkAdd" DisplayAsCheckBox="true" HeaderText="@GetResourceProvider.GetResourceValue(Resource, "lblRightsAdd")" Width="35" EditType="EditType.BooleanEdit" AutoFit="true"></GridColumn>

                                    <GridColumn Field=@nameof(UserGroupRights.EditFlag) Uid="chkEdit" DisplayAsCheckBox="true" HeaderText="@GetResourceProvider.GetResourceValue(Resource, "lblRightsEdit")" Width="35" EditType="EditType.BooleanEdit" AutoFit="true"></GridColumn>

                                    <GridColumn Field=@nameof(UserGroupRights.DeleteFlag) Uid="chkDelete" DisplayAsCheckBox="true" HeaderText="@GetResourceProvider.GetResourceValue(Resource, "lblRightsDelete")" Width="35" EditType="EditType.BooleanEdit" AutoFit="true"></GridColumn>

                                    <GridColumn Field=@nameof(UserGroupRights.ReportFlag) Uid="chkReport" DisplayAsCheckBox="true" HeaderText="@GetResourceProvider.GetResourceValue(Resource, "lblRightsReport")" Width="35" EditType="EditType.BooleanEdit" AutoFit="true"></GridColumn>

                                    <GridColumn Field=@nameof(UserGroupRights.RequestFlag) Uid="chkRequest" DisplayAsCheckBox="true" HeaderText="@GetResourceProvider.GetResourceValue(Resource, "lblRightsRequest")" Width="35" EditType="EditType.BooleanEdit" AutoFit="true">

                                        <Template>

                                            @{

                                                var val = (context as UserGroupRights);

                                                <SfCheckBox CssClass="e-outline e-success" @[email protected] TChecked="bool" ValueChange="@((args)=>valueChange(args,val,"RequestFlag"))"></SfCheckBox>

                                            }

                                        </Template>

                                    </GridColumn>

                                    

                                    <GridColumn Field=@nameof(UserGroupRights.ApproveFlag) TextAlign="TextAlign.Center" DisplayAsCheckBox="false" Width="35" HeaderText="@GetResourceProvider.GetResourceValue(Resource, "lblRightsApprove")" AutoFit="true">

                                            <Template>

                                                @{

                                                    var val = (context as UserGroupRights);

                                                    <SfCheckBox CssClass="e-outline e-success" @[email protected] TChecked="bool" ValueChange="@((args)=>valueChange(args,val,"ApproveFlag"))"></SfCheckBox>

                                                }

                                            </Template>

                                        </GridColumn>

</GridColumns>

                            </SfGrid>

                        </div>

[KINS]

Please help...

[Vignesh Natarajan]

Hi Ismail,  

Query: “double check box rendered” 

We have analyzed the provided screenshot and we are validated the reported issue by preparing a sample using your code example. We are unable to reproduce the reported issue at our end. Kindly refer the below sample for you reference 

Sample: https://www.syncfusion.com/downloads/support/forum/165952/ze/DataGrid358255051.zip 

The reported issue might have occurred due to external styles applied to checkbox component. Also other than Template column, all other checkbox renders fine. So issue might have caused due to cssclass applied to CheckBox component (e-outline e-success)  So kindly share the following details to validate the reported issue at our end.  

1. Share the details about the e-outline e-success class. Ensure by removing those class name.
2. Have you applied any customization to Grid component. If yes, share the details.
3. Also share the details about the theme file and Syncfusion.Blazor NuGet package version details.
4. If possible share the issue reproducible sample or try to reproduce the reported issue in provided sample

Above requested details will be very helpful for us to validate the reported query and provide solution as early as possible.   

Regards, 

Vignesh Natarajan