Using Self-created Components

Radzen Blazor Studio
1

Hi,

I'm experimenting with creating my own components using Radzen Blazor Studio and then inserting them using RBS's 'Add Component' option.

Can you please clarify what exactly causes a file I create to appear in the list of Components? Is it that the file contains both markup and a @code block? I ask because initially I could not make my file appear, but then it seemsed to after I added a code block.

Also, if I create a Page to use as a component, is there a way to make it not use the MainLayout without doing what I've currently done, which is to create an empty alternative layout?

Cheers
Reg

2

Hi, any thoughts on this one please?

3

Hi @SolutionJ,

What file doesn't appear in the components toolbox? Can you provide more info? Where do you create the file, what contents? There isn't any imposed limitation for the presence of a @code{} block.

You can use the Layout switch from the toolbar.

4

Hi Korchev,

I created a Page in the Pages folder, the contents initially were:

@page "/DGTicketList/{Potype:alpha}"

@using TBi.Services;
@using TBi.Data.Models;

@TicketType














<RadzenSwitch @bind-Value="@swopen" Name="swOpen">



<RadzenSwitch @bind-Value="@swclosed" Name="swClosed">


<RadzenDataGrid Data="@tickets" TItem="Ticket" Density="Radzen.Density.Compact" AllowColumnResize="true" AllowFiltering="true" AllowPaging="true" AllowPickAllColumns="false" AllowSorting="true" ColumnWidth="" @bind-Value=@selectedTickets PagerAlwaysVisible="true" ShowPagingSummary="true">










But when I tried to insert this into another Page, it wasn't listed under Components. I add an @Code block and then it seemed to appear, although I've just checked again and it isn't appearing now...

image
image266×520 12.8 KB

Re the Layout switch, my question is, do you have to select a layout, there doesn't seem to be a way to elave that option empty?

Cheers
Reg

5

You can try removing @page from the component which is not a page.

I don't get that. Pages use the default layout. You can disable it during design time via the Layout switch.

By the way why are you trying to insert a page with route into another page? I haven't seen this as a requirement before.

6

I don’t want to disable it during design time, I want it to be ignored when the page is rendered.

I think I hd to create it as a Page in order to use your IDE to add components into what will then be my component, bit maybe I’m wrong about that?

7

Pages should not be used in other pages. Shared components should be defined outside of the Pages directory - in the Components directory if using .NET 8.

I have recorded a demo.
components

8

Ok, thanks, I will rework things tomorrow.

9

Morning Korchev,

So, I had not understood that the Layout switch suppresses the rendering of a layout when running as well as in design mode, so that one's cleared up thanks.

I have reworked my component - removed the @Page directive and put it into the Components folder etc - and that all seems to be fine, however in design mode I'm getting a render error as follows.

image
image1326×126 10.5 KB

The component fetches some data in the OnInitializedAsync(). If I comment this data fetch out the render error disappears?

Cheers
Reg

10

You can try using the preprocessor to hide the fetching code from design time.

11

Thanks, I can see how that could help. What I've actually done is to move the data fetch into the main 'Page' component and pass it to the subcomponent as a parameter.

Incidentally, even if I set the Layout switch to off in the subcomponent, and save it, when I open the subcomponent again, the layout switch has come back on?

12

Yes, this is how we have implemented it. There is a global option to enable and disable layouts in the settings.