Radzen DataGrid With Popup

Radzen.Blazor Components
1

I am attempting to do a popup within a datagrid but the positioning is always displaying at the bottom of the last button. I am aware I can use the split button which does appear to work but the left hand side of the text/icon is taking up additional width space in the grid that I don't want to use.

.worklog-datagrid-popup {
    display: none;
    position: absolute;
    overflow: hidden;
    height: max-content;
    width: 150px;
    border: var(--rz-panel-border);
    background-color: var(--rz-panel-background-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    border-radius: var(--rz-border-radius);
}

.worklog-datagrid-popup .rz-stack {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.worklog-datagrid-popup .rz-menu {
    background-color: transparent;
    border: var(--rz-panel-border);
    text-align: center;
    --rz-menu-top-item-hover-background-color: var(--rz-body-background-color);
}

<Radzen.Blazor.Rendering.Popup @ref=popup class="worklog-datagrid-popup">
    <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Center">
        <RadzenMenu style="width: 100%;">
            <RadzenMenuItem Text="Edit" Style="width: 100%;" />
        </RadzenMenu>
    </RadzenStack>
</Radzen.Blazor.Rendering.Popup>

<RadzenDataGridColumn Width="30px" Pickable="false" Resizable="false" Filterable="false" Sortable="false" Groupable="false" AllowCheckBoxListVirtualization="false" UniqueID="PopupMenu">
    <Template>
        <RadzenButton @ref="button" Icon="more_vert" Size="ButtonSize.ExtraSmall" class="rz-border-radius-10" Style="color: black; background-color: transparent;" Click="@(args => popup.ToggleAsync(button.Element))" />
    </Template>
</RadzenDataGridColumn>

I know it's around the button reference or obtaining and the position of the clicked button.

2

You cannot use single reference for multiple buttons - the last always will win.

3

Hi Enchev

What would then be a solution for have multi button references so the popup opens under the correct button

if you could shed some light on it, would be amazing

4

You cannot keep the reference in a single variable, you need maybe a dictionary where each data items maps to correct reference.