Why do the two grids react if you use focusin on one grid when using two grids?

Question

I use blazor, syncfusion The code below is an example of a syncfusion grid. I want to know which grid was selected, or focused using the fuction directly in onfocusin. because, It's to decide whether to add a row to the master grid or a row to the detailed grid. now it is only once called at initialized, is not work 'onclick', 'onfocusin' What should I do? I want the format below. ex)

@page "/counter"

@code {
    public aaa bbb { get; set; } = new();
}

<SfSplitter Height="100%" SeparatorSize="3" Orientation="Syncfusion.Blazor.Layouts.Orientation.Horizontal">
    <SplitterPanes>
        <SplitterPane Size="50%" Collapsible="true" CssClass="p-1">
            <ContentTemplate>
                <SfGrid ID="master" @onclick="@bbb.grid_onfocusin("master")"
                        DataSource="@Orders"
                        GridLines="GridLine.Both" Width="100%"
                        AllowSorting="false" AllowRowDragAndDrop="false" AllowGrouping="false">
                    <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>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="50%" Collapsible="true" CssClass="p-1">
            <ContentTemplate>
                <SfGrid ID="detail" @onclick="@bbb.grid_onfocusin("detail")"
                        DataSource="@Orders"
                        GridLines="GridLine.Both" Width="100%"
                        AllowSorting="false" AllowRowDragAndDrop="false" AllowGrouping="false">
                    <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>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>



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


    public class aaa
    {
        public aaa()
        {

        }

        public string focusGrid { get; set; } = "";

        public EventCallback grid_onfocusin(string GridName)
        {
            focusGrid = GridName;
            Console.WriteLine("focusGrid: " + focusGrid);
            return EventCallback.Empty;
        }
    }

    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; }
    }
}

Answer 1

You have your syntax wrong - so the method is being called when the grid(s) render.

Change your onclick handlers like this:

@onclick="@( () => bbb.grid_onfocusin("master") )"

and

@onclick="@( () => bbb.grid_onfocusin("detail") )"

These will configure the grids to respond to being clicked as you expected.