How to integrate Radzen components in Oqtane module

[Bhushan02-dot]

Hello,
@sbwalker , @markdav-is
I am trying to integrate Radzen Blazor components into an Oqtane module.
I followed this article: https://blazorhelpwebsite.com/ViewBlogPost/46
.

When I add simple components like inside my Oqtane module, it works fine.

But when I try to use the Radzen DialogService, it does not work.

in Oqtane modules, _Host.cshtml and index.html do not exist, and I am not sure where to add these services.

[leigh-pointer]

@Bhushan02-dot there are templates in the market place. Install the radzen template it will show you what you need to be doing.

[Bhushan02-dot]

Thank you for the reply.
@leigh-pointer
I tried installing the Radzen template from the marketplace. After installation restart application, but it does not show up in the Oqtane module list (unlike the Contact template, which is available as a module inside Oqtane after installation).

[leigh-pointer]

When you create a module from the module manager the template is available in the template list at the bottom of the window.

[Bhushan02-dot]

Hello,
@leigh-pointer
I created a new module using the Radzen Module Template (Radzen 5.7.10 + Oqtane 6) from the Module Manager. The module was generated successfully, but after restarting the application I get multiple errors related to Radzen and Syncfusion version mismatches.

It looks like the template is referencing different package versions than what my Oqtane solution is using.

Could you please:

1. Try this process on your local system with the latest Oqtane to see if the error can be reproduced.

2. Confirm the correct way to align Radzen versions when using this template?

Let me know if the NuGet packages in the module projects should be manually updated to match the Oqtane host?

Thank you!

[leigh-pointer]

You will need to manually update the radzen then right click on the package in visual studio, open location. Replace the module css and js files in your server project with the contents of staticresources folder.

[sbwalker]

Note that this is the exact scenario which the new Oqtane Application Template in 6.2 is intended to address. It allows developers to include UI component libraries in the standard way.

[sbwalker]

@Bhushan02-dot in Oqtane 6.2 you can create an Oqtane Application using the .NET CLI:

dotnet new install Oqtane.Application.Template
dotnet new oqtane-app -o MyCompany.MyProject 
cd MyCompany.MyProject

Open the MyCompany.MyProject.sln in Visual Studio.
Open the Client\Modules\MyModule\Index.razor component

Replace the content with:

@using Radzen
@using Radzen.Blazor

@namespace MyCompany.MyProject.MyModule
@inherits ModuleBase

<RadzenTheme Theme="Material" />
<RadzenComponents />
<RadzenButton Click="@ButtonClicked" Text="Hello World!" ButtonStyle="ButtonStyle.Primary"></RadzenButton>

@code {
    public override List<Resource> Resources => new List<Resource>()
    {
        new Script("_content/Radzen.Blazor/Radzen.Blazor.js")
    };

    void ButtonClicked()
    {
        AddModuleMessage("Button Clicked", MessageType.Info);
    }
}

Run the application and add the MyModule to a page. Click the Hello World button and you will see the following output:

[sbwalker]

@paulo-rico Ok, since you are using your own custom code, it is impossible for me to reproduce the problem or investigate further

[paulo-rico]

Understand. I'll dig further this end and post any findings that may be useful to the situation.

[paulo-rico]

OK, for anyone experiencing this, these are my findings and resolution.

The example given above does show how to include Radzen in your projects, but there are instances where you could get failures. Some of the Radzen components call Javascript functions in Radzen.Blazor.js. This is the library that is loaded using -

    public override List<Resource> Resources => new List<Resource>()
    {
        new Script("_content/Radzen.Blazor/Radzen.Blazor.js")
    };

This activates in OnAfterRenderAsync in the base class ModuleBase. I had a RadzenDataGrid component on my page and calls to database functions in the OnInitializeAsync event of my page. The rendering of my page was taking place before the library was loaded, so I was receiving an error "Could not find 'Radzen.preventArrows' ('Radzen' was undefined)". This is what I did to resolve the issue using the initial example as a template -

    @using Radzen
    @using Radzen.Blazor
    
    @namespace MyCompany.MyProject.MyModule
    @inherits ModuleBase
    
    <RadzenTheme Theme="Material" />
    <RadzenComponents />

    // here, we don't want to render the DataGrid until the library has been loaded. 'loading' will be set to false after the 
    // library has been loaded in OnAfterRenderAsync

    @if(loading==true)
    {
        <p>Loading...</p>
    }
    else
    {
        <RadzenDataGrid>
            _datagrid markup here..._
        </RadzenDataGrid>
    }

    @code {

        bool loading = true;
    
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            await base.OnAfterRenderAsync(firstRender);
    
            loading = firstRender;
            if(!loading)
            {
                // database access code goes here to set the data for the DataGrid
                StateHasChanged();
            }
        }

        public override List<Resource> Resources => new List<Resource>()
        {
            new Script("_content/Radzen.Blazor/Radzen.Blazor.js")
        };    
    }

[Bhushan02-dot]

@paulo-rico , @markdav-is encountered the error "Could not find 'Radzen.preventArrows' ('Radzen' was undefined)" and tried fixing it using the initial example as a template, but it didn’t help.

Did you get an answer for this?

[paulo-rico]

Hi @Bhushan02-dot

The example I gave worked a few months ago, but both Oqtane and Radzen have evolved significantly over the last month (both moving to Net 10), so that example may no longer work. Unfortunately, due to work commitments, I haven't been able to revisit this since those changes.

If I do get the chance to look at it, I'll post results here.

Many regards

Paul

[markdav-is]

I posted and answer to another thread about pulling radzen into your theme/module. I suggesting using ModuleInfo, but your approach should work fine as well.

#5657 (comment)