Radzen Professional is now 20% off until January 4th 2019! Learn more

Components

Components are the basic UI building block. Every Radzen page consists of components: the page title is displayed in a Heading component, the navigation is handled by the PanelMenu which is inside a Sidebar component. Your users browse the application data displayed in a DataGrid component and update it via the TextBox, DatePicker and other input components.

Radzen components are available in the toolbox. To use components you drag them from the toolbox and drop them on your page. Clicking a component selects it in Radzen and reveals its properties in the property grid. Another method to select a component is via the Selection dropdown in the top right cornder of Radzen.

Properties

Every component has a set of properties that control its behavior. Some properties enable or disable certain component features, other specify the component appearance (width, height).

Some component properties can be data-bound to page properties. This allows you to display your application data and to configure your components based on user actions by handling events.

Check the Properties article for additional info on page properties.

Common properties

Here is a list of the most common component properties:

Name

Every component has a Name which should be unique in the current page. The Name property is one of the few properties that cannot be data-bound to a page property because the component name should be a constant known during code generation.

Visible

The Visible property controls whether a component appears on the page or not. By default it is set to true. Setting it to false will hide the component. The Visible property can be data-bound to a page property which will allow you to hide or show certain component based on application data or user actions.

Here is a quick demo showing how to hide a TextBox when the user clicks a Button.

  1. Create a page property called textBoxVisible and set it to true. Check Create property for tips.
  2. Drag and drop a TextBox component. Set its Visible property to ${textBoxVisible}. This data-binds the Visible component property to the textBoxVisible page property.
  3. Drag and drop a Button component. Set its Text to Hide. Handle its Click event and add a Set property action. Set Name to textBoxVisible and Value to false. When the user clicks that button she will set the textBoxVisible property to false which will hide the button.

Text

The Text property makes the component display certain value - either literal (e.g. Hide, Show) or page property (${text}, ${textBoxVisible}, ${counter}). Check Display property value.

Value

Input components have Value property. It has “special powers”. It can only be data-bound to a page property - it doesn’t accept literal values. Also it can update automatically the page property it is data-bound to. You can check Get user input for more details.

Data

Components that display data do that via the Data property. Those are the DataGrid, DropDown, Scheduler, DataList and many more.

Style

This is a complex property - it has sub properties that control the visual appearance of the component. For example Width or Height.

Events

Some components trigger events in certain conditions - for example when the user interacts with them. For example typing in a TextBox triggers the Change event. Clicking a Button triggers the Click event. Check Event handling for more additional info about event handling in Radzen.

Categories

Radzen components fall in the following categories:

  • General

    Those are general purpose components that are commonly used: Button, Row, Column, Icon, Image, Link and more.

  • Containers

    Components that contain other components. Accordion, Card, Fieldset, Panel, Steps (wizard) and Tabs.

  • Forms

    All input components are there: TextBox, CheckBox, DatePicker, DropDown, ListBox and more.

  • Data

    Those components display data (usually coming from a data source such as a database): DataGrid, DataList, Tree, TreeGrid and more.

  • Validators

    Those validate your user input and come in hand with forms: RequiredValidator, LenghtValidator and more.

We are here for you

Making our users happy is always a priority for us.