Hi guys,
For the past hours I have been trying to learn why the Dialog & Notification are not working on the page below.
Info: new blazor web app visual studio template with rendermode auto, per page/component. I followed the official docs and the mainlayout and program.cs are adjusted.
@page "/users"
@rendermode InteractiveServer
@using IsdWebApp.Components.Models
@using IsdWebApp.Components.Dialogs
@using Microsoft.Extensions.Configuration
@using SqlDataAccess
@inject NotificationService NotificationService
@inject DialogService DialogService
@inject IDataAccess _data
@inject IConfiguration _config
@if (users == null)
{
All users
}
else
{
All users
<RadzenDataGrid @ref="grid" AllowColumnResize="true" AllowAlternatingRows="false" AllowSorting="true" PageSize="10" AllowPaging="true" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true"
Data="@users" TItem="UserModel" ColumnWidth="100px" SelectionMode="DataGridSelectionMode.Single" @bind-Value=@selectedEmployees>
<HeaderTemplate>
<RadzenCard Variant="Variant.Flat" Class="rz-my-1 rz-mx-1">
<RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Start" Gap="1rem" Class="rz-p-1">
<RadzenButton Text="Create" Click=@CreateUser Icon="add" ButtonStyle="ButtonStyle.Primary" Size="ButtonSize.Small" />
<RadzenButton Text="Edit" Click=@(args => EditUser(selectedEmployees[0].userID)) Icon="edit" ButtonStyle="ButtonStyle.Primary" Size="ButtonSize.Small" />
<RadzenButton Text="Delete" Click=@(args => DeleteUser(selectedEmployees[0].userID)) Icon="delete" ButtonStyle="ButtonStyle.Primary" Size="ButtonSize.Small" />
</RadzenStack>
</RadzenCard>
</HeaderTemplate>
<Columns>
<RadzenDataGridColumn TItem="UserModel" Property="userID" Title="ID" Width="25px" />
<RadzenDataGridColumn TItem="UserModel" Property="userFirstname" Title="First Name" />
<RadzenDataGridColumn TItem="UserModel" Property="userLastname" Title="Last Name" />
<RadzenDataGridColumn TItem="UserModel" Property="userRole" Title="Job Title" />
<RadzenDataGridColumn TItem="UserModel" Property="userEmail" Title="Email" />
<RadzenDataGridColumn TItem="UserModel" Property="userColor" Title="Color" />
</Columns>
</RadzenDataGrid>
}
@code {
IList selectedEmployees;
RadzenDataGrid grid;
IEnumerable users;
protected override async Task OnInitializedAsync()
{
//Get initial data, maybe later put in method
string sql = "select * from users";
users = await _data.LoadDataIEnumerable<UserModel, dynamic>(sql, new { }, _config.GetConnectionString("default"));
selectedEmployees = new List<UserModel>() { users.FirstOrDefault() };
}
public async Task CreateUser()
{
UserModel newUser = await DialogService.OpenAsync<DialogCreateUser>("Create a new user", null, new DialogOptions() { Width = "900px", Height = "512px", Resizable = true, Draggable = true });
if (newUser != null)
{
await RefreshGrid();
NotificationService.Notify(new NotificationMessage { Severity = NotificationSeverity.Success, Summary = "New user", Detail = newUser.userFirstname + " " + newUser.userLastname + " succesfully created", Duration = 6000, Style = "position: fixed; top: 90%; right: 1%; transform: translate(0%, 0%);", });
}
}
private async Task RefreshGrid()
{
string sql = "select * from users";
users = await _data.LoadDataIEnumerable<UserModel, dynamic>(sql, new { }, _config.GetConnectionString("default"));
await grid.Reload();
StateHasChanged();
}
private void EditUser(int userID)
{
NotificationService.Notify(new NotificationMessage { Severity = NotificationSeverity.Error, Summary = "Edit user clicked!", Detail = "Edit user is not yet supported" });
}
private async void DeleteUser(int userID)
{
string selectedUsername = selectedEmployees[0].userFirstname + " " + selectedEmployees[0].userLastname;
string sql = "delete from users where userID = @userID;";
await _data.SaveData(sql, new { userID = userID }, _config.GetConnectionString("default"));
await RefreshGrid();
NotificationService.Notify(new NotificationMessage
{
Severity = NotificationSeverity.Error,
Summary = "User deleted",
Detail = selectedUsername + " was deleted succesfully",
Style = "position: fixed; top: 90%; right: 1%; transform: translate(0%, 0%);",
Duration = 6000
});
}
}
Mainlayout.razor:
@inherits LayoutComponentBase
<RadzenHeader>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
<RadzenSidebarToggle Click="@(() => sidebar1Expanded = !sidebar1Expanded)" />
<RadzenLabel Text="Header" />
</RadzenStack>
</RadzenHeader>
<RadzenSidebar @bind-Expanded="@sidebar1Expanded">
<RadzenPanelMenu>
<RadzenPanelMenuItem Text="Home" Icon="home" Path="" />
<RadzenPanelMenuItem Text="Planning" Icon="event" Path="planning" />
<RadzenPanelMenuItem Text="Projects" Icon="work" Path="projects" />
<RadzenPanelMenuItem Text="Users" Icon="group" Path="users" />
</RadzenPanelMenu>
</RadzenSidebar>
<RadzenBody>
<div class="rz-p-4">
@Body
</div>
</RadzenBody>
@code {
bool sidebar1Expanded = true;
}
Program.cs (not the client, but I've also tried this without succes)
builder.Services.AddRadzenComponents();
builder.Services.AddScoped();
Also tested without adding
Any tips?
