Event handling (Angular)

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

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 above 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.

Conditions

Actions execute unconditionally by default. To change that you can set the Condition property. The action will execute only if the condition expression evaluates to true.

Handling events

To handle events in Radzen you should add one or more actions. Click the edit icon next to the name of the event. This opens the Edit handler dialog which allows 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 via the “^” and “v” buttons.

Actions

Radzen Angular applications support the following action types:

• Invoke data source method
• Invoke custom method
• Navigate to page
• Navigate back
• Open dialog
• Show notification
• Set property
• Execute Code
• Export

Invoke data source method

When you create a data source (from a database, OData or REST service) Radzen creates the so called data source methods (or operations).

For example if your database has an “Orders” table Radzen will generate CRUD methods for manipulating that table:

• getOrders - retrieve records from the Orders table. Supports paging, filtering and sorting via the built-in $take, $skip, $orderby and $filter parameters.
• createOrder - adds a new record to the Orders table. Returns the created record via the implicit ${result} property.
• updateOrder - updates an existing record from the Orders table. Returns the updated record via the implicit ${result} property.
• deleteOrder - deletes an existing record from the Orders table.

The Invoke data source method action can trigger one of two events - Then (on successful response) and Error (otherwise).

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

The Invoke custom method action allows you to invoke 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.

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. Also allows the developer to pass parameters to the dialog and get a ${result} via the Then event.

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.

Getting result from a dialog

When you use the Close dialog action you can optionally set its Result property to some expression. This expression will be available in the Then event of the Open dialog action as the ${result} implicit property.

Show notification

Displays the specified type of notification.

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. If a property with the specified name does not exist it will be created. Otherwise its value will be updated.

Execute Code

Executes the specified TypeScript code.

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.