Open SidePanel in RadzenDataGrid

I tried to implement Blazor.SidePanel component ; in new application which uses RadzenDataGrid.
I don't know that the problem come from Radzen but I want to be sure.

The SidePanel should be opened in right side of my screen. so As you see in picture below is put back left on corner.

<RadzenDataGrid @ref="grid" AllowAlternatingRows="false" AllowFiltering="true" AllowPaging="true" PageSize="10" AllowSorting="true"  EditMode="DataGridEditMode.Single" 
                ExpandMode="DataGridExpandMode.Single" SelectionMode="DataGridSelectionMode.Single" @bind-Value=@selectedDeveloper RowRender="@RowRender"
                Data="@developers" TItem="SuiviBE" RowUpdate="@OnUpdateRow" RowCreate="@OnCreateRow" Sort="@Reset" Page="@Reset" Filter="@Reset" ColumnWidth="200px">
   <Template Context="developers">

 <button @onclick="OpenCreateForm">Open Create Form</button>
        <button @onclick="Close">Close</button>

        <Codeblock Code="@codeblock1" />

        <hr />


private SidepanelComponent createSidepanel;

 private string codeblock1 => "<SidepanelComponent @ref=\"createSidepanel\" Title=\"Create\" SubTitle=\"Starship\">\n    <Create />\n</SidepanelComponent>";

    private void OpenCreateForm() { createSidepanel.Open(); }


The SidePanel should be opened in right side of my screen. so As you see in picture below is put back left on corner

The good result is :

Have you any suggestions how I can fix this problem?
Thanks in advance

We are not familiar with that component and cannot comment on it. You can however use the Radzen.Blazor side dialog (scroll to the bottom to see the demo) which should work as expected.

Hi, thanks to your information. Sure it will be better if I use Radzen.Blazor side.

I tried to implement your exemple

@inject DialogService DialogService

<div class="rz-p-12 rz-text-align-center">
    <RadzenStack Orientation="Orientation.Horizontal" Gap="1rem" AlignItems="AlignItems.Center" Class="rz-p-4 rz-mb-6 rz-border-radius-1" Style="border: var(--rz-grid-cell-border);" Wrap="FlexWrap.Wrap">
        <RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" AlignItems="AlignItems.Center">
            <RadzenLabel Text="Position:" />
            <RadzenSelectBar @bind-Value="@position" TextProperty="Text" ValueProperty="Value"
                            Data="@(Enum.GetValues(typeof(DialogPosition)).Cast<DialogPosition>().Select(t => new { Text = $"{t}", Value = t }))" Size="ButtonSize.Small" />
        <RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" AlignItems="AlignItems.Center">
            <RadzenLabel Text="Show mask:" />
            <RadzenSwitch @bind-Value="@showMask" />
        <RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" AlignItems="AlignItems.Center">
            <RadzenLabel Text="Close on overlay click:" />
            <RadzenSwitch @bind-Value="@closeDialogOnOverlayClick" Disabled=@(!showMask) />
    <RadzenButton Text="Dialog on Side" ButtonStyle="ButtonStyle.Secondary" Click="@OpenSideDialog" />

@code {
    DialogPosition position;
    bool closeDialogOnOverlayClick;
    bool showMask;

    async Task OpenSideDialog()
        await DialogService.OpenSideAsync<DialogSideContent>("Side Panel", options: new SideDialogOptions { CloseDialogOnOverlayClick = closeDialogOnOverlayClick, Position = position, ShowMask = showMask });

The DialogSideContent is not recognized

Plus, in your example you put some UI in side panel that I did'ent find

Have you some advise ?
Thanks in advance

DialogSideContent is the page you want to display inside the dialog.

It's clear thanks.
Last question about that is it possible to increase the size of the panel?