Event Processing in Kendo UI Builder Templates

Event Processing in Kendo UI Builder Templates

April 26, 2018 0 Comments
Event Processing in Kendo UI Builder Templates_870x450

Learn how to easily implement event handling on custom views in Kendo UI Builder.

In this post we will learn how to implement event handling on custom views. We will augment the hello world custom view from the first blog post. We will process click events on any part of the hello world salutation container (a <div>).

As in the first blog, we will look at the three main items we must program:

  1. The custom view definition file
  2. The design-time elements
  3. The run-time elements

To follow along, download the template samples .zip file from GitHub or clone the repository; open the folder custom-hello-world-v2 and follow the same steps outlined in this post to install this template in your target application.

Custom View Definition File

We specify to the designer that we want a single event handler for the view properties panel. This allows the user to specify the name of the function that will be invoked on click. 

Here is the relevant extract from the file custom-hello-world-v2.json:

01."events": {
02. "type": "object",
03. "title": "Event",
04. "description": "Specifies all available events for the hello world div",
05. "order": 3,
06. "properties": {
07. "onClick": {
08. "type": "string",
09. "title": "Clicked",
10. "description": "This event fires when hello world is clicked",
11. "default": "onClick",
12. "order": 1
13. }
14. }
15. }

And here is how it renders in the designer:

Event properties

As explained in first post, an object with sub-structure is represented with expandable/collapsible panels, and we see an example of this here. 

As a reminder, the user should implement the function specified in the view property panel in the public controller file (for AngularJS) or in the public component file (for Angular 5).

Design-Time Elements

KUIB does not pass mouse or keyboard events to the design-time view. So, we do not have to implement anything for the onClick event for the design-time view.

Run-Time Elements

Things here are relatively straightforward:

First, open the file angular/__name__.view.component.html.ejs (Angular 5) or angularjs/template.html.ejs (AngularJS).  

If the user has defined a click handler in the view property we add the handler to the div. Notice how we use JavaScript expressions within EJS to test for the presence of the event handler.

For AngularJS, we use ng-click=”function call” syntax.

For Angular 5, we use (event)=”function call” syntax. Specifically, for a click event, we use (click)=”function call”

At this stage and in practice, you do not need to do anything else as it is the responsibility of the user to add the function implementation in the public class for the controller (AngularJS) or for the component (Angular 5). However, to make the sample self-contained and working out of the box, we have added a default implementation for onClick.

Open either custom-hello-world-v2/angularjs/controller.js.ejs or custom-hello-world-v2/angular/__name__.component.html.ejs and notice how, with EJS syntax, we define the function using the name of the event handler as defined by the user in the view property:

1.<% if (events.onClick) { %>
2. <%- events.onClick %>(e) {
3. alert(`In default implementation for <%- events.onClick %>
4. - You should override this function in the public controller class.`);
5. }
6.<% } %>


And here is what you should see when clicking on the div:

Run time

Now, if you have cloned the repository (or gotten a .zip), you should create an application containing a hello world 2 custom view. Once the application is generated, you can create the on click event function in the public js file (for AngularJS) or Angular component ts file (for Angular 5). 

The file's location is dependent on module and view names. For example, in my test application, I have a module called custom-views and the view containing the hello world 2 custom view is called hw2. Given these names, the location and name of the files are:

  • AngularJS: app\src\modules\ custom-views\hw-2\controller.public.js
  • Angular 5: app\src\app\modules\custom-views\hw-2\hw-2.view.component.ts

In conclusion, as you have seen in this article, defining a custom view with event handling does not pose specific difficulties.

Check out the next post to see how we can augment the models used at design-time and at run-time.

Thierry Ciot

Thierry Ciot

Thierry Ciot is a Software Architect and Product Owner on Progress Rollbase. Ciot has gained a broad experience in the development of products ranging from development tools to production monitoring systems. He is using his expertise to create a low code/rapid application development platform that provides a “Yes!” user experience. He is now focusing on responsive and adaptive modern web applications for public and private clouds. He holds two patents in the memory management space.

Comments are disabled in preview mode.
Latest Stories in
Your Inbox
More From Progress
OData: The Fastest Way to RESTify Your Databases
OData: The Fastest Way to RESTify Your Databases
Download Whitepaper
The Business Value of Kinvey
Download Whitepaper
Finding App ROI Through Time And Money
Watch Webinar