Event Processing in Kendo UI Builder Templates

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:

And here is how it renders in the designer:

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:

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

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.