Open SidePanel in RadzenDataGrid

Radzen Studio Blazor WebAssembly
1

Hi,
I tried to implement Blazor.SidePanel component ; https://github.com/Append-IT/Blazor.Sidepanel 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 />

</Template>
@code{

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

image
image534×639 10 KB

The good result is :

image
image693×581 23.7 KB

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

2

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.

3

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>
        <RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" AlignItems="AlignItems.Center">
            <RadzenLabel Text="Show mask:" />
            <RadzenSwitch @bind-Value="@showMask" />
        </RadzenStack>
        <RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" AlignItems="AlignItems.Center">
            <RadzenLabel Text="Close on overlay click:" />
            <RadzenSwitch @bind-Value="@closeDialogOnOverlayClick" Disabled=@(!showMask) />
        </RadzenStack>
    </RadzenStack>
    <RadzenButton Text="Dialog on Side" ButtonStyle="ButtonStyle.Secondary" Click="@OpenSideDialog" />
</div>

@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
image

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

Have you some advise ?
Thanks in advance

4

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

5

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