Event handling

This guide demonstrates how to handle page and component events in Radzen.

Introduction

Events represent things that have taken place - for example an application page is loaded, the user clicks a button or selects a dropdown item.

Page events

Pages have only one event - that is the Load event. The page events are visible in the property grid every time the developer opens a page in design-time. One can bring them back later by clicking in an empty page area or via the component picker at the top of the property grid.

Component events

Component events appear when you:

  1. Select a component by either clicking it or from the component picker.
  2. Click the Events tab of the property grid.

Handling events

To handle events in Radzen you should add one or more actions to the specified event. To do so click the edit icon next to the name of the event. This opens the edit handler dialog where you can add, remove and update actions.

Actions execute in the order they are specified. You can change the order of execution by moving the actions up or down.

Actions

The following actions are available:

Invoke data source method

Makes an HTTP request to the URL that represents the data source method. Optionally pass parameters. Triggers two events - Then and Error.

Important! You must add an action for at least the Then event to handle the response. Otherwise the HTTP request will not happen.

  1. Set Type to Invoke data source method
  2. Select operation. Radzen shows a list of all data source methods.
  3. Specify method parameters (if the method has parameters). You can define unlimited number of parameters for the selected data-source method and you can specify Name and Value for each parameter where Value can be constant or expression.
  4. Handle the Success event by adding action(s) to it. It is triggered when the HTTP request returns a successful response (the HTTP status code is >= 200 and < 400).
  5. Handle the Error event. It is triggered when the HTTP request fails (the HTTP status code is >= 400).

Navigate to page

Navigates to the specified page with the specified parameters.

  1. Set Type to Navigate to page
  2. Select the page. Radzen shows a list of all available pages.
  3. Specify page parameters. Those can be later accessed via the parameters page property. You can define unlimited number of parameters for the selected page navigate and you can specify Name and Value for each parameter where Value can be constant or expression.

Navigate back

Navigates to the previous page.

Open dialog

Opens the specified page in a modal dialog.

  1. Set Type to Open dialog
  2. Select the page. Radzen shows a list of all available pages.
  3. Specify page parameters. Those can be later accessed via the parameters page property. You can define unlimited number of parameters for the selected dialog open and you can specify Name and Value for each parameter where Value can be constant or expression.

Show notification

Displays the specified type of notification at runtime.

  1. Set Type to Show notification.
  2. Select severity
    • Error
    • Info
    • Success
    • Warning

Set property

Sets the specified property to the specified value. The value should be a constant or expression.

Execute JavaScript

Executes the specified JavaScript code at runtime.

Conditions

Actions normally execute unconditionally. To change that you can specify a condition. The action will execute only if the condition evaluates to true.

Get Radzen

Sign-up to download the free 30-day Radzen trial.