Need OnRecordClick behaviour for Grid Template columns

I have a Grid which has an OnRecordClick event handler setup and this works well for normal non-template columns but does not trigger for template columns.

I have tried adding an OnClick handler to a <div> within the <Template> and this does trigger but the problem is that the handler only gets triggered when you click on the items in the cell and not in the blank area which surrounds them which is different behaviour to how OnRecordClick works.

Is there a way to enable the OnRecordClick to work for Template columns?

Thanks.

    <SfGrid DataSource="@_VM" Height="675" Width="100%" RowHeight="45" EnableVirtualization="true" AllowSelection="true" 
            EnableHover="false" AllowFiltering="true" AllowSorting="true">
        <GridSelectionSettings Type="SelectionType.Multiple" CheckboxOnly="true" PersistSelection="true"></GridSelectionSettings>
        <GridFilterSettings Type ="Syncfusion.Blazor.Grids.FilterType.CheckBox">
            <GridFilterColumns>
                <GridFilterColumn Field="StatusName" MatchCase=false Operator="Syncfusion.Blazor.Operator.Equal" Predicate = "or" Value = "@("Active")" ></GridFilterColumn>
                <GridFilterColumn Field="StatusName" MatchCase=false Operator="Syncfusion.Blazor.Operator.Equal" Predicate = "or" Value = "@("Draft")" ></GridFilterColumn>
            </GridFilterColumns>            
        </GridFilterSettings>
        <GridPageSettings PageSize="80"></GridPageSettings>
        <GridEvents OnRecordClick="RecordClickHandler" TValue="ScenarioVM"></GridEvents>
        <GridColumns>
            <GridColumn Field=@nameof(ScenarioVM.Description) HeaderText="Description" FilterSettings="@(new FilterSettings{Type = Syncfusion.Blazor.Grids.FilterType.Menu})" ClipMode="ClipMode.EllipsisWithTooltip">
                <Template>
                    @{
                        var scenario = (context as ScenarioVM);
                        <div @onclick="@(e=>ViewScenario(@scenario.ScenarioId))">
                            <span>@scenario.Description 
                                @if(scenario.Status==(int)ScenarioStatus.StatusId.Draft) {
                                    <span class="badge badge-pill badge-info">@scenario.StatusName</span>
                                }
                                else @if(scenario.Status==(int)ScenarioStatus.StatusId.Deprecated) {
                                    <span class="badge badge-pill badge-danger">@scenario.StatusName</span>
                                }
                            </span>
                        </div>
                    }
                </Template>
            </GridColumn>




3 Replies 1 reply marked as answer

JP Jeevakanth Palaniappan Syncfusion Team August 10, 2021 06:32 AM UTC

Hi Mike, 

Greetings from Syncfusion support. 

We have validated your query based on the provided code snippet but unfortunately we are unable to reproduce the reported problem from our end. Please find the validated sample below for your reference. 



If you are still facing the reported problem then kindly share us the below details, 

  1. Share us the Syncfusion NuGet version details.
  2. Kindly share us the video demo showing the reported problem.
  3. Share us the runnable issue reproducing sample or reproduce the issue in the above provided sample.

The above requested details will be helpful for us to validate the reported problem and to provide you with a better solution as early as possible. 

Regards, 
Jeevakanth SP. 



MF Mike Freeman August 10, 2021 08:30 AM UTC

Hi  Jeevakanth,


Thanks for the sample.


After comparing the sample with my code, I realised that my code contained 'AllowSelection' and 'GridSelectionSettings' which were not needed and were a remnant from a copy and paste. Once I removed these, the RecordClick handler then triggered as expected.


Thanks for your help in finding the solution.


Mike.


Marked as answer

JP Jeevakanth Palaniappan Syncfusion Team August 11, 2021 06:04 AM UTC

Hi Mike, 

We are glad that the reported problem is resolved. Get back to us if you have any other queries. 

Regards, 
Jeevakanth SP. 


Loader.
Up arrow icon