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:
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.
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).
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.
Things here are relatively straightforward:
First, open the file angular/__name__.view.component.html.ejs (Angular 5) or angularjs/template.html.ejs (AngularJS).
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:
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.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.Learn More
Subscribe to get all the news, info and tutorials you need to build better business apps and sites
You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.
Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.