Components

This article shows how to work with Blazor components in Radzen Blazor for Visual Studio.

Add a component

To add a toolbox item to your .razor file perform the following steps:

1. Open a .razor file by double clicking it in Solution Explorer.
2. Go to View → Radzen Blazor for Visual Studio → Toolbox in the Visual Studio top menu.
3. Find the desired component. You can switch between Advanced mode (listing all components available for the current application) and Simple mode (showing only the Radzen.Blazor components grouped by category).
4. Drag and drop the component in the opened .razor file.

Select

You can select a component in one of the following ways:

• By clicking it in the design canvas.
• From the Outline
• You can also select the parent or first child of the selected component.

You can select multiple components by holding CTRL while clicking components in the design canvas or in the outline.

You can also select a range of components by selecting one component and then selecting another while pressing SHIFT.

Move

To move components:

1. Select one or more components.
2. Drag the move handle to the desired location.
3. Release the mouse button to complete.

Cut, copy and paste

You can cut, copy and paste components by selecting them and pressing CTRL+X</kbd>, CTRL+C, CTRL+V You can also use the component context menu or the "..." button in the component toolbar.

Delete

You can delete component by selecting it first and then clicking the Delete button from the toolbar “…” menu. You can also use the context menu or backspace.

Set properties

After selecting a Blazor component you will see all of its parameters (properties that are decorated with the [Parameter] attribute) in the property grid.

Use the property grid to set the desired property value. Do not add quotes (") for string values - Radzen Blazor for Visual Studio will add them for you.

You can also click the gear icon which will open the Expression editor. You can pick an existing page property or field.

Radzen Blazor For Visual Studio uses @bind- syntax by default for properties that support two-way data-binding (e.g. Value property and ValueChanged event). You can use the <–> button to change that e.g. from @bind-Value="value" to Value="value".

Attributes

Radzen Blazor for Visual Studio allows you to set custom attributes of HTML elements or Blazor components that support that (have a property decorated with [Parameter(CaptureUnmatchedValues = true)]).

To add a custom attribute to a Blazor component click the + button next to the Custom attributes label. Pick a name for the attribute and type its value.

CSS style

The Styles tab of the property grid allows you to customize the appearance of the selected Blazor component or HTML element. Radzen Blazor For Visual Studio generates a style attribute when you change any of the style attributes.

Events

You can handle Blazor component events from the Events tab of the property grid. Click the + next to the event name. Radzen Blazor For Visual Studio will open a dialog asking you to enter a name for the event handler method (a default name would be suggested). After that it will open the newly created method in design mode and allow you to add statements to it.