1. Home
  2. Forum
  3. Blazor
  4. [Solved] How to prevent RowSelected-Event when clicking checkbox.

[Solved] How to prevent RowSelected-Event when clicking checkbox.

I need a checkbox in every row of my grid in order to set a flag (not for selecting).
In addition i need to be able to select a single row by clicking it (but not by clicking the checkbox).

My problem is that clicking checkboxes also triggers the selection, what ia m trying to avoid.
I already tried to add my own checkboxes with a column template and added the @onclick:stopPropagation="true" property, but this does not work.

7 Replies 1 reply marked as answer
JP Jeevakanth Palaniappan Syncfusion Team June 1, 2021 04:46 PM UTC

Hi Sascha, 
 
Greetings from Syncfusion support. 
 
Query 1: Clicking checkboxes also triggers the selection 
 
We have checked your query and we suspect that you have set the Column’s Type as Checkbox to render the checkbox in the column. But if you set like this, by default it will behave as a checkbox selection feature. So we suggest you to render the checkbox in the Grid Column template as like below and then do the modification in ValueChange event handler based on your requirement. 
 
Also we suggest you to refer the below documentation to know the difference between the Boolean column type and Checckbox column type. 
 
        <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> 
 
@code{ 
 
    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; 
    } 
 
} 
 
Checkbox Selection: 
 
 
Incase you are still facing the issue then kindly share us the below details, 
 
  1. Provide us more information on your query.
  2. Kindly share us the issue reproducing sample or reproduce the issue in the above provided sample.
  3. Kindly share us the video demo showing the reported problem.
 
The above details will be helpful for us to validate the reported problem from our side. 
 
Query 2: i need to be able to select a single row by clicking it (but not by clicking the checkbox). 
 
If you render the checkbox in the column template without defining the GridColumn Type as Checkbox, then will be able to select the row by clicking on the row and not by clicking on the checkbox. 
 
Regards, 
Jeevakanth SP. 


SS Sascha Siebrecht June 2, 2021 01:57 PM UTC

Hi Jeevakanth,

thanks for your response.

Clicking the checobox actually triggers the RowSelected- and RowDeselected-Event.

You can also see this behaviour if you select a row first and click any checkbox from another row, in your sample application.
After you clicked the checkbox the previously selected row gets deselected.

That way you will always lose the current selection.

I also have Methods registered to the RowSelected- and RowDeselected-Event which i dont want to be executed by clicking the checkbox

JP Jeevakanth Palaniappan Syncfusion Team June 3, 2021 10:01 AM UTC

Hi Sascha, 

We have checked the issue by specifying the onclick:stopPropagation as true to the parent element of checkbox. Now, the RowSelected event is triggered only when we click on the row’s and it is not triggered when we click on the checkbox. So we suggest you to set the below changes in your code to prevent the events. We have attached the video demo and the validated sample for your reference. 

        <GridColumn Field=@nameof(Order.Verified) HeaderText="Verified" TextAlign="TextAlign.Center" DisplayAsCheckBox="true" Width="120"> 
            <Template> 
                @{ 
                    var val = (context as Order); 
                                <div @onclick:stopPropagation="true"> 
                                    <SfCheckBox CssClass="e-outline e-success" @bind-Checked=@val.Verified TChecked="bool" ValueChange="@((args)=>valueChange(args,val))"></SfCheckBox> 
                                </div>                     
                } 
            </Template> 
        </GridColumn> 



Please get back to us if you have any other queries. 

Regards, 
Jeevakanth SP. 


Marked as answer
SS Sascha Siebrecht June 3, 2021 01:06 PM UTC

Hey Jeevakanth,

this way it works. Thank you for your help.

I first thought i could specify the onclick:stopPropagation for the checkbox directly.
Now i know, wrapping a div around does the trick.

Thank you very much and have a nice day.

Regards,
Sascha

JP Jeevakanth Palaniappan Syncfusion Team June 4, 2021 05:04 AM UTC

Hi Sascha, 

You are most welcome. Please get back to us if you have any other queries. 

Regards, 
Jeevakanth SP. 


AR Andy Richard January 16, 2023 04:01 PM UTC

This doesn't work for me. I get an error in the markup on ValueChange: 'The delegate type could not be inferred'. I'm using Syncfusion Blazor version 20.4.0.43


MS Monisha Saravanan Syncfusion Team January 17, 2023 01:26 PM UTC


Hi  Andy,


Greetings from Syncfusion.


We have upgraded the sample to the mentioned version (20.4.43). But we could not able to replicate the reported issue at our end.


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BLAZOR~1-1767902782.zip


If you still face difficulties or if you have further queries then kindly share the below details to proceed further at our end.


  1. Share us the entire code snippet.
  2. Share us the video demonstration of the issue.
  3. If possible kindly share us a simple issue reproduceable sample or try to reproduce the reported issue on the above mentioned sample.


Above requested details will be very helpful in validating the reported query at our end and provide solution as early as possible.


Regards,

Monisha


Loader.
Up arrow icon