We recap all the news from the latest Kendo UI release and answer the questions we couldn't get to live about Angular, React and more. Missed the webinar? You can watch the replay below.
Last week, we hosted the Kendo UI R3 2017 release webinar, which highlighted the latest features and improvements we’ve added to Kendo UI for jQuery and Kendo UI for Angular. It also introduced Kendo UI Support for React and Kendo UI Support for Vue. 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 the Kendo UI channel on YouTube.
Prize Winner
It’s a bit of a traditional for us to give away prizes to attendees who ask the best questions. This time is no different. The winner this time around is Tony Garcia who will receive an Oculus Rift + Touch Virtual Reality System!
Questions and Answers
What’s the oldest version of AngularJS you support?
You can read the supported versions of AngularJS from our documentation.
Are features like the Material theme and features in the Grid component available for Vue?
Yes since Kendo UI Support for Vue are wrappers of Kendo UI for jQuery.
Where can I find documentation?
That’s easy: docs.telerik.com.
Does endless scrolling in the Grid require a static grid height to be set?
No. The Grid has a default height. It uses that value (or the height you set) to calculate the view for endless scrolling.
Can VueJS be implemented using a custom Kendo UI build?
I’d recommend checking out the Getting Started article we have in the documentation. In particular, there’s a section entitled, Integrate Kendo UI for Vue.js using NPM and Webpack that’s worth checking out.
Is the Material theme supported in React?
Yes. All the themes that ship with Kendo UI for jQuery are available in Kendo UI Support for React.
Are the same Sass-based themes used for both Angular and jQuery?
Yes. We have the theme available in the GitHub repository, kendo-theme-material.
What about Material Design theme for Kendo UI for jQuery?
This theme is currently available for Kendo UI for jQuery and Kendo UI for Angular.
Is there a roadmap of when the theme builder is updated with the R3 release changes?
The Progress Sass Theme Builder is currently up-to-date with everything we covered in the webinar.
When is the ngModel update of a TimePicker? onBlur or onChange?
It’s for the event, valueChange. We have a demo of this capability available here.
How about the Grid making it responsive to different media sizes? Is it covered on this new release?
I’d recommend checking out the documentation we have that covers the responsive design support in the Grid.
You referred to the new ReactJS support as “wrappers”. So, does this still require jQuery? If so, are there any plans for KendoUI for React that is “native” to React and doesn’t require jQuery? (i.e. KendoUI for Angular)?
Yes, Kendo UI Support for React are wrappers of Kendo UI for jQuery. Therefore, jQuery remains a dependency. We have plans to introduce native support for React in the R1 2018 release timeline. You can read about this in the Kendo UI roadmap.
Can you resize the columns of the Grid component?When will column resizing be part of Angular Grid component?Do you have grid column resizing and moving feature in this release?
The column resizing got delayed a bit, sorry! We need few weeks to complete it and will publish an incremental update.
I’ve been working with the Kendo UI for Angular and would like to know how to modify the themes for the UI. Is there any documentation that explains the functionality of the themes?
Here’s the link for themes and styling with kendo for angular: http://www.telerik.com/kendo-angular-ui/components/styling/
When will a tree component be available in Kendo UI for Angular?
I’d recommend checking out the Kendo UI for Angular roadmap for more information about timelines for components like the TreeView. It’s a short-term goal of ours to deliver this component.
Is there any plans to make a Vanilla JS of version Kendo UI for jQuery so that jQuery wouldn’t be required to use?
We have no such plans at this time.
Transcript
Prefer reading a transcript to watching a video? We've got you covered as usual—check out the full transcript below:
00:04 John Bristowe: Hello, everyone, and welcome to the R3 2017 release webinar for Kendo UI. My name is John Bristowe. On behalf of all of us at Progress, I'd like to thank you for taking the time to hear about our latest release. Joining me during today's webinar is my colleague, Tara, and together, we'll walk you through the latest features and updates we've made to Kendo UI. Before we begin, I'd like to let you know that all the bits we'll be showing you here are available online. 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.
00:40 John Bristowe: 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 be answering your questions during this webinar on Twitter through the 'heykendoUI' hashtag. Make sure to use this hashtag, because it will help us find those questions. Also, we'll be giving out a special prize to the best question that's asked. It's in your best interest to ask, and ask often. It's our way of thanking you for taking the time out of your busy schedule to join us. And please note, that this prize is subject to our sweepstake rules.
01:19 John Bristowe: A couple of housekeeping items before we begin. Everyone should keep an eye open on the wrap-up blog post that we'll be publishing shortly after the conclusion of today's webinar. You'll find this up on the Telerik blog site which should be your homepage. 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. Another bookmark where the 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.
01:54 John Bristowe: 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 and responsive. Support for third-party frameworks is extensive with libraries like jQuery, Angular, Vue, React, and Aurelia. The R3 2017 release is packed with features. In fact, this release is one of our biggest to date. Not only have we improved the product and added new features, we're introducing two new products, wrappers for Vue and React. Tara will be talking about these in just a bit. For now, I'd like to walk you through the changes we made to our Core Library and Angular components.
02:35 John Bristowe: Let's start with the updates we've made to the Core Library of Kendo UI. The Sass Theme Builder was introduced in the R2 2017 release. It's a WYSIWYG tool that's designed to help you create custom themes based on built-in ones that ship with Kendo UI, namely, Default and Bootstrap. In our latest release, we made a number of updates to the Sass Theme Builder and the Kendo UI themes, including updated support for Bootstrap v4, which shipped as a beta release just a few weeks ago.
03:04 John Bristowe: Now, let's move on to some of the improvements made to the widgets in Kendo UI for jQuery. The grid continues to be one of most popular widgets. In this release, we've added number of features that you'll love. The first one is infinite scrolling. Infinite scrolling, also known as endless scrolling, is a new feature of the grid. It enables the ability to display large amounts of data by appending additional pages of data on demand. Loading of new items occurs when the scroll bar of the grid reaches the bottom of its view. When data is returned, only new items will be rendered and appended to existing ones. The great news is that infinite scrolling works for both local and remote data. It's also compatible with grouping, hierarchy, and editing. Let's see how this works.
03:50 John Bristowe: Here we have a grid on the page that's bound to a set of 5,000 data items. You'll notice that as we scroll to the bottom of the View, items are populated on the bottom. Switching over to the code, you can see it's easy to configure the grid to support infinite scrolling. Specifying the endless value of the scrollable property to be true will enable this functionality. This functionality is supported even after you perform operations against the grid. For example, you'll notice that if I sort one of the columns, and then scroll to the bottom of the View, the grid automatically fetches the next items as determined by the page size on the bound data source. Now, in this case, the data is local, however, this functionality would work with data from a remote data source, as well.
04:35 John Bristowe: While we're on the topic of scrolling, I'd like to highlight another update to the grid that enables support for CRUD operations against one that employs virtual scrolling. Virtual scrolling was introduced in the previous release. It's a feature that's super useful when working with large amounts of data in the grid. In this scenario, fetching and processing of this data at once would impose a performance penalty due to limited browser resources. Virtual scrolling helps in this situation by automatically requesting rows when the page size of the bound data source is exceeded. The nice thing here is that with virtual scrolling, you can now perform CRUD operations against a local data source.
05:13 John Bristowe: Sticking with the grid, we've implemented a small change to the behavior of the Pager widget. This is what allows you to control the page index that the grid is displaying. It turns out that, sometimes, all items in the grid can fit into a single page. If this is the case, then showing the pager might not be necessary. With this release, we've added the pageable.alwaysVisable configuration property to allow you to tune this behavior.
05:41 John Bristowe: Let's switch over to the Scheduler. This is a very popular widget, because it provides a great user experience for event planning and coordination. It's responsive, flexible, and provides a wide variety of features. In the R3 2017 release, we've improved the Scheduler by allowing events to span across days in the Timeline view. This is super useful on scenarios where events might occur overnight or over a long period of time. Here's a great example. As you can see, I have a Scheduler here on the page that has a Timeline view configured to span across two days. I can create and modify events, as well as, switch to Timeline view to different hours.
06:22 John Bristowe: Now, I'd like to talk briefly about accessibility. Our engineers have worked incredibly hard for this release to provide updates to our accessibility compliance across the entire framework. This includes adhering to standards like ARIA and Section 508. You can find out more by visiting our documentation. While you're there, you should also check out the shortcuts and keyboard navigation improvements we've made to each control. Speaking of documentation, did you know that we now have a knowledge base section? Check it out, it features a lot of code examples that target customer how tos and questions that have been asked on stack overflow.
06:58 John Bristowe: Alright. Now, let's switch gears and talk about the latest and greatest features we've added to our Angular components. We've added ton of features and updates to the R3 2017 release of Kendo UI for Angular, our native set of Angular UI components. Let's start with an important update to our built-in theme support. As you know, Kendo UI for Angular ships with a Default theme and a Bootstrap theme. This release introduces a preview of our material theme which is based on the material design guidelines. This is a sassy CSS based theme that's supported across various components.
07:33 John Bristowe: Let's see how this works by using the example from our Getting Started guide. It's a simple page with a button component that will change the heading text when clicked. The button component on this page has the default theme applied to it. Let's see how we can use the new material theme. The themes in Kendo UI for Angular are distributed as separate NPM packages. You can also use Yarn, as well. To include a theme in your application, you can either use the pre-compiled als.css file or customize the theme styles by loading the theme source files through the application build process. In this example, we'll go the ladder route. First, we'll install the material theme into the working directory. Next, we'll update our styles to import the material theme. Webpack will spot the change, compile the changes and then reload the page.
08:26 John Bristowe: As you can see, the appearance of the button component has now changed to reflect the material theme. Now, as I stated earlier, this is a preview of the material theme support across various components in Kendo UI for Angular. This theme can be applied to components like the text box, button group, check box, radio button and chart. Make sure to check out the repo up on GitHub for more information about the material theme support in Kendo UI for Angular. We also have documentation on the variables you can target if you wish to override the material theme.
09:00 John Bristowe: Let's now talk about components. Kendo UI for Angular ships with many powerful components. In this release, we've added a new one called the TimePicker. As the name implies, this component provides a time selection control with the dropdown. Let's see how this works. We'll start with an existing project that I've generated using the Angular CLI called Kendo TimePicker. It's basically the same page you saw in the previous demo, except there are no components present on this page. Next, we'll add the date inputs package to our project which includes the new TimePicker component. Once these packages are added to our project, the next step is to integrate the TimePicker module into the NG module.
09:44 John Bristowe: Once imported, we can now add the Kendo TimePicker directive to our template to utilize it. The value property binding is defined underneath in our component. With this in place, we can see that the page has now been updated and displays the TimePicker component. The component itself is highly interactive and customizable. For example, you can navigate through time values using the keyboard or mouse, set ranges with minimum or maximum values, and specify time formats for different cultures. The TimePicker can be used in both template driven forms, as you saw, and reactive forms to the form group decorator. It's a really nice component and one that we hope you'll start using today.
10:39 John Bristowe: Another new component in the R3 2017 release of Kendo UI for Angular is the Range Area Chart. Unlike in Area Chart which is filled right to the access, the Range Area Chart is filled between it's minimum and maximum values. This makes it ideal for plotting values like temperature. Here, I have one cents chart. As you can see, the values are plotting within this range. Looking at the underlying code, we're using the same Kendo Chart Directive as with other charts; the only difference is that we've specified the type property as range area.
11:16 John Bristowe: While we're on the subject of components, let's now take a look at one of the most popular ones in Kendo UI for Angular, the Grid. Many of our customers have asked us about adding more features to the Grid. And I'm happy to report that we've added many new features to it in this latest release; one example is Selection. The Grid today offers a sort of classic selection of single and multiple items. But we wanted to add support for richer scenarios like check box only selection for selecting and de-selecting rows. Another example is In Cell Editing; not everyone wants to put entire rows in edit mode or work with a bulky external form just to update single cells here and there. The Grid now provides editing on a cell by cell level. This dramatically improves the overall user experience and user effectiveness when editing data in this manner.
12:07 John Bristowe: And finally, if you're binding to the Grid with large sets of data, and let's be honest, that's most of us, we've added a powerful configuration option that allows you to combine virtual scrolling with grouped data. It should be noted that this feature is available only through a binding of in memory data. Let's take a look at these new features in action. Here we have a page with a grid that's bound to some data. Let's modify this grid to demonstrate the latest improvements we've made to the R3 2017 release. First, we'll enable check box based selection through the selectable option. I'll do this by specifying a value that can be either a bullion or of type selectable settings. Here I'll set this to a selectable settings parameter with check box only set to true and its mode set to multiple. I'll then add a Kendo grid check box column to the grid to display the check boxes for selection.
[pause]
13:13 John Bristowe: Once Webpack picks up these changes and rebuilds the project, you can see that the grid now has a check box based column for selecting multiple rows. Let's now enable in cell editing. Here I have the same grid as before, except this time, I've made a few changes to the underlying code. First, I've defined a form group to support plumbing needed for performing edits. Next, I've defined editors for each of the columns that we want to perform inline editing for. And finally, I've bound the Kendo grid in cell editing property to invoke create form group. This will also take advantage of any validators defined in this method. With these changes in place, we can see that the grid now supports inline editing against the columns we specified earlier. Note that validators are present in the case of missing values, or in the case of invalid input.
14:08 John Bristowe: At this point, I'd like to pass the webinar over to Tara who has the honor of walking you through the latest products we've added to the Kendo UI family, our Kendo UI wrappers for Vue and React.
14:20 Tara Manicsic: Hey, everyone. Thank you so much for joining us. I'm really excited to be here today with you because I get to walk you through our new UI component libraries for React and Vue. As you may be familiar with, the Kendo team has been building awesome UI component libraries for a while now, including our jQuery and Angular libraries, and we're super stoked to be able to bring you that same support for your Vue and React projects.
14:48 Tara Manicsic: We're gonna go ahead and get started with React, and just jump right in. To get our base React app, we're gonna go ahead and globally install Create React app using npm install -g create React app. Create React app is basically a tool that helps us build our project up real fast, so we can hit the ground running and not have to worry about build configuration, and just lets us concentrate on the code and get these things going, and see how everything works with our new Kendo UI libraries. And once we have that installed, we can use Create React app to create our new awesome React Kendo project.
15:31 Tara Manicsic: An interesting thing about Create React app is, just by default, it gives you the files you need to make your React application into a progressive web app. I won't go into detail about everything that that means, but you'll see when we're going through our files that we have a manifest.Json, and a registered service worker.js file, and these are all components that you add to make your application a progressive web app.
15:58 Tara Manicsic: Just a fun little tidbit as we go through creating our app through Create React app. Once that's all set, up we can go ahead and go into our project directory, and we'll run npm start to see what we have right from the jump off point. Here, we could see that our project is over at localhost:3000, so we'll make our way over to there, and see that we have our starter react project. So far, so good. The first thing I wanna do is open up our code, so we can take a look and see what we have thus far, so we know what we're working with. I'm using visual studio code and just open up the whole directory from the command line. We can see some of the usuals in the main directory, the node modules folder, get ignore, package Json and readme. We also have a public directory that houses our fave icon and main index.html page, and that manifest Json file I was talking about earlier. This is a progressive web app helper that lets browsers know how to display your application. We'll be doing most of our work in the source file today, app js to be exact. There's the service worker file, another PWA tool. And you'll see that we have a yarn.lock file, but I'll actually be using npm instead of yarn. Besides npm 5 being super fast you also get a default package Json lock file.
17:27 Tara Manicsic: Okay, if we take a look inside our app js file, we see we're already importing a few things. And today, we will be adding the ever so handy date picker from our Kendo UI library. This gives us a great looking UI component for users to input dates easily, and we just have to install a few modules and add a few lines to our component's js file. Although, we would usually make a new component for our date picker, today we'll just keep it simple. The very first thing we're going to install is Kendo UI. Yay! And we'll do that using NPMI to install @progress/Kendo-UI, and with NPM 5, you don't need to add the DASH Stash save to save as a dependency, that is there by default. We need this in order to use the UI component library, which is Kendo UI.
18:23 Tara Manicsic: The next thing I'm installing, I'm using Control R to back-search to install our default styling for Kendo UI; basically saying, "Please make everything look nice without me having to do much work." One of my favorite things. And the last thing we'll install is our module of the hour, the Kendo date inputs React Wrapper, and this is where our calendar lives that we will be implementing inside of our application. Heading back to App.js we'll import all the fun parts we just installed. First Kendo UI, of course, then the default theme, and last but far from least, we import calendar from the date inputs module.
19:10 Tara Manicsic: At this point, I will save it, and then save it again 'cause I guess BS code thought I wasn't serious. There we go. Then, jump down into our template, remove the default filler and add our calendar component. The first thing we'll add is the value, which we will bind to this.state.datetime. We will set this anytime we trigger a change, we're binding that change event to on "change function" which we'll cover in a second. But first, we create a constructor passing at the props. Here we'll also pass props to super, we don't technically need to pass props to super because we're not using this stop props currently in our constructor but it is best practice to do this, what I like to call future safing your code.
20:00 Tara Manicsic: Next, we'll add date time to this.state, and assign it to the current date. The last thing we'll do inside our constructor is bind this to this.onChange, so it knows what we're referring to. Finally, we create our onChange function, passing it if the event that was triggered on the click. Whenever onChange is called, we wanna set state to this to reassign date time to the value and sender on the event object. If you wanna see what this object looks like, you can add a console log before or after the set state function, and you can log out either "e" or "e.sender". Okay, that's it. We have everything that we needed to add to our App js file, everything that we set to our calendar component, we went ahead and made a constructor, so it's set as soon as we build our component and we have our function for when we make changes and trigger the onChange function.
21:02 Tara Manicsic: We'll go ahead and click Control Backtick to open up our terminal. I can't recall if I ran NPMI when we first started so, I'll go ahead and run it again for safe measure and good tidings. And I'mma go ahead and clear that out, and run NPM Start. Again, if we go back over to localhost:3000 and take a look, we should see our beautiful calendar. Yay! [chuckle] You see, we have everything styled out because we imported that default styling. That was all the work with it we had to do to make it look this great, and to have all those little interactions, like the hover overs and the color changes, and you even see that when you hover over a number, you will get that whole date time value with the day-month, date-year, all that information that you want from a calendar.
22:03 Tara Manicsic: That was really easy. That was the way that you will bring those components into your React projects. If you come back to kendoui.com and look again at our support for React section, you will get everything that I went over, plus more. And at the very bottom, if you keep scrolling down, you'll see that there is also, instead of using NPM, you can also do the CDN files, and that's basically letting you access these files from unpackaged CDN services, but also down here are all of the widgets that we have available for you to take advantage of. If you get a chance, go there, check those out, and find all the fun things that you can do with our new support for React and Kendo UI.
22:51 Tara Manicsic: This release we're also really excited to add support for Vue. Vue is also a really great library or framework, it's pretty lightweight too, so it can't be considered a library but it's also very adaptable, so you can build it up into a framework.
23:08 Tara Manicsic: We're going to use the Vue CLI to create a project that we're going to incorporate our grid component into. First things first, we globally install the Vue CLI. Then, we're going to use Vue in it, and the Webpack template to create our awesome Vue Kendo app. You have many options for templates like PWA browserify and even Simple to get the cleanest, simplest setup. The Vue CLI will guide us through a few questions to get set up, and will be more specific on some, but mostly, we'll just say yes to everything. Then, we can go into our project directory. Oh geez, I guess, they want me to actually do it correctly. [chuckle] And we can run NPM install to get all of our modules once we're in there. After everything is finally done installing, we can run NPM Start which you can see in our package.json file is an NPM script that says to run node on build/dev-serverjs. Once that's built, we can navigate over to local host port 8080 to see what we've got. Ta-da! It's a lovely starter Vue app.
24:32 Tara Manicsic: Okay, let's get back to the code. When we list out the main project directory, we have the usual suspects again, so let's open it up in VS Code to dig in.
24:45 Tara Manicsic: In build, we have some build files and build tool config files, config has config files. But source is where we'll be doing most of our work. If we take a look at hello.Vue, we can see it's what we were being displayed on the starter app. The first thing we want to do is install what we need from Kendo, starting with Kendo UI. Like before, we don't add the -s flag because it is included by default from NPM 5 Plus. But the next two are actually dev dependencies so we will add a -D flag. Then we need to install the grid wrapper for Vue which will be npm i -D @progress/kendo-grid-vue-wrapper. This is the real meat of what we'll be using today. We'll also need the supporting character of data source to pull our data into the grid.
25:43 Tara Manicsic: Now, if we take a look at our package.Json, we should see that the Kendo UI module is in its rightful place under dependencies and the other two are under dev dependencies. This time, instead of installing the default Kendo UI styling like we did with React, we will actually open up the index.html file and just paste the links to our style sheets. Next, we're gonna go into our main js file to let our Vue app know how to use all of our Kendo UI imports. First and most importantly, we add Kendo UI, then the grid, grid column, and the Kendo grid installer from the grid Vue wrapper module. Next will be the data source and data source installer. Followed by taking advantage of the vue.use to use [chuckle] our plugins by passing in our installers. Then we add all of these, the data source, the grid, the grid column to our Vue app in the components object.
27:14 Tara Manicsic: After that, we just save and close and never touch our main js file again, for now, at least. [chuckle] At times like this, I like to run NPM Start to see if we've broken anything. And aha, seems like I've forgotten the ever important 'from' in my import statements. Notice how I also had a red squiggly line there. I guess, I have to edit the main js file sooner than I thought.
27:43 Tara Manicsic: I'll save it again, and see we have a successful compile. Let's go ahead and take a look at the browser to make sure there are no errors there either. Clear view on this window, as well. See what I did there? Okay. Back at it. We can definitely close main js now and move on. Real quick, I want to nip into the app.vue file to remove the big Vue logo just so we have more room to check out the grid component.
28:14 Tara Manicsic: Everything else in here looks like it's okay and it can stay for now. We'll save and close that and the rest of these files because now we only have one more file to change, the source component's hello.vue file. Again, usually we would separate the grid into its own component but for today, let's just stick it in here. First, we'll remove all of the old code and change the class to grid, for clarity's sake. Now we can start adding our Kendo components, starting with the data source. Kendo data source will have a parameter of its reference. The type of data that this data source is. Page size, just how many data items to display on the page as a default. And the transport read, since we're grabbing this data from another location. In this case, we're just using a svc file from our demos. Oops, let me fix that syntax. Then we'll close out the Kendo data source component.
29:45 Tara Manicsic: Next up on the docket is finally the Kendo grid. Inside here, we'll apply some grid settings. Height, that's pretty self-explanatory. Data source ref is the data source we just added above.
[pause]
30:15 Tara Manicsic: Then, we're gonna give our grid some functionality by making the data both groupable and sortable. We'll see this in action once we run the code. We also let the pages of data not just the page in the app itself be refreshable. We also let the user change the page size, and also give them buttons per page to navigate around the data. I find the next step very straightforward. We first added the Kendo UI grid component, and now inside there, we add the Kendo grid columns component. This first Kendo grid columns component will be displaying the contact's name from our data source file we bound to this grid. The field matches the key to the data we have, and it will fill in the value. The title is the header of that column. The width of the column is 250 pixels, because I said so. I've added three more columns for my data source. The second and third have no width and will fit in where they can. Then, we close out the Kendo grid component. I've also scrapped all the other styling and just added a padding around the grid for readability.
31:51 Tara Manicsic: If we open the terminal, we can see, I already had it compiling in the background; thanks to the Vue CLA with every save. If we go to localhost:8080, we can see our beautiful grid. The scrolling and hover, all these actions all come from that Kendo UI styling that we added. Since we made our grid sortable, you can click a header and the data will sort by that column. On the bottom is the page menu where the user can request how many items per page are displayed.
[pause]
32:37 Tara Manicsic: And on the bottom left is where we're paginating the data. And since we chose five as our page-able button count, that's how many page buttons you can choose from, as well as, click around to navigate the arrows to go through the pages. Since we made the groupable option true, you can also drag a column header to the top to group all those grid items that match that column property.
[pause]
33:16 Tara Manicsic: And we just had to install the Kendo modules and hook them up to our component. This is much easier and faster than piecing together all of that information to form a grid in Vue, or React, or Angular, or jQuery which are all the options we have to use Kendo UI with. You can check out and play around with more of our demos on our demos.telerik.com page. There are demos for the same component in Angular, jQuery, Vue, and React implementations. It's pretty fun. Come play. If you have any questions, please reach out to us on Twitter I'm @Tzmanics and all of us on the team are @KendoUI. We would love to hear from you. I cannot wait to see what you create. Thanks for hanging out with me this afternoon and happy coding.
34:15 John Bristowe: Thanks, Tara. Amazing stuff. I can't wait to see how our customers can take advantage of our latest release. I'm especially jazzed about our wrappers review. Definitely some new ground for us and our customers being discovered here. There's one more thing I'd like to cover before wrapping up and that's Telerik Reporting. As some of you may know, Telerik Reporting uses Kendo UI under the covers to render out beautiful and highly informative charts as part of our reporting solution. In our last release, we introduced a preview of Telerik Reporting with our Angular viewer component. This was a significant milestone for us, and one that many customers had asked for.
34:53 John Bristowe: In the latest release of Telerik Reporting, we're introducing more features and improvements that make it that much better. For example, we've added web report preview accessibility, enabling wider user audiences to view web report previews. Our HTML5 based report viewer support major accessibility features like comprehensive keyboard navigation in both the viewer and its content and dynamically extended markup that provides support for the most popular screen readers.
35:22 John Bristowe: We've also added new financial charts to Telerik Reporting. The OHLC series are designed to represent information about price movement of a stock over a period of time using candle stick or bar markers. And finally, we've implemented a bunch of performance improvements. For example, We've improved the Excel grid generation algorithm that significantly reduces the time required for rendering huge reports to Excel. PDF rendering also now handles the report pages continuously. This enables us to release.NET objects that keep page structure immediately after the page is rendered. Overall, Telerik Reporting is a great product and should be strongly considered by folks using Kendo UI.
36:04 John Bristowe: Well, that about wraps things up for us. Before we go, I'd like to share with you a couple of announcements. On October 11th, we'll be hosting the Telerik UI Tools R3 Release Webinar; please make sure to register. You'll hear and see everything that's latest and greatest in our R3 2017 release. Also, later this year, we'll be hosting separate webinars for our wrappers for Kendo UI for Vue and React. The purpose of these webinars is to provide you with a deeper dive of what you saw here today. We also hope to provide more updates on the product line at that time. Keep an eye on the Kendo UI website, along with your email inboxes. Invites to these webinars will be sent out later this year.
36:50 John Bristowe: On behalf of Tara and the rest of us at Progress, I'd like to thank you for joining us for today's webinar. We hope you can take advantage of the feature's improvements you've seen here today. We look forward to seeing you on the next webinar. See you next time.
