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 one event - the Load event. Page events are visible in the Radzen 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 in the Radzen property grid 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

Radzen provides the following action types:

Invoke data source method

Invokes a CRUD operation to a database table, view or stored procedure. Triggers two events - Then and Error.

Important! You must handle the Then event in order to use the data source method result.

  1. Set Type to Invoke data source method
  2. Select operation. Radzen shows a list of all data source methods.
  3. Set the parameters (if the operation has any). You needt to specify the parameter Name and Value where Value can be a constant or an expression. Data source methods support some query parameters for filtering, sorting and paging. The Radzen Query Builder provides a convenient way to set them.
  4. Handle the Then event by adding action(s) to it. It is triggered when the data source method completes successfully. The result of the data source method is available via the ${result} expression. Usually you would set a property whose Value is set to ${result}.
  5. Optionally handle the Error event. It is triggered when the data source method invocation fails for some reason. The response (exception) is available via the ${result} expression.

Invoke custom method

This is an action specific to Radzen Angular applications. It invokes a custom C# or VB.NET action method. Custom methods implement business logic or run a complex DB query. More information is available in the Invoke custom method article.

Important! This action type is available only if the current Radzen application has server-side support enabled.

Invoke method

This is an action specific to Radzen Blazor applications. It invokes a method defined in the partial class of the page. More information is available in the Invoke method article.

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.

For Blazor applications you can set property type (default is dynamic). Sample app showing the free Radzen Blazor Components can be found here: https://blazor.radzen.com/.

Execute Code

Executes the specified JavaScript code. Available in Radzen Angular applications.

Execute C#

Executes the specified C# code. Available in Radzen Blazor applications.

Export

This type of action is similar to Invoke data source method action. It makes an HTTP request to the URL that represents the data source method and exports the result to specified format (CSV or Microsoft Excel). Only data from Microsoft SQL Server, MySQL, Oracle and PostgreSQL data-sources can be exported.

Conditions

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

We are here for you

Making our users happy is always a priority for us.