Blazor Studio - Add Page dialog not working

Using the Razen IDE and some of my grids are not opening the add dialog correctly. I am using the database/table/forms scaffolding.

protected async Task AddButtonClick(MouseEventArgs args)
{
await DialogService.OpenAsync("Add Project", null);
await grid0.Reload();
}

Hi @rbolser,

The generated code looks correct. Can you confirm that the AddPriority.razor page isn't empty? Also check the output for any exceptions.

Here is the AddPriority Code.

@page "/add-priority"

Add Priority


Cannot save Priority






<RadzenTextBox style="display: block; width: 100%" @bind-Value="@priority.Name" Name="Name" />









using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.JSInterop;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Radzen;
using Radzen.Blazor;

namespace DCProjectsRadApp.Client.Pages
{
public partial class AddPriority
{
[Inject]
protected IJSRuntime JSRuntime { get; set; }

    [Inject]
    protected NavigationManager NavigationManager { get; set; }

    [Inject]
    protected DialogService DialogService { get; set; }

    [Inject]
    protected TooltipService TooltipService { get; set; }

    [Inject]
    protected ContextMenuService ContextMenuService { get; set; }

    [Inject]
    protected NotificationService NotificationService { get; set; }
    [Inject]
    public DCProjectsAppService DCProjectsAppService { get; set; }

    protected override async Task OnInitializedAsync()
    {
    }
    protected bool errorVisible;
    protected DCProjectsRadApp.Server.Models.DCProjectsApp.Priority priority;

    protected async Task FormSubmit()
    {
        try
        {
            await DCProjectsAppService.CreatePriority(priority);
            DialogService.Close(priority);
        }
        catch (Exception ex)
        {
            errorVisible = true;
        }
    }

    protected async Task CancelButtonClick(MouseEventArgs args)
    {
        DialogService.Close(null);
    }
}

}

Please format your code as it is not readable right now. Check the forum FAQ for tips.

Sorry about the formatting. I have also included screen shots of the child table working in the same razor page.


Hopefully the code below is better to read.

@page "/priorities"
<PageTitle>Priorities</PageTitle>
<div class="row" style="margin-bottom: 1rem">
    <div class="col-12 col-md-6">
        <RadzenText Text="Priorities" TextStyle="TextStyle.H3" TagName="TagName.H1" style="margin: 0" />
    </div>
    <div class="col-12 col-md-6 justify-content-start justify-content-md-end" style="display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem">
    <RadzenButton Icon="add_circle_outline" style="margin-bottom: 10px" Text="Add" Click="@AddButtonClick" Variant="Variant.Flat" />
    </div>
</div>
<div class="row" style="margin-bottom: 1rem">
    <div class="col-12">
        <RadzenTextBox Placeholder="Search ..." style="display: block; width: 100%" @oninput="@Search" />
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <RadzenDataGrid @ref="grid0" ColumnWidth="200px"  AllowFiltering="true" FilterMode="FilterMode.Advanced" AllowPaging="true" AllowSorting="true"
            Data="@priorities" Count=count LoadData=@Grid0LoadData  TItem="TestRadzenApp.Server.Models.DCProjectsApp.Priority" RowSelect="@EditRow" RowExpand=@GetChildData>
            <Columns>
                <RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Priority" Property="PriorityId" Title="PriorityId">
                </RadzenDataGridColumn>
                <RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Priority" Property="Name" Title="Name">
                </RadzenDataGridColumn>
                <RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Priority" Filterable="false" Sortable="false" Width="70px" TextAlign="TextAlign.Center">
                    <Template Context="priority">
                        <RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="delete" Size="ButtonSize.Medium"
                            Shade="Shade.Lighter" Variant="Variant.Flat"
                            Click=@(args => GridDeleteButtonClick(args, priority)) @onclick:stopPropagation="true" />
                    </Template>
                </RadzenDataGridColumn>
            </Columns>
                    <Template Context="priority">

                        <RadzenHeading Visible="@(priority != null)" Size="H1" Text="Projects" />
                        <RadzenButton Visible="@(priority != null)" Icon="add_circle_outline" style="margin-bottom: 10px" Text="Add" Click=@(args => ProjectAddButtonClick(args,priority)) />
                        <RadzenDataGrid ColumnWidth="200px" Visible="@(priority != null)" @ref=ProjectDataGrid AllowFiltering="true" FilterMode="Radzen.FilterMode.Advanced" AllowPaging="true" AllowSorting="true" 
                          Data="@priority?.Projects" TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project"  RowSelect="@(args => ProjectRowSelect(args, priority))">
                          <Columns>
                            <RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Property="ProjectId" Title="ProjectId">
                            </RadzenDataGridColumn>
                            <RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Property="ProjectName" Title="ProjectName">
                            </RadzenDataGridColumn>
                            <RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Property="ProjectDesc" Title="ProjectDesc">
                            </RadzenDataGridColumn>
                            <RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Property="DueDate" Title="DueDate">
                            </RadzenDataGridColumn>
                            <RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Property="RequesedBy" Title="RequesedBy">
                            </RadzenDataGridColumn>

                            <RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Property="DateCreated" Title="DateCreated">
                            </RadzenDataGridColumn>
                            <RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Property="DateUpdate" Title="DateUpdate">
                            </RadzenDataGridColumn>
                            <RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Property="IsDeleted" Title="IsDeleted">
                            </RadzenDataGridColumn>
                            <RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Property="Building.BuildingName" Title="Building">
                            </RadzenDataGridColumn>
                            <RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Property="Person.FirstName" Title="Person">
                            </RadzenDataGridColumn>
                            <RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Property="Priority.Name" Title="Priority">
                            </RadzenDataGridColumn>
                            <RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Property="ProjectType.Name" Title="ProjectType">
                            </RadzenDataGridColumn>
                            <RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Property="Status.Name" Title="Status">
                            </RadzenDataGridColumn>
                            <RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Filterable="false" Sortable="false" Width="70px" TextAlign="TextAlign.Center">
                                <Template Context="projectChild">
                                    <RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="close" Size="ButtonSize.Small" 
                                        Click=@(args => ProjectDeleteButtonClick(args, projectChild)) @onclick:stopPropagation="true" />
                                </Template>
                            </RadzenDataGridColumn>
                          </Columns>
                    </RadzenDataGrid>
                    </Template>        </RadzenDataGrid>
    </div>
</div>

Priorities.razor.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.JSInterop;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Radzen;
using Radzen.Blazor;

namespace TestRadzenApp.Client.Pages
{
    public partial class Priorities
    {
        [Inject]
        protected IJSRuntime JSRuntime { get; set; }

        [Inject]
        protected NavigationManager NavigationManager { get; set; }

        [Inject]
        protected DialogService DialogService { get; set; }

        [Inject]
        protected TooltipService TooltipService { get; set; }

        [Inject]
        protected ContextMenuService ContextMenuService { get; set; }

        [Inject]
        protected NotificationService NotificationService { get; set; }

        [Inject]
        public DCProjectsAppService DCProjectsAppService { get; set; }

        protected IEnumerable<TestRadzenApp.Server.Models.DCProjectsApp.Priority> priorities;

        protected RadzenDataGrid<TestRadzenApp.Server.Models.DCProjectsApp.Priority> grid0;
        protected int count;

        protected string search = "";

        protected async Task Search(ChangeEventArgs args)
        {
            search = $"{args.Value}";

            await grid0.GoToPage(0);

            await grid0.Reload();
        }

        protected async Task Grid0LoadData(LoadDataArgs args)
        {
            try
            {
                var result = await DCProjectsAppService.GetPriorities(filter: $@"(contains(Name,""{search}"")) and {(string.IsNullOrEmpty(args.Filter)? "true" : args.Filter)}", orderby: $"{args.OrderBy}", top: args.Top, skip: args.Skip, count:args.Top != null && args.Skip != null);
                priorities = result.Value.AsODataEnumerable();
                count = result.Count;
            }
            catch (System.Exception ex)
            {
                NotificationService.Notify(new NotificationMessage(){ Severity = NotificationSeverity.Error, Summary = $"Error", Detail = $"Unable to load Priorities" });
            }
        }    

        protected async Task AddButtonClick(MouseEventArgs args)
        {
            await DialogService.OpenAsync<AddPriority>("Add Priority", null);
            await grid0.Reload();
        }

        protected async Task EditRow(TestRadzenApp.Server.Models.DCProjectsApp.Priority args)
        {
            await DialogService.OpenAsync<EditPriority>("Edit Priority", new Dictionary<string, object> { {"PriorityId", args.PriorityId} });
            await grid0.Reload();
        }

        protected async Task GridDeleteButtonClick(MouseEventArgs args, TestRadzenApp.Server.Models.DCProjectsApp.Priority priority)
        {
            try
            {
                if (await DialogService.Confirm("Are you sure you want to delete this record?") == true)
                {
                    var deleteResult = await DCProjectsAppService.DeletePriority(priorityId:priority.PriorityId);

                    if (deleteResult != null)
                    {
                        await grid0.Reload();
                    }
                }
            }
            catch (Exception ex)
            {
                NotificationService.Notify(new NotificationMessage
                { 
                    Severity = NotificationSeverity.Error,
                    Summary = $"Error", 
                    Detail = $"Unable to delete Priority" 
                });
            }
        }

        protected TestRadzenApp.Server.Models.DCProjectsApp.Priority priority;
        protected async Task GetChildData(TestRadzenApp.Server.Models.DCProjectsApp.Priority args)
        {
            priority = args;
            var ProjectResult = await DCProjectsAppService.GetProjects(filter:$"PriorityId eq {args.PriorityId}", expand: "Building,Person,Priority,ProjectType,Status");
            if (ProjectResult != null)
            {
                args.Projects = ProjectResult.Value.ToList();
            }
        }

        protected RadzenDataGrid<TestRadzenApp.Server.Models.DCProjectsApp.Project> ProjectDataGrid;

        protected async Task ProjectAddButtonClick(MouseEventArgs args, TestRadzenApp.Server.Models.DCProjectsApp.Priority data)
        {
            var dialogResult = await DialogService.OpenAsync<AddProject>("Add Project", new Dictionary<string, object> { {"PriorityId" , data.PriorityId} });
            await GetChildData(data);
            await ProjectDataGrid.Reload();
        }

        protected async Task ProjectRowSelect(TestRadzenApp.Server.Models.DCProjectsApp.Project args, TestRadzenApp.Server.Models.DCProjectsApp.Priority data)
        {
            var dialogResult = await DialogService.OpenAsync<EditProject>("Edit Project", new Dictionary<string, object> { {"ProjectId", args.ProjectId} });
            await GetChildData(data);
            await ProjectDataGrid.Reload();
        }

        protected async Task ProjectDeleteButtonClick(MouseEventArgs args, TestRadzenApp.Server.Models.DCProjectsApp.Project project)
        {
            try
            {
                if (await DialogService.Confirm("Are you sure you want to delete this record?") == true)
                {
                    var deleteResult = await DCProjectsAppService.DeleteProject(projectId:project.ProjectId);

                    if (deleteResult != null)
                    {
                        await ProjectDataGrid.Reload();
                    }
                }
            }
            catch (System.Exception ex)
            {
                NotificationService.Notify(new NotificationMessage
                { 
                    Severity = NotificationSeverity.Error,
                    Summary = $"Error", 
                    Detail = $"Unable to delete Project" 
                });
            }
        }
    }
}

riority.cs

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Text.Json;
using System.Text.Json.Serialization;

namespace TestRadzenApp.Server.Models.DCProjectsApp
{
    [Table("Priority", Schema = "dbo")]
    public partial class Priority
    {
        [Key]
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public int PriorityId { get; set; }

        public string Name { get; set; }

        public ICollection<Project> Projects { get; set; }

    }
}

I have done some more research and found that the add-priority page is not working in the browser. Must be in the addpriority.razor or addpriority.razor.cs.

Thanks for the help.

@page "/add-priority"

@attribute [Authorize]

<PageTitle>Add Priority</PageTitle>
    <div class="col-md-12">
        <RadzenAlert Shade="Shade.Lighter" Variant="Variant.Flat" Size="AlertSize.Small" AlertStyle="AlertStyle.Danger" Visible="@errorVisible">Cannot save Priority</RadzenAlert>
        <RadzenTemplateForm TItem="TestRadzenApp.Server.Models.DCProjectsApp.Priority" Data="@priority" Visible="@(priority != null)" Submit="@FormSubmit">
            <div style="margin-bottom: 1rem" class="row">
                <div class="col-md-3">
                    <RadzenLabel Text="Name" Component="Name" style="width: 100%" />
                </div>
                <div class="col-md-9">
                    <RadzenTextBox style="display: block; width: 100%" @bind-Value="@priority.Name" Name="Name" />
                </div>
            </div>
            <div class="row">
                <div class="col d-flex justify-content-end" style="margin-top: 1rem">
                    <RadzenButton ButtonStyle="ButtonStyle.Primary" ButtonType="ButtonType.Submit" Icon="save" Text="Save" Style="margin-right: 0.5rem" Variant="Variant.Flat" />
                    <RadzenButton ButtonStyle="ButtonStyle.Light" Text="Cancel" Variant="Variant.Flat" Click="@CancelButtonClick"  />
                </div>
            </div>
        </RadzenTemplateForm>
    </div>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.JSInterop;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Radzen;
using Radzen.Blazor;

namespace TestRadzenApp.Client.Pages
{
    public partial class AddPriority
    {
        [Inject]
        protected IJSRuntime JSRuntime { get; set; }

        [Inject]
        protected NavigationManager NavigationManager { get; set; }

        [Inject]
        protected DialogService DialogService { get; set; }

        [Inject]
        protected TooltipService TooltipService { get; set; }

        [Inject]
        protected ContextMenuService ContextMenuService { get; set; }

        [Inject]
        protected NotificationService NotificationService { get; set; }
        [Inject]
        public DCProjectsAppService DCProjectsAppService { get; set; }

        protected override async Task OnInitializedAsync()
        {
        }
        protected bool errorVisible;
        protected TestRadzenApp.Server.Models.DCProjectsApp.Priority priority;

        [Inject]
        protected SecurityService Security { get; set; }

        protected async Task FormSubmit()
        {
            try
            {
                await DCProjectsAppService.CreatePriority(priority);
                DialogService.Close(priority);
            }
            catch (Exception ex)
            {
                errorVisible = true;
            }
        }

        protected async Task CancelButtonClick(MouseEventArgs args)
        {
            DialogService.Close(null);
        }
    }
}

Has anyone else had the same issues? Support has seemed to go a-wall on this subject. There is must be an error in their scaffolding.

Thanks

Hi @rbolser,

If you have a subscription you can send us your application to info@radzen.com. Other than that your code looks correct and there is probably an exception that you can find by debugging the application.

The error is in the RadzenTemplateForm component. For some reason the Visible=@(xxxx != null) is not allowing the form to show. If the Visible is removed the page errors on when the dialog is called. Not much information about why the Visible tag is needed when a textbox is bound. This is only happening when there is a parent/child form. Works fine on forms that don't have a parent/child.

Really thought you would want to know there is an issue. Thanks for the help

Debugging the application would reveal the cause of the problem. Also please note this is a community forum. For dedicated support options you can check our pricing page.

Was not really expecting help. Just thought someone would want to know there is an issue with the scaffolding. Figured it out and yes, I will be purchasing your software.