Prevent RowSelected event in specific column.

Question

Hello,

I have a sfgrid with 4 columns. In 4th column i have a custom button that show a dialog. The problem is: when i click in my custom button i trigger the RowSelect event of my grid that open a page with detail( i bind a event to RowSelected in gridevents).I need to prevent the row selection event when i click in the specif column of the button. Is there a way to do it?

Vignesh Natarajan · Answer

Hi Alessandro, Thanks for contacting Syncfusion support. Query: “I need to prevent the row selection event when i click in the specif column of the button. Is there a way to do it?” We suggest you to achieve your requirement using RowSelecting event of Grid by enabling the Args.Cancel property of event argument. RowSelecting event will be triggered before selecting a record. In the event argument you can get record details. Based on a condition you can disable the selection. Refer the below code example. @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons @code{ public List Orders { get; set; } public void RowSelectingHandler(RowSelectingEventArgs args) { if (args.Data.OrderID == 1004) //we ahve prevented the row selection for order id --1004 { args.Cancel = true; //enable this to prevent the row selection } } public void RowSelectedHandler(RowSelectEventArgs Args) { } } For your convenience we have prepared a sample which can be downloaded from below Sample: https://www.syncfusion.com/downloads/support/forum/153926/ze/DataGrid-1612868800 Refer our UG documentation for your reference https://blazor.syncfusion.com/documentation/datagrid/events/#rowselecting Kindly get back to us, if you have any other queries. Regards, Vignesh Natarajan

Alessandro Giri · Answer

Hello,thanks for reply. This doesn't solve my problem. The RowSelecting event conflicts with the OnClick event of my button. In fact when i press my button firstly i trigger the rowselecting even.My goal is not to trigger the rowselecting event if I press my button.

Alessandro Giri · Answer

up

Vignesh Natarajan · Answer

Hi Alessandro,  
 
Thanks for the update.  
 
Query: “The RowSelecting event conflicts with the OnClick event of my button. In fact when i press my button firstly i trigger the rowselecting even.” 
 
From your query we understand that you are facing issue with Button click event and RowSelected event of the Grid. As we are quite unclear about your requirement, we need some more details from you,regarding your requirement. So kindly share the following details.  
 

Kindly share the details how you are displaying button inside the Grid (either using Template column or using GridCommmandColumns)?
Are you using Syncfusion button or Html button inside the Grid column?
Share the Grid rendering code example with button click event. 
Also share more details about your requirement. 
You have also mentioned that you are triggered the RowSelecting event of Grid using a button click. Can you please share more details on this. How you are triggered the Grid RowSelecting externally?
 
Requested details will be very helpful for us to validate the reported query at our end and provide solution as soon as possible.  
 
Regards, 
Vignesh Natarajan

Alessandro Giri · Answer

1) "Kindly share the details how you are displaying button inside the Grid (either using Template column or using GridCommmandColumns)?"

i use Template column

2)"Are you using Syncfusion button or Html button inside the Grid column?"

Syncfusion button

3)Share the Grid rendering code example with button click event.

<GridColumn HeaderText="Stato" Type="ColumnType.String" TextAlign="TextAlign.Center" Width="30" AutoFit="true">
                    <Template>
                        @{
                            var doc = (context as DocTesViewModel);
                            <SfButton CssClass="e-link" @onclick="async (args) => await ShowDocCols(doc)">@doc.DocStato</SfButton>
                        }
                    </Template>

</GridColumn>

private async Task ShowDocCols(DocTesViewModel doc)
        {
            try
            {
                var docKey = new DocKey()
                {
                    Az = doc.DocTes.Az,
                    Anno = doc.DocTes.Anno,
                    Tipo = doc.DocTes.Tipo,
                    Serie = doc.DocTes.Serie,
                    Nr = doc.DocTes.Nr
                };

                var docCols = await OneWeb.GetDocCols(docKey);
                var docTesViewModels = await CreateDocTesViewModels(docCols);
                await dialogDocs.ShowDocCols(docTesViewModels, doc);
            }
            catch (Exception ex)
            {
                throw;
            }
        }

4)You have also mentioned that you are triggered the RowSelecting event of Grid using a button click. Can you please share more details on this. How you are triggered the Grid RowSelecting externally?

"You have also mentioned that you are triggered the RowSelecting event of Grid using a button click^".

^{No, with the button i trigger my event to open a dialog.With Grid RowSelecting event i change page.}

^{My Code:}

^{<GridEvents TValue="DocTesViewModel" RowSelecting="(args) => ShowDocRigs(args)"></GridEvents>}

^{<GridSelectionSettings Mode="SelectionMode.Row" />}

^{protected void ShowDocRigs(RowSelectingEventArgs<DocTesViewModel> cellSelectEventArgs)
{
var doc = cellSelectEventArgs.Data;
Navigation.NavigateTo($"document/{PageId.Documenti}/{doc.DocTes.Az}/{doc.DocTes.Tipo}/{doc.DocTes.Anno}/{doc.DocTes.Serie}/{doc.DocTes.Nr}");
}}

5)Also share more details about your requirement.

When i click my button i want only trigger my event (ShowDocCols) to show the dialog. But when i press button i don't trigger the right event but RowSelectingEvent (ShowDocRigs).

Is There a way to prevent the RowSelecting event if i press my Button?

Alessandro Giri · Answer

UP

Vignesh Natarajan · Answer

Hi Alessandro,

Thanks for sharing the details.

Query: “No, with the button i trigger my event to open a dialog.With Grid RowSelecting event i change page.”

From your query we understand that you want to navigate to another page on selecting a record and open a dialog on clicking the button in the column. We suggest you to achieve your requirement RowSelected event of the Grid instead of RowSelecting event of the Grid. (i.e.) We suggest you to move the code block of RowSelecting event to RowSelected event and define empty RowSelecting event handler.

Because Button click event will be triggered before RowSelected event of the Grid. So action inside the RowSelected event can be performed using a Flag (Boolean) variable which can be handled in button click event.

Refer the below code example.

<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true"> <GridEvents TValue="Order" RowSelecting="RowSelecting" RowSelected="(args) => ShowDocRigs(args)"></GridEvents> <GridSelectionSettings Mode="SelectionMode.Row"></GridSelectionSettings> <GridColumns>. . .. . . . . <GridColumn HeaderText="Stato" Type="ColumnType.String" TextAlign="TextAlign.Center" Width="75" AutoFit="true"> <Template> @{ var doc = (context as Order); <SfButton CssClass="e-link" @onclick="async (args) => await ShowDocCols(doc)">@doc.CustomerID</SfButton> } </Template> </GridColumn> </GridColumns></SfGrid> <SfDialog @bind-Visible="@IsVisible" ShowCloseIcon="true" Width="250px" IsModal="true">…</SfDialog> @code{ private bool IsVisible { get; set; } = false; SfGrid<Order> Grid { get; set; } public bool PreventSelection = true; // boolean variable to allow navigation to another page. public List<Order> Orders { get; set; } public async void RowSelecting(RowSelectingEventArgs<Order> Args){} private void OnOverlayclick(object arg) { this.IsVisible = false; } protected async void ShowDocRigs(RowSelectEventArgs<Order> cellSelectEventArgs) { if (PreventSelection) // navigating based on boolean variable { var doc = cellSelectEventArgs.Data; Navigation.NavigateTo("/counter"); } else { PreventSelection = true; } } private async Task ShowDocCols(Order doc) { PreventSelection = false; // disable the variable to prevent from navigation. try { IsVisible = true; } catch (Exception ex) { throw; } }}

For your convenience we have prepared a sample using above solution. Kindly download the sample from below

Sample: https://www.syncfusion.com/downloads/support/forum/153926/ze/DataGrid_-_Updated-1082354450

Refer our UG documentation for your reference

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

Regards,

Vignesh Natarajan