AiA 143 Kendo UI with Burke Holland

Charles Max Wood and Burke Holland discuss Kendo UI. Burke Holland is on the Developer Tools Division at Progress. The discussion ranges from the introduction of Kendo UI to tests used for Angular apps. Stay tuned to discover what Kendo UI can do for you!

[00:01:50] Shutout for Angular Remote Conf

Charles will be picking speakers really soon so get your ticket at the early bird price.

[00:02:15] – Introduction to Burke Holland

Burke Holland is working for Progress in the Developer Tools Division on the Developer Relations Team. They work on products like NativeScript, KendoUI and all the developer tools that Progress makes, which is mostly UI components and mobile frameworks

Questions for Burke Holland

[00:03:00] – What is Kendo UI?

Kendo UI is a Javascript UI library. It has open source components (Kendo UI Core), but it’s primarily commercial. It’s more on heavy lifting text scenarios like grid that has sorting and filtering, drag and drop, grouping, scheduler, robust calendar interface, pivot grids, Gantt charts, data visualizations. We’ve rebuilt Kendo UI from the ground up using Angular components. It’s the Kendo UI Core Angular that was released last January.

[00:08:00] – How are Kendo UI elements pulled for use into an app?

There’s a private npm repo that you would just pull in and bundle some of the widgets together. Inputs can be a drop down list, a combo box, autocomplete, etc. Using npm and install -@progress/kendo-angular-input, you get all of those inside your npm modules folder. We and the team are pushing to move to the public npm repo so that people don’t have to register for an account.

[00:13:00] What about mobile development? Does this work with NativeScript?

Kendo UI widgets do not work inside of NativeScript for mobile apps. However, we are looking for a possibility of merging their NativeScript UI library with Kendo UI so that you can build a website, a progressive web app, a NativeScript app, etc.

[00:16:00] Do you also have to pull in some CSS?

Kendo UI has their own CSS that is based on Sass. It has a theme builder to customize themes that you can pre-select from. Integration for Bootstrap 4 was also built because Kendo UI does not have a layout system so it doesn’t provide you with any grid system for layouts or for responsive design.

[00:19:00] Do you just import it into my app and then use the components, is it that simple?

It is recommended to use Angular CLI to use Kendo UI’s components and import it into an app. First step is to create a new project with the Angular CLI because Kendo UI is designed to work with it. You can work with SystemJS, instead, but it requires some tweaking. Next, you would need to add the private npm repo which registers the end point on the terminal. And then, npm-install to install the components. After that, you can include them in your app module file. Import Kendo grid from @progress/kendo-angular-grid. Then, you can import them into your module so you use it in your templates.

[00:23:00] – Can I tie a chart to a grid, update the chart and have the grid change?

Everything that Angular updates, Kendo UI just updates too. If you buy two components to the same array and you update that array, both of those components are going to update because they’re using Angular’s binding.

[00:24:00] – Does Kendo UI work with the older versions of Angular?

Kendo UI works with Angular 1.x. By the way, AngularJS means Angular 1.x. Meanwhile, Angular means Angular 2 and up. Directives for Angular 1.x wrap Kendo UI components.

[00:28:00] – When moving my component in AngularJS to Modern Angular, do I have to include both of those in the product?

I can’t provide any guidance here, other than I wouldn’t do that. If you migrate, you’re going to be firing up a new project but you should be able to move your application logic over pretty well. However, we still have this idea of services and injection and those things are transferable