How to prevent RowSelected event for particular columns In blazor sfgrid

[Ashwini Shilvant]

Hello,

I am using Sfgrid in this I have Columns and In this I have column with checkbox and textbox. In this I click the checkbox and edit the stock from textbox and after doing this there is save button to save all list changes.but when I check checkbox or if I click textbox then Rowselected event triggers and this redirect to view page .So is there any way to prevent this event on this particular column ?? I have attached the screenshot for reference 

Attachment: Sfgrid_a89f8c04.rar

[Vignesh Natarajan]

Hi Ashwini,  

 

Greetings from Syncfusion support.  

 

Query: “But when I check checkbox or if I click textbox then Rowselected event triggers and this redirect to view page” && So is there any way to prevent this event on this particular column ?? 

 

You can prevent the RowSelected event from triggered by enabling the Cancel argument of the RowSelecting event of Grid. Before RowSelected event, RowSelecting event will be triggered and in this event you can prevent the default action. But from your code example, we suspect that you have render checkbox in a column using Type=”checkbox”. If yes, then on changing the value of checkbox, will not be updated in Grid datasource. Can you please share more details about your requirement.  

 

1. Do you want to enable the textbox on clicking the checkbox?
2. Have you defined Field property to checkbox column.
3. Do you want to update the checkbox value in Grid datasource?.
4. Share the Grid rendering code example.

 

Requested details will be helpful for us to validate the reported issue at our end and provide solution as soon as possible.  

 

Regards, 

Vignesh Natarajan 

[Ashwini Shilvant]

Hi Vignesh,

 More details provided below please check it.

1.Do you want to enable the textbox on clicking the checkbox? 

Ans: No both are different things  

2.Have you defined Field property to checkbox column?
Ans: No I have used 'HeaderTemplate'.

3.Do you want to update the checkbox value in Grid datasource?
Ans:Yes because on save button I want update the values In database.

4.Share the Grid rendering code example.

Ans:I have attched the code sample. 

Attachment: Index_8c44a838.rar

[Vignesh Natarajan]

Hi Ashwini,  

 

Thanks for sharing the requested details.  

 

Query: “So is there any way to prevent this event on this particular column ?? I” 

 

We have prepared a sample using your code example and we are able to reproduce the reported behavior while clicking on the checkbox and input box. By default RowSelected event will be triggered on clicking the Grid row. It can be prevented using RowSelecting event of the Grid (i.e) that too based on record details only we can prevent the RowSelected event from triggering.  But since you want to prevent RowSelected event from triggering based on column. We suggest you follow the below suggestion to achieve your requirement.  

 

We have defined empty RowSelecting event to grid and rendering the template column inside a div with @onclick event bound to it. And in the RowSelected event we have navigated to another page based on a Boolean variable.  

Refer the below code example  

 

<SfGrid DataSource="@medications" AllowPaging="true" AllowSorting="true" AllowSelection="true"> 

    <GridEvents RowSelected="@(async(args)=>await RowSelectHandler(args))" RowSelecting="Selecting" TValue="Medication"></GridEvents> 

    <GridPageSettings PageSize="10"></GridPageSettings> 

    <GridColumns> 

        . . . . . .. . . . . .  

        <GridColumn Field=@nameof(Medication.BrandName) HeaderText="Brand Name"></GridColumn> 

        <GridColumn> 

            <HeaderTemplate> 

                <div> 

                    <SfCheckBox @bind-Checked="_checkAll"></SfCheckBox> 

                </div> 

            </HeaderTemplate> 

            <Template> 

                @{ 

                    var med = (context as Medication); 

                    <div @onclick="PreventSelection"> 

                        <SfCheckBox @onchange="@(async()=>await CheckInclude(med))" @bind-Checked="(context as Medication).Include"></SfCheckBox> 

                    </div> 

                } 

            </Template> 

        </GridColumn> 

        <GridColumn HeaderText="Stock"> 

            <Template> 

                <div> 

                    @{ 

                        var medication = (context as Medication); 

                        <div @onclick="PreventSelection"> 

                            <input class="form-control" @bind="@medication.Stock" /> 

                        </div> 

                    } 

  

                </div> 

            </Template> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

  

@code{ 

    SfGrid<Medication> Grid { get; set; } 

    private bool _checkAll; 

    private bool CanNavigate = true; 

    public List<Medication> medications { get; set; } 

    public void Selecting(Syncfusion.Blazor.Grids.RowSelectingEventArgs<Medication> Args){}    

    public async Task PreventSelection() 

    { 

CanNavigate = false; // diable the boolean to prevent from navigating

    } 

    public async Task RowSelectHandler(RowSelectEventArgs<Medication> args) 

    { 

        if (CanNavigate) 

        { 

            Manager.NavigateTo("/Counter"); 

        } 

        else 

        { 

            await Task.Delay(100);            CanNavigate = true; // enable to boolean to navigate to other page on clickig the record next time            await Grid.ClearRowSelection(); // to clear the selection

        } 

    } 

 

 

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

 

Sample: https://www.syncfusion.com/downloads/support/forum/154004/ze/DataGrid-453209175  

 

If you are facing any difficulties in above solution, kindly get back to us with more details.  

 

Regards, 

Vignesh Natarajan