Kendo UI R2 2017 Release Webinar Recap_870x220

Catch up on the questions we couldn't answer live, and learn more about the latest features in Kendo UI for jQuery and Kendo UI for Angular.

Earlier this week, we held the Kendo UI R2 2017 release webinar, which highlighted the latest features we’ve added to Kendo UI for jQuery and Kendo UI for Angular. This webinar was hosted by members of the Developer Relations team at Progress. This release represented a significant milestone for Kendo UI as we hit v1.0 with Kendo UI for Angular. This blog post summarizes the event and provides answers to the questions that were asked by attendees.

Webinar Recording

If you were unable to join us for the live webinar, don’t worry: we’ve posted the recording to our YouTube channel, and have also included a transcript below.

Prize Winner

We love prizes and giveaways. Who doesn’t? A Kendo UI release webinar wouldn’t be complete without some epic prizes! The best question was asked by Adrian Alvarez during the webinar. Congradulations Adrian, you’ve won an Xbox One S.

Questions and Answers

During these webinars, we field a lot of questions. We try to answer most of them. However, it’s hard when you have thousands of attendees asking questions simultaneously. That’s why we provide the webinar recap, so you can see the answers yourself.

Any plans to offer a UI reporting feature that can be easily incorporated into Angular applications?
Can you show us the reporting capabilities of Kendo UI?
You’ll want to check out Progress Telerik Reporting. Our web report viewer is built with Kendo UI. And here’s even better news: we just released an Angular-based report viewer. Please make sure to check out our interactive demos of the report viewer.

Could you please update your demos with every release to help us better understand how to use your product?
We ship new and updated demos with every release of Kendo UI. You can see new ones marked on our Kendo UI demos page. Updated demos are also marked as well (i.e. Grid demos).

Will the Sass-based themes replace the Less-based themes in the future?
All Kendo UI widgets arrive with a number of predefined themes. As of the R1 2017 release, the Kendo UI distribution includes Sass-based themes. We do not have plans to deprecate our Less-based themes.

Will the Progress Sass Theme Builder be updated to allow for a custom build of the theme file similar to the custom build tool for the JavaScript components?
The Progress Sass Theme Builder allows you build a theme from scratch based on our default or Bootstrap 4-based themes. You can also import an existing theme. The tool then allows you tweak the theme to your requirements. No custom build tool or step is required.

For the Progress Sass Theme Builder - for the import section - does that mean for future updates release, I can import my previous theme to get an exported updated theme?
Generally-speaking, this should work. If new components are added, they should be injected into the theme after being modified. However, just like most things involving software, it depends.

Are there plans to have a Material Design theme?
At the time of this writing, support for Material Design is slated for the R3 2017 release of Kendo UI.

Is Kendo UI for Angular free?
The price of Kendo UI and its support options are available online.

Any plans on porting the TreeMap or creating a HeatMap chart for Kendo UI for Angular?
Not at the moment. However, our long-term goal is feature parity with Kendo UI for jQuery while keeping pace with the Angular framework development. We’ll review our feedback and share our plans for R3 2017 later this year.

Does Kendo UI support Angular 4?
Yes!

How can I color Grid cells and Grid rows (i.e. foreground, background) depending on values of other Grid cells?
You can define a cell template to emit a binding that will respond to changes made to the underlying model. This can include styles applied to the markup such as a foreground color.

Is the Grid component in Kendo UI for Angular responsive?
Please see Responsive Features for an overview of the responsive capabilities for the Grid component.

How many Angular releases on Telerik/Progress UI components can we expect in one year?
We ship three (3) major releases each calendar year with service packs and updates in-between each release.

How can I use the current Kendo UI for jQuery with Angular 4?
How can I use the Editor widget in Kendo UI for jQuery with Angular?
Can I mix widgets from Kendo UI for jQuery with Angular widgets?
Please see Kendo UI for jQuery Integration for more information on this topic.

Do you have a guide showing how to release a project without using Angular CLI?
The best place to start is our Get Started guide. From there, you can check out the links we provide to building a project with/without the Angular CLI.

Will there be more charts introduced in the future?
Keep an eye on our Roadmap for Kendo UI for Angular for future updates. In the meantime, please send us your feedback if you have any suggestions on charts that you’d like to see added.

How can I use a context menu within a Grid component built with Angular?
I would recommend using a template to define the context menu along with the event handlers needed to trigger its appearance.

For software development shops that rely heavily on continous integration (CI) to build/release software, is there an easy way to incorporate these Kendo UI Angular components into automated pipelines?
I recommend checking out the article we’ve published entitled, Build Agents Authentication for more information about this.

Are there any plans to add a debounce feature to Angular controls like combobox so that change events are not fired until the user is finished typing?
It’s not on our roadmap at the time of this timing. However, please feel free to submit your suggestion(s) to our team.

Is there a Visual Studio template for Kendo UI for Angular?
Not at the moment. However, npm is integrated so you’re good there.

Do you plan to add an option to “remember” the state of filters, sorting and/or selected page for Grid?
It’s supported via the getOptions and setOptions methods on the Grid widget in Kendo UI for jQuery. You can check out the demo of this feature online: Persist State. For Kendo UI for Angular, it’s definitely something to consider. Please submit your feedback: kendoui-feedback.telerik.com.

You’re putting a lot of resources into the Angular version. Is it your advice that we should build our new projects using Angular instead of jQuery?
Absolutely not. My advice is to use what makes you happy because we support both and will continue to support both for a long time to come. :)

Is Yarn supported instead of npm?
At the time of this timing, the Yarn package manager does not support private packages. For more information on this issue, refer to yarnpkg/yarn#521.

I don’t want to export the Grid as PDF because there is additional information on a page. How can I print a grid with other information on a page?
In Kendo UI for Angular, the Grid component supports both PDF and Excel export. We may look into other formats in the future.

We use Kendo UI with SharePoint. Are all of these libraries and components usable in SharePoint 2013 on-premise and able to query SharePoint data?
Yes! In fact, we wrote a whitepaper about this that you can check out on our site, Office 365 and SharePoint - Kendo UI for jQuery.

Transcript

Prefer to read rather than watch? We've got a transcript of the webinar for you below.

00:00 John Bristowe: Hello everyone and welcome to the release webinar for Kendo UI. I'd like to thank you for taking the time to join us to learn about the R2 2017 release. My name is John Bristowe. I'm a member of the developer relations team at Progress. Joining me on this webinar are my colleagues Burke and Tara and together we'll be walking you through the latest features we've added to Kendo UI for jQuery and Kendo UI for Angular. Before we begin I'd like to let you know that all the bits we'll be showing here are available online. So make sure to fire up the Telerik control panel to download the latest updates. Individual product updates are also available through your account page on telerik.com. Now I know it can be tough to sit through an entire webinar. It's easy to get distracted or pulled away from your desk. If that happens don't worry. This webinar is being recorded and will be available up on YouTube. You can find our channel at youtube.com/telerik. We'll also be answering your questions during this webinar on Twitter through the hey Kendo UI hashtag.

 

01:01 JB: Make sure to use this hashtag because it will help us find your questions. Also we'll be giving away an Xbox One S to the best question that's asked. So it's in your best interest to ask and ask often. It's also our way of thanking you for taking the time out of your busy schedule to join us. Please note that this prize is subject to our sweepstake rules. Now a couple of housekeeping items before we begin. First, everyone should keep an eye open for the wrap-up blog post that we'll be publishing shortly after the conclusion of today's webinar. You can find this up on our blog site which should be your home page, and if it's not please subscribe to the RSS feed or bookmark it. You can find the Telerik blog site at blogs.telerik.com. And second, another bookmark-worthy site is the Telerik Developer Network. There you'll find articles on topics that are relevant to you. Recently we've been talking a lot about JavaScript, Angular, CSS and a whole host of other things. You can find the Telerik Developer Network or TDN at developer.telerik.com.

 

02:05 JB: And now onto the main part of our webinar. Kendo UI is our UI framework for building rich HTML5 and JavaScript apps for any platform, browser or device. It features many robust controls that are beautifully themed, responsive and integrated with libraries like jQuery and Angular. The R2 2017 release is packed with features. Let's start with Kendo UI for Angular. I'm happy to announce the public availability of Kendo UI for Angular. This marks a significant milestone in the history of Kendo UI. Built from the ground up on Angular, this release includes substantial improvements and new features of all its major components, including support for Angular 4, Bootstrap 4 themes and more. It includes a supercharged grid with features like multi column headers, PDF support, responsive configuration and filtering, just to name a few. We've also added a stock chart and sparklines to round out our extensive data visualization capabilities. Tara and Burke will walk you through these features in a moment.

 

03:09 JB: Kendo UI for jQuery continues to be awesome and in this release we've added more features and improvements to make it that much more awesome. Like Kendo UI for Angular, we've added support for our new progress Sass ThemeBuilder and a new Bootstrap 4 theme. On the widget side we've added a ton of improvements to the grid. We've also added more events allowing you to predefine grid sync with the data source without further user action. You can also allow the user to refresh the grid manually. A long standing request is to improve the capabilities of the upload widget. With this release we've added the ability to chunk files into smaller pieces as well as directory and cloud support for backend services. We have two new widgets as well. The DateInput and Listbox widgets provide a boost to the data entry capabilities in form-based pages. The new DateInput widget provides a compact control that separates sections for days, months, years, hours and minutes. It also supports customizing the date and time formats.

 

04:11 JB: The new Listbox widget displays the list of data that is contained in a box, and it allows for single and multiple selection, re-ordering of selected items, keyboard navigation, as well as dragging and dropping of items. We've also improved the panel bar and menu widgets. The panel bar now supports binding to local and remote data sources as well as templates for markup generation. We've also added horizontal and vertical scrolling support to the menu along with the ability to bind to custom attributes for data bound items. Well I've certainly done enough talking. Let's have Tara walk you through some of the latest features we've added to this release of Kendo UI for Angular.

 

04:46 Tara: We're going to use the Angular CLI to create our application. First we need to install it using the Node Package Manager, NPM. And once that is installed we can simply create a new Angular project with the command ng new and our project name. The Angular CLI is fantastic not only for generating an application, but when we're ready to add new components, services and other parts to our application, we can use the CLI to generate them. If we move into our new projects directory and check out our package.json we can see that the Angular CLI has set us up on the latest version of Angular. Whenever we wanna take a look at our application we can serve it up with ng serve and go to localhost port 4200 to see that we have a working application. Now we can leave ng serve running in the background and it will automatically update as we add new things. The only documents that we're going to be editing today for our application are in our source app directory. And here you can see those are our main component files and our main module TS file.

 

05:55 Tara: All of our components are pieced out into separate modules that you can find at our NPM registry. So you'll wanna log in to have access. I wanted to show you what it looks like if you log in and you don't have an account or you haven't confirmed your account. If you need an account, go ahead and head to telerik.com/login and there is a "Create an account for free" link at the bottom of the page. If you're still getting the error after you create your account, make sure you check your email because we do send out an activation link. Once you're all golden, you'll get this logged in message and we are ready to go. First we'll clear this out, then we'll use NPM to install the first component we're adding to our app, which is our button component. And we'll use dash dash save flag to add it as a dependency. We're also going to go ahead and add our internationalization package as well.

 

06:44 Tara: You'll see that we have an unmet dependency of the Angular Animations and this is because with the release of Angular 4, they went ahead and separated out the animations to lighten the load of core, and make them their own package. So we'll just go ahead and NPM install our Angular Animations, and we're all set.

 

07:07 Tara: So all of our packages now support Angular 4. We do recommend that you upgrade, but if you're not quite there yet, we still got you covered. So if you are developing an Angular 2 application, you can use the @ng2 tag on your module name. So for example, those two modules that we just installed, the button and the internationalization package, all we need to do to have an Angular 2 compatible version of them is to add that ng2 tag at the tail end. Once you get your module installed, whichever one you use, we have the same steps forward to include our button and you can find more information in the documentations about the button. Today we're going to be doing the drop down button, but let's go right into the code to gain a better understanding of what we're doing here.

 

07:57 Tara: So we'll be working inside of our source app directory, and first we'll look at our main module TS file. This is where we'll bring in the modules that we've just installed. Since we will be using Angular Animations, we'll be pulling that module in.

 

[pause]

 

08:20 Tara: And of course to use the button component, we go ahead and add our buttons module.

 

[pause]

 

08:32 Tara: Then in order for these modules to be used, we have to include them inside of our imports array in our ng module. So we'll go ahead and save that. And now to enter the component, we'll open up our app.component.html template file to include our buttons component. Per Angular syntax when you see the square bracket, it means that we are binding to a property, so here we're taking the drop down button's data property and binding it to the data variable that we will be setting, and then when you see the parentheses, it means we are binding to an event.

 

09:19 Tara: So you see here we have our button, but we don't have the data that it's supposed to get or the event of the item click function attached to it that needs to exist to make something actually happen. So now we'll look at the html and the component.typescript file. In our app component we'll export the data array of objects to bind to the data property of our drop down button. This array will just be affixed with a text property and values of "fun," "funner," and "funnest," just to make my proper grammar co-workers crazy.

 

10:00 Tara: Next we create the "on button item click" function that we're binding to the drop down button's Item Click event. We pass the data item that was clicked, so then we're able to log out and see the text from the item that was clicked.

 

[pause]

 

10:22 Tara: Since we left ng serve running, Webpack has compiled everything since I last saved. So when we take a look at our application, we see that we have a functioning fun button and we can go ahead and open up our console to see that we have everything logging out as we expected. So everything was working correctly but that button looked so crumby, I don't think anybody would actually want to use it. So, let's go ahead and look into styling.

 

10:53 Tara: Kendo UI for Angular now gives you multiple ways to add attractive styling with super easy implementation. You can check out the different styling themes and see each of the component's styling, and also see the way they move and function because they're demoed on our site. This one here is our default theme and it's a really great way for everything on your site to look uniform, without having to put too much thought or work into it. We also have a Bootstrap theme for Angular, all packaged up and ready for you to use. But what I'm really excited about is our new ThemeBuilder. What's great about the ThemeBuilder is, it lets you take a base theme and customize it to either what your website's colors are, or maybe you have a client who already has their color palette picked out. Now all you have to do is plug in those values and then you can simply roll up this theme. Let's check out the ThemeBuilder application.

 

11:56 Tara: You can start out with a theme that we already have or import your own. With ours you can choose from our default or you can choose from our Bootstrap. Since we're going to be using the default today I'll just click on that. As soon as you're in you can see how the components look with the default styling. There are even premade swatches that you can choose from. And again, you get a preview of what it all looks like, which is pretty great especially if you're choosing your own colors and you want to make sure things don't look awful.

 

12:31 Tara: Here we can pick an accent color with the handy color picker. Maybe a nice progress green and it automatically updates our preview. And now you can pick and choose the components you look at. The default is to have all of them open. For this I'll just click the grid. Then you can see the grid component all by itself. Once you're all set you just have to hit the download button and you will get an all.css file or a variable.scss for your Sass files. Then you just have to include it in your style sheets. It's really easy and really awesome. [chuckle] I highly recommend checking out and playing with the ThemeBuilder. For now we'll head back to the styling page. Today we are going to use the default theme for our application. To get started we need to install our default theme module and save it as a dependency using the -S flag.

 

[pause]

 

13:45 Tara: Once we have that we're gonna go up two directories to find our Angular CLI JSON file. Inside there we just need to include the path to our styles in the app's styles array. This is a long path but at least we only have to do this once. Once we have that saved, we can serve up our project again and see that our button now looks much more presentable. And to think, to make that difference we only had to add one line of code. There are more ways to utilize the drop down button. Definitely check those out. But now, let's move on to our most popular component, the grid. I want to take a moment to point out to you that we have demos of our components in our docs, but not only the demo, you can find the code examples there as well with all the files. Plus there's a link to see the code in action with Plunker. This way you can fiddle around with the code and try your own edits out. To get started with the grid, I'm going to copy this NPM install script instead of making you watch me type all of it out. But I want to point out, all of the component's dependencies are listed down here.

 

15:15 Tara: Let's go ahead and run that install script. Everything that we're installing are components that can be used in our grid, like drop downs, drawing, Excel, export. We won't be able to get into those today but check them out. The grid has tons of functionalities you can take advantage of. Like most of our components, the next step is to add it to our module file. First, import the package then import the module. This is an easy process to remember. We use it with practically all of our components. Install, import, implement. Speaking of implement, let's see the data we're filling the grid with when we implement. These characters may look familiar. Because yes, there is in fact a Star Wars API. If you haven't heard of this, you're welcome. Now we'll open our template file to add our grid component. Let's actually keep the characters file open to use as a reference when we make our columns. We'll get rid of our fun button and we'll add our Kendo grid component with its data property bound to items. After that we'll start filling in the inside of our grid.

 

16:39 Tara: Kendo grid column has a field property which we'll bind to one of our character's properties. First name, with a title of name, for the column header. Notice we're making the field property to the exact value of the character's property. Then we'll add more columns for other properties. Most of our components have this type of cascading naming convention, so inside of Kendo grid lives Kendo grid column. We're also not going to use all of the properties for our characters. Instead we're picking and choosing which pieces of data about our characters we're going to use in our grid. Once we have all these columns filled out we can go ahead and save this file. Then, while keeping this template open for reference, we'll start working on our component file. First we need to bring over our characters. And we can go ahead and delete everything that had to do with our old fun button and all we have to do is add the items array that our grid is binding to its data property and assign it to characters.

 

18:10 Tara: So it looks like ng service is still doing what it's supposed to in the background and so you can see we have a grid full of characters. I put skin types in here because I love the fact that Chewbacca's is unknown, IG-88 is metal, and Admiral Ackbar is brown model. [chuckle] It's the little joys in life, right? [chuckle] There are a lot of things that you can do with our grid, and you can actually put a lot of data inside there so I think that's why today we should focus on paging or just at least look into it and see what we can do. To get that implemented, first, we need to add more properties to our grid. Our data will now be bound to this grid view which will pull our data in and we'll focus on a page size but first, we're gonna just assign it to a variable so we can never change it in our module. And we'll have a skip amount of how many items we wanna skip. We are going to make the pageable true and I'm also gonna add selectable true so I can show you what it looks like to be able to select things. And then we're gonna bind to this event the Page Change event.

 

19:23 Tara: Okay, so we have all of those in our template. Now, let's actually put the data in to our app component in our module TypeScript file. Grid view gets assigned to Grid Data Result which you'll see we'll be pulling in from our module and then we're taking data and assigning it to an object first. Then, we make the page size equal to 10 because we only want 10 items per page size, so when we load that page only 10 items are gonna be pulled up. And today we're not gonna skip anything and we're gonna have the constructor go ahead and load the items. So when this page is loaded we're gonna have it load the items immediately. But then we're also gonna make this function that is attached that we've previously bound to the Page Change event so we have a Page Change function. When a page change occurs, it knows to skip and then it also knows to load items. Then we're going to make our load items function. First, this function assigns grid view which, remember, we're binding to our data property in our grid to this object that has data. And it slices the data based on how many we skipped and what our page size was, to know where to start this data again. And then we also have to send it in total so that it remembers how many things we have in our array.

 

21:00 Tara: Then we have to go back to the top and make sure that we import the parts from the grid module that we actually used like the Grid Data Result and the Page Change event. Again, those are coming from our grid module. We see that we have compiled successfully so if we take a look at our app, we see we now have pagination, yay. So this is great because when you wanna load a lot of information into your grid, you don't wanna load all of it at once. And there's our selectable working so now I can point things out very easily, and I also wanna show that this is responsive right out of the box since we have our default theme setup. So we have all of our pagination set up, our selectable true set up. We have all of this, this grid from basically adding our data and setting a few properties. And again, there is so much that you can do with this grid so that we are completely skimming the surface so, check out the API and the documentations to see all the components and all the fun you can have with our component library.

 

22:11 JB: Thanks, Tara. I'm stoked we've hit version one of Kendo UI for Angular. The components look awesome and I especially love the new Sass ThemeBuilder and Bootstrap 4 theme we've added. Of course, a supercharged grid component is always great to have in an application. Now, Kendo UI for Angular doesn't stop there. As I mentioned before, we've also added some new charts to our latest release. Here's Tara again to show them off.

 

22:35 Tara: We have some really great features coming in with our chart components so first let's take a look at our sparkline. As you can see here in the demo, these charts are in line and compact but still give us a lot of interactive data. Let's go ahead and jump into the code to set one up. We'll make a new project for separation of concerns or moreover, so Tara doesn't get confused. But we'll go ahead and make that and then we'll install all of the dependencies we need, and you can find these on the charts overview page. We'll go ahead and install those. This is the only charts module that you'll need for the charts. We'll be looking at the stock chart later and that one will use this same dependency so we only have to install this once. Let's look at our source app files and start out with our app.module.ts file. For transition animations, we'll add the browser animations module that we get from Angular. Then we'll add our charts module that we've just installed from Progress...

 

[pause]

 

23:48 Tara: And we'll import our Hammer.js for gestures. Per usual we'll add the charts module to our imports and this time we'll also add the browser animations module. Then we'll save that, open up our components HTML template file, and delete all the things. So first we'll add a nice little header and then this is where we will first make our paragraph, and then add our sparkline component. So, here it just feeds in the data and we'll attach that to bar data, and then the type, the series type, which is column. We'll close out that component and put some more words at the end of it to see what that looks like, and then we'll duplicate this to now put a pie graph in. So we just need to change the data, to bind it to the pie data, and change the type to pie, and that is pretty much it. Obviously, we need an emoji. I didn't close that out actually, so there we go. Then going into our main app.component TypeScript file, we just need to create those data arrays to detach to our charts. So, first the bar data then now this pie data, just put any random numbers so we can get some data into our charts. So, if we go ahead and serve that up, we can see that we have our interactive sparkline charts.

 

25:13 Tara: Now, let's look at the stock chart. I don't know that much about stocks, but I do know that the stock chart has a bunch of interactions that really let you look into and control the visualization of the price movement for any financial instrument. So let's go ahead and make a new project with ng new, again. Once we have that spun up, I wanna go into the folder and look at our application files. First, with the module.ts, and again we're adding the browser animations module so that we have all of those transitions. And if you saw when the page loaded in the stock chart overview, when the stock chart renders, you get to see a lot of the movement. So again, we add our stock chart module that we get from Progress. And we're also gonna add this service, which we'll touch on later. But basically, the service is gonna bring in all the stock information that we have saved up. And then we're going to import a map operator from RxJS and import Hammer.js again for those gestures. As always, we go ahead and add all of the modules that we need to our imports. Oh, and I just noticed that this is actually a JSONP module that we're adding here, and that's also from Angular.

 

26:31 Tara: So, now we're gonna go into our HTML template file again, and instead of coding all of this out, since we're a little short on time, I'm just going to show you what this looks like here. We have our Kendo stock chart component. Per usual, we start to do a cascading thing where we have the Kendo chart series and the Kendo chart series item. And so, that part is basically the chart that you're seeing. So, it knows that it's a stock chart and then we give it the different properties, like the type and the data binding in different fields. Below that, we have the Kendo chart navigator, and that's the area chart below the data chart that you were seeing, that you were able to manipulate to choose what time frame you wanted to dig into.

 

27:08 Tara: So, now we're gonna look at our projects main, or our component's main TypeScript file. And we're used to this set up after seeing it a few times now, that we are assigning data to an empty array, and then from and to to dates. And then in the constructor is where we're going to use that stock data service to assign our stock data to our data array, which is bound to our chart. Let's go ahead and serve this up. And voila, we have our amazing stock chart. Extremely interactive, very easy to set up, pretty awesome. Let me show you what that data looks like. In this file we're basically pulling that data through, and this is the data that we're feeding in. It's a simple array of objects with those stock prices. But again, I don't know that much about stocks, so if you do, give this a shot and let me know what you think. I would love to hear your feedback.

 

28:02 JB: Thanks, Tara. As a fan of data visualization, I love it when we can add capabilities to a framework to draw pretty pixels to the screen in the form of charts and graphs. Those components look awesome. In addition to the components you just saw, it's important to note that Kendo UI for Angular also supports framework features like, ahead of time compilation, and tree shaking. This is part of the work that we've done to building these native Angular components. Here's Burke, showing off what it looks like in a custom app that he's built.

 

28:30 Burke: So I have an application here that pulls from the iTunes API, that I have not so creatively named Kendo UItunes. It uses Bootstrap, it uses Angular, and it uses Kendo UI for Angular. So you can go ahead and search for an artist here, and you can notice that as we type, artist results are returned, so we'll pick one. And then we get a Kendo UI grid over on the right. This grid's got paging, so we can move through the albums and additionally, we can sort the albums. Now, one interesting thing here is that we can expand the album, and there's another grid inside, so his is called a Details Grid. Inside we have of course, the tracks that correspond to the album. This is a master detail, detail scenario. Now, we can go ahead and play one of these tracks, you'll notice when I do, that changes from a play to a pause button.

 

[music]

 

29:18 Burke: If I was to come and play a different track, this pause button will change back to a play button 'cause it's no longer the active track. So, let's do that.

 

[music]

 

29:25 JB: Here we go, and that's all controlled by an Angular service. This is of my favorite bands by the way they're called Claypegs, you should check 'em out. Great music to code to. This app's also responsive. So, if I go over and start pulling it in, you'll see everything stacks really nicely and the grid just kinda breathes down below. Really cool stuff. And additionally, we can just take out the search result and the grid will occupy the whole space. Had a lot of fun putting this demo together, so check that out. You can grab the source code on GitHub. Now, if we take a look at this application, I'm just gonna pop open the developer tools here and I'll amp up the sides a bit so we can see.

 

30:01 Burke: I'm gonna go to the network tab and I'm gonna go ahead and refresh the page. And let's see if we can get enough space here to see, might have to back this size back down. We've actually got 5.1 megabytes that we've transferred across the wire here. That is huge, considering what this application does. Why is that the case? Well, if we go back and we look through the files, we'll see a bunch of different files in here, but this vendor.bundle.js is the main culprit. 4.3 of the 5.1 megabytes. It's just massive. What's in the vendor.js bundle? Well, the vendor bundle contains things like Angular. It contains Kendo UI for Angular. Things like RxJS. And there's a lot of unused and unnecessary code in there, and there's also the code that isn't minified in there. That's why this file's so big. What we could do is take advantage of some of the build items, like Ahead-of-Time Compilation, like Tree Shaking, on the Angular CLI to make this smaller.

 

30:58 Burke: So the first thing that I want to do is I want to check out Ahead-of-Time Compilation. So I'm gonna jump back over to the CLI here and I'm going to go ahead and stop the server that I've got running. And what I want to do is I wanna start and kick off some Ahead-of-Time Compilation. So what Ahead-of-Time Compilation is going to do is it's gonna take our files and the templates, it's gonna compile those down. Now, here's what I mean by that. Let me kick this off, we'll jump back over to Visual Studio Code. This is the AlbumComponent.html. So, this is the template that renders out the grid of albums. You can see we have a Kendo grid in here. We have all the attributes that are bound. And then inside of the grid, we have the tracks, and you'll see that as well. So, what Ahead-of-Time Compilation is gonna do is it's gonna take this template and turn it into JavaScript, 'cause that's how Angular works.

 

31:46 Burke: It doesn't actually execute this HTML when it gets to the browser, it takes this HTML, turns it into JavaScript, and then that's what the browser executes. What Ahead-of-Time Compilation does is it takes this step out so that it's already compiled when it gets to the browser. So the browser simply has to execute it, it doesn't also have to compile it. So let's jump over here and I'll show you what I mean. If we look at our files, we've now got an AOT folder inside. If we go into AOT and we look at our source... I'm gonna go into album and this is our album component. Now, it's not gonna look the same, in fact it's not even readable by us as humans. But what we've got in here is everything that we need for this component to function. If we scroll down enough, you'll see that the template has been in-lined as well. Here it is right here. So this is Angular turning the template into JavaScript, something that can be immediately executed in the browser.

 

32:37 Burke: So now that we have Ahead-of-Time Compilation enabled, we can do other things like check for template errors. So, if we go back to our AppComponent.html, let's say we make a template error in here like, I don't know, we forgot to close a tag, and then we go over here and we rerun this Ahead-of-Time Compilation step. What'll happen is, it'll error out at build time and tell us, "No, you've got an error. You're missing a closing tag." So, let's go back over and we'll add that back. And then our Ahead-of-Time Compilation will succeed. Now I'm sort of running this command here. You may have seen me pasting it in node module slash bin. You don't have to know all of that. The folks on the Angular CLI team have done such a great job with this. All we have to do is drop down and say that we want to build this, we wanna do AOT, and we wanna make it a prod instance. Now, when we do this, Angular's gonna go through, it's gonna do the Ahead-of-Time Compilation step for you.

 

33:30 Burke: But not only that, it's also going to use Webpack to do Tree Shaking, and then it's going to minify all of the files. This is essentially optimizing all of your code in one single step. Really, the only thing that you could do in addition to this would be to Gzip it on the server, and that would be the smallest that you could possibly get it. But this is getting you almost all the way there, and I know that the Angular team is working on making Tree Shaking even better in Angular, so looking forward to that. Now, once this is built, we'll get a dist folder over here in our project. So let's take a look here. Not under source. We come up. We have a dist folder right there, just popped in. If we look in the dist folder, we'll see all of the files that are gonna be used to run the application. The entire application, that's it. Down to just these few files. So let's do this. I'm gonna come over here and let's move into the dist directory. And I'm just gonna run a little program called Lite-Server from John Papa, excellent little utility for a quick web server.

 

34:30 Burke: And this is gonna fire up and now we've got the same application, but this time it's been fully optimized. If we go back here and we take a look at our sources now, you can see we're now down to 1.4 megabytes. So we've decreased this thing by almost 4 megabytes, just like that. And if we go back up and find our vendor file, here it is, you can see this sucker's now 765 kilobytes. It was up at over 4 megabytes before. So this is the power of native Angular components, working with Angular, and working with the CLI to provide you the fastest, most efficient applications possible.

 

35:05 JB: Awesome stuff, Burke! It's great to see how Kendo UI for Angular and the Angular CLI work together to bring you incredible features like the ones demonstrated. Thanks! Let's now switch gears and talk about Kendo UI for jQuery. Kendo UI for jQuery is our UI framework for building rich HTML5 and JavaScript apps for any platform, browser, or device. It features over 70 robust controls that are beautifully themed, responsive, and easy to integrate with popular JavaScript libraries. In this release, we've implemented over 43 feature requests and closed more than 47 bugs. Here are just a few of the highlights: Kendo UI for jQuery now has a new Sass-based ThemeBuilder. This tool enables you to create or modify themes so they match your web app design through custom themes or one of the many predefined themes that ship with Kendo UI for jQuery. You can also import a theme matching your existing corporate branding and tweak it to match your requirements.

 

36:04 JB: Speaking of themes, the new Bootstrap 4 theme for Kendo UI for jQuery allows you to blend in and complement Bootstrap components. You can then modify the Sass through the theme builder to see how they affect the look of the components in real time. Switching to widgets now. We have added numerous features to the grid to customize its behavior and design. Specifically, we've added more events to support scenarios requested by customers such as allowing the predefined sync for the data source integration without further user action. We've also added some finishing touches to the grid itself such as allowing users to refresh the grid manually, adding finishing touches like a progress bar for long running save operations, and styled check boxes in column editors. Kendo UI for jQuery also features two new widgets: The Listbox and DateInput. These widgets are nice additions to the collection of widgets used for forms. The Listbox is a widget that displays a list of items, it allows for multiple selection of items, reordering and transfer between the two listboxes, and drag and drop, of course, is fully supported as well. You can easily control the appearance by arranging the buttons in different layouts or changing their text.

 

37:16 JB: The DateInput widget allows you to enter date time values via direct input, it provides separate sections for day, month, year, hours, and minutes. Furthermore, you can customize the date and time format. Another widget that's getting a big update in this release is the upload widget. We've added the ability to chunk upload of large files. This includes the ability to pause and resume uploads. These uploads are conducted asynchronously with multiple requests to the server, and this process can be finely tuned as well through configuration settings like auto retry, max retries, and the number of concurrent connections. We've also added the ability to upload client-side directories as well. And finally, the menu widget has been improved to support scrolling, binding custom attributes and context-based menus via MVVM. Let's take a look at these new features in action.

 

38:07 JB: The Progress Sass ThemeBuilder for Kendo UI is a web application that enables you to create new or customize existing themes. You can now use the Progress Sass ThemeBuilder by visiting themebuilder.telerik.com. Once there, you'll be able to select a product that you wish to target. We'll choose Kendo UI for jQuery. We can then choose to import an existing theme, and modify it or create one from scratch. Let's create a new theme using the Bootstrap 4 theme as a base.

 

[pause]

 

38:42 JB: As you can see, the ThemeBuilder provides an interactive view of all widgets found in Kendo UI for jQuery. Here, you can get a better sense of the design along with its look and feel. I can modify the brand colors or pick from a list of swatches. I can also limit the scope of this theme to those widgets that I wish to target, thereby, reducing the size of my style sheet. When I'm happy with the changes I've made, I'll click on the download button which will provide a zip archive. It contains the generated style files that I can incorporate into my web app. Let's move on to one of the more popular widgets in Kendo UI for jQuery, the grid. The grid widget is a powerful control for displaying data in a tabular format. It provides many options such as paging, sorting, filtering, grouping, and editing which determine the way data is presented and manipulated. The grid can be bound to local or remote data through the data source component. In this release of Kendo UI for jQuery, we made a number of improvements to the grid. For starters, we've added a new persist selection property to the grid configuration. This allows you to persist the row selection after data operations like sorting, paging, filtering, and others are performed.

 

40:02 JB: Historically, you would implement this functionality yourself but it required you to define handlers for the change and databound events on the set selected rows. Now it's encapsulated in a boolean configuration property. One side note, using selection persistence requires a data source with an ID field for its model. We've also made a few minor improvements to the grid user experience as well. We now have a unified theme for HTML inputs in the grid. For example, you'll notice that the check box is matched to the existing theme. We also show a progress bar when a save operation is conducted over the wire. Let's demonstrate this by opening up the Chrome Developer Tools and set the throttling rate to something very slow. Now when I perform updates to cell entries and persist them back to the server, a progress bar is displayed. Now the grid has a lot of events that can be handled, this gives you better visibility into what's happening under the covers when operations are conducted against it. In our latest release, we've added a few more events into the mix. These include before edit, cell close, column menu open, and filter menu open.

 

41:13 JB: Let's see how this works. Here I have a pre-populated grid with a bunch of event handlers wired up. As you can see, I've added handlers in my configuration for the new events we've added. As I perform these operations, their events are triggered and I can respond accordingly to them. Again, this should give you better visibility into what's happening under the covers when these operations are conducted against a grid. The Listbox and DateInput are two new widgets in Kendo UI for jQuery. They complement the growing list of form controls available for collecting user input. Let's see how these operate. I'll start with a collection of items within a select element. Beside it, I have another select element which is empty for the purposes of collecting selected items. To convert this to a Listbox, I'll target the select element and call Kendo Listbox. For configuration, I'll target the empty select element as the connected Listbox control, and provide any array of options to represent which operations I would like to perform or provide to my users. Here I can specify options like move up, move down, transfer to, transfer from and so on. Finally I'll call Kendo Listbox on the connected control. Refreshing the page allows us to see the impact of this code. Here, the Listbox with its associated operations I specified earlier in its configuration is displayed. The Listbox supports a number of features including drag and drop, custom templates and a rich API.

 

42:52 JB: Now let's see the DateInput in action. It's a simple but effective widget that enables you to enter DateTime values via direct input. It provides separate sections for day, month, year, hours and minutes. Furthermore, you can customize the DateTime format. As you can see in this example, creating a DateInput is easy. Simply call KendoDateInput on the target input element. Let's now check out the upload widget and chunk upload support. This was a highly requested feature from customers, so I'm super excited to show off this capability. Here I have a webpage with an upload widget present on the page. I'll go ahead and select a file to upload to the server, and you'll notice that a dialogue is displayed that allows me to track its progress. I can pause the upload and even cancel it if I wish.

 

43:46 JB: Let's take a look at the underlying markup and code for this page. Here I'm initializing the upload widget with a configuration that supports asynchronous operation. I've indicated that I'd like a chunk size of 11 kilobytes to the URL denoted here. Let's switch back to the browser and watch this demo again through the developer tools. As you can see, we're pushing XHRs to the save endpoint in 11 kilobyte chunks. This feature is great for scenarios where the user wishes to upload large files. Let's take a look at another demo. This time, the upload widget here has been configured to support a directory upload through the boolean value you see here. This demo also supports the ability to select and drop a directory over the control for the same outcome. This feature is only supported by browsers that support the HTML5 directory and DataTransferItem API.

 

44:51 JB: Finally, we've updated the menu widget with additional features. In this example, you can see that the number of menu items exceeds the space that's available to render them. In this case, we can specify the boolean config value scrollable to true and the menu will allow you to hover over the right and left sides of the widget to see more options. This works with the menu widget in both a horizontal and a vertical orientation. Now there's one more thing that I'd like to talk about, and that's Progress Telerik Reporting, our complete reporting solution for web, desktop and mobile apps.

 

45:29 JB: Now you might be wondering why it's worth mentioning during a webinar on Kendo UI. Well, as it turns out Telerik Reporting uses Kendo UI as part of its client side delivery. With the R2 2017 release of Kendo UI for Angular, the engineering team for Telerik Reporting has been working incredibly hard to take advantage of it. That's why I'm tremendously excited to announce our new Angular Report Viewer that's based on Kendo UI for Angular. This component can be integrated into Angular applications out of the box with both Webpack and SystemJS Module Loaders. Let's take a quick look at the new Angular 4 based report viewer. I have a report already set up that contains the report viewer component. I'll use the Angular CLI to process the application and host it on local host. For those of you who have seen our reporting solution in the past, this will look very familiar. The main difference here being the fact that I'm using the new Angular 4 based Report Viewer.

 

46:23 JB: Jumping back to my project, let's bring up the HTML document that uses our report viewer component. I have a directive here called TR Viewer with a number of bound properties and events. This viewer is using the remotely hosted reports found up on our demo site. I can specify a number of properties such as its view and scale modes. Using this component is no different than any other Angular component. For customers looking for the combination of using Angular with a robust reporting solution, I'd suggest checking out Progress Telerik Reporting.

 

46:56 JB: Well, that about wraps it up for us. Before we go, we want to let you know that you can install the latest bits by visiting your account page on telerik.com. There you'll find a button to download the Telerik Control Panel. This utility is super useful for staying up to date on the latest versions of all of our UI controls. Live demos for Kendo UI for jQuery, Kendo UI for Angular and many other products can be found online by visiting demos.telerik.com. Please make sure to check it out. On behalf of Burke, Tara and the rest of us at Progress, I'd like to thank you for taking the time to join us here for today's webinar on the R2 2017 release of Kendo UI. See you next time.


About the Author

John Bristowe

John Bristowe is a Principal Developer Advocate for Telerik, specialising in web and mobile app development. Prior to joining Telerik, he was a Senior Developer Evangelist with Microsoft. John enjoys all the meats of our technology stew and is passionate at making developers successful.

Related Posts

Comments

Comments are disabled in preview mode.