Select row on left click only

[Henning Krause]

Dear Support-Team, 

I have a grid which has a context menu and row selection enabled. When I right click a row to open the context menu, the row selection is triggered as well.

I want to separate both events: 

• Left click: Select a row and trigger row selection event.
• Right click: Open the context menu.

The following sample code demonstrates this behaviour: 

1. Select a row with a left click. The customer ID of the selected will be displayed above the grid.
2. Open the context menu on a row with a different customer ID. The value above the grid will change. I don't want this value to change.



@if(SelectedOrder != null)
    @SelectedOrder.CustomerID
<div class="container-fluid">
    <SfGrid DataSource="@Orders" AllowSelection="true" Height="600px" ContextMenuItems="@(new List<Object>() { "Copy", new ContextMenuItemModel { Text = "Copy with headers", Target = ".e-content", Id = "copywithheader" } })">
        <GridSelectionSettings Mode="SelectionMode.Row" Type="SelectionType.Single"></GridSelectionSettings>
        <GridEvents RowSelected="RowSelectHandler" TValue="Order"></GridEvents>
        <GridColumns>
            <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
            <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
            <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
            <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        </GridColumns>
    </SfGrid>
</div>


@code{
    public List<Order> Orders { get; set; }
    public Order SelectedOrder;


    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 75).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
        }).ToList();
    }


    public class Order
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }


    public void RowSelectHandler(RowSelectEventArgs<Order> args)
    {
        SelectedOrder = args.Data;
    }
}

[Rahul Narayanasamy]

Hi Henning, 

Greetings from Syncfusion. 

Query: Select row on left click only - Open the context menu on a row with a different customer ID. The value above the grid will change. I don't want this value to change. 

 

We have validated your query and you don’t want to change the selected CustomerID value while opening context menu(mouse right click). You can achieve this requirement by using onmousedown event and a boolean variable. Find the below code snippets and sample for your reference. 

 

@using Syncfusion.Blazor.Grids 

@using Syncfusion.Blazor.Navigations 

@if(SelectedOrder != null) 

    @SelectedOrder.CustomerID 

<div class="container-fluid"> 

    <SfGrid DataSource="@Orders" @onmousedown="HandleMouseDown" AllowSelection="true" Height="600px" ContextMenuItems="@(new List<Object>() { "Copy", new ContextMenuItemModel { Text = "Copy with headers", Target = ".e-content", Id = "copywithheader" } })"> 

        <GridSelectionSettings Mode="SelectionMode.Row" Type="SelectionType.Single"></GridSelectionSettings> 

        <GridEvents RowSelected="RowSelectHandler" TValue="Order"></GridEvents> 

        <GridColumns> 

            . . . 

        </GridColumns> 

    </SfGrid> 

</div> 

 

 

@code{ 

    public List<Order> Orders { get; set; } 

    public Order SelectedOrder; 

    . . . 

    public bool IsLeftClick { get; set; } 

    public void RowSelectHandler(RowSelectEventArgs<Order> args) 

    { 

        if(IsLeftClick){ 

            SelectedOrder = args.Data; 

        } 

    } 

    void HandleMouseDown(MouseEventArgs args) 

    { 

        if (args.Button == 2) 

        { 

            IsLeftClick = false;     //set false when mouse right click 

        } else if (args.Button == 0) 

        { 

            IsLeftClick = true;    //set true when mouse left click 

        } 

    } 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/170277/ze/SampleClk-1107757291  

Please let us know if you have any concerns. 

Regards, 

Rahul