Blazor show specific information OnRowClick (Ant Design)

Question

I would like a table to show me only information about the clicked row.

<Modal Title="@title"
   Visible="@_visible"
   OnOk="@HandleOk"
   OnCancel="@HandleCancel"
   Footer=null>
<Table TItem="Data" DataSource="@data" OnRowClick="OnSelectedRow">
    <AntDesign.Column @bind-Field="@context.dkId" Sortable />
    <AntDesign.Column @bind-Field="@context.dkUserName" Sortable>
        <a>@context.dkUserName</a>
    </AntDesign.Column>
    <AntDesign.Column Title="Enable" Field="@context.dkEnable">
        <Switch @bind-Field="@context.dkEnable"></Switch>
    </AntDesign.Column>
    <ActionColumn Title="Action">
        <Space Size=@("middle")>
            <SpaceItem>
                <Button OnClick="@(()=>{ _visible2 = true; })">Info</Button>
            </SpaceItem>
        </Space>
    </ActionColumn>
</Table>

<Modal Title="@title2"
   Visible="@_visible2"
   OnOk="@HandleOk2"
   OnCancel="@HandleCancel2"
   Style="width: 100%;"
   Footer=null>
  <Table TItem="Data" DataSource="@data" >
    <AntDesign.Column @bind-Field="@context.dkUserName" Sortable>
        <a>@context.dkUserName</a>
    </AntDesign.Column>
    <AntDesign.Column @bind-Field="@context.dkFirstName" Sortable>
        <a>@context.dkFirstName</a>
    </AntDesign.Column>
    <AntDesign.Column @bind-Field="@context.dkLastName" Sortable>
        <a>@context.dkLastName</a>
    </AntDesign.Column>
    <AntDesign.Column @bind-Field="@context.dkEmail" Sortable>
        <a>@context.dkEmail</a>
    </AntDesign.Column>
    <AntDesign.Column @bind-Field="@context.dkPhoneNumber" Sortable>
        <a>@context.dkPhoneNumber</a>
    </AntDesign.Column>
    <AntDesign.Column @bind-Field="@context.dkStatus" Sortable>
        <a>@context.dkStatus</a>
    </AntDesign.Column>
    <AntDesign.Column Title="Intercept" Field="@context.dkEnable">
        <Switch @bind-Field="@context.dkEnable"></Switch>
    </AntDesign.Column>
   </Table>

In my case when I click the button "Info" the table shows me information about all users. Unfortunately, on internet I couldn't find any information

Answer 1

To access row data, you need to use <ChildContent Context="xxx">. Otherwise you wouldn't know which row is being clicked. For example see : https://antblazor.com/en-US/components/table#components-table-demo-edit-row

In your specific case, it will be something like this

<Table TItem="Data" DataSource="@modal1data">
<ChildContent Context="data">
    <ActionColumn Title="Action">
        <Space Size=@("middle")>
            <SpaceItem>
                <Button @onclick="()=>showInfo(data.dkId)"> Info</Button>
            </SpaceItem>
        </Space>
    </ActionColumn>
</ChildContent>
</Table>

And then showInfo() needs to filter the data in your second modal so that it only shows that one clicked row. Something like:

void showInfo(int dataId){
    modal2data=modal1data.Where(x=>x.dkId==dataId).FirstOrDefault();
    _visible2 = true;
}