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

I'm not familiar with this component that you're using, but shouldn't the event handler for OnRowClick take a parameter that has a reference to the row in the table that was clicked? You don't show your implementation of `OnSelectedRow` so it's nearly impossible to offer you any advice. — Lex, Jun 15 '22 at 15:04
' void OnSelectedRow(RowData row) { AppData.selectedTableRow = row.Data.dkId; Console.WriteLine($"row {row.Data.dkId} was clicked."); }' — Bimmer, Jun 15 '22 at 15:36
So you *are* able to determine the row that was clicked. Totally not understanding your question then. Seems like you have all the pieces to the puzzle, now you just need to put it together. — Lex, Jun 15 '22 at 17:34

score 1 · Accepted Answer · answered Aug 16 '22 at 16:44

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

Blazor show specific information OnRowClick (Ant Design)

1 Answers1