Join us as we recap the Kendo UI R1 2018 Release Webinar. Catch a replay, see what's new and check out all the answers to your questions.
On January 17th we released Kendo UI R1 2018 with lots of cool new stuff, and on Feburary 1st we hosted a webinar to cover all the latest features. This is a quick recap of what was in that webinar, along with a link to the recording, a list of questions (and answers!), and a transcript of the entire webinar too.
The webinar featured demos and presentations by John Bristowe, Carl Bergenhem, Alyssa Nicoll, Edward Charbeneau, and Tara Manicsic.
Key topics covered include:
First of all, if you missed the webinar we strongly encourage you to go watch the webinar so you get the full multimedia experience. For your convenience, you can also watch the replay right here.
And now, here are the questions people asked during the webinar, along with our answers.
Q: Is there an easy way to import all Kendo UI Vue components globally?
A: Yep! Use @progress/kendo-all-vue-wrapper via npm.
Q: can you show a roadmap for JQuery-free Web Components that support Shadow DOM?
A: Our jQuery-free components currently include our Angular and React widgets - check out their pages! No pure web components at this time.
Q: Any plans to provide CLI-based application starter templates (e.g., line of business) to display several controls together?
A: We've built better integration through Visual Studio. Going forward, we'll continue to evaluate options. Part of the challenge is how fast these tools move! :)
Q: Does the 2018 R1 Release include Material Design support for the Kendo-Grid?
A: The Grid is still being worked on for Material - more to come in the upcoming weeks!
Q: is it possible to set the height of a tree to 100% of the screen and get a scrollbar to scroll vertically if the tree is higher?
A: If the TreeView exceeds the height of the viewport then you can scroll vertically. When expanded to 100% of the height, we don't adjust to fill the space. That's because the spacing out of nodes is tricky.
Q: Does reordering a grid also provide a feature to drag a column outside so its hidden? And if can I drag them in later?
A: We don't have this feature built into the Grid. We use buttons to trigger these events. Drag & drop can be tricky in a web context.
Q: Regarding KendoAngularSPA: is it possible to save these kind of application under source control (TFS) ? ( $ sign was blocked )
A: Shouldn’t be an issue adding Angular projects with @KendoUI components in it to source control!
Q: Does the Kendo UI for Vue Grid support websockets like the jQuery version does?
A: That shouldn’t be a problem. I don’t have any sample code, but if it’s available in jQuery it’s in Vue as well :) Support can help if you run in to snags!
Q: Please share the roadmap for mobile widgets which have not been updated/improved in a while...
A: While we didn't cover the hybrid mobile UI components during the webinar I recommend keeping an eye on the roadmap page. Also, if you'd like to chat more about the mobile-specific widgets feel free to reach out to bergenhem@progress.com and we can chat more.
Q: Is there a distribution for the React components that is not NPM? Perhaps an AMD release like for Kendo UI for jQuery?
A: We've found that most React developers are dealing with NPM, which is why we decided to distribute there. Currently no plans for additional methods of distribution, but we're always interested in hearing how people prefer to work with our components.
Q: We are just finishing developing our application with the Kendo UI wrappers for React, now that we have the full components available why would we change and use them instead of the wrappers? What are the advantages?
A: With "full components" built on React, we eliminate the dependency on jQuery. These are full React implementations. The advantage is a cleaner separation from Kendo UI for jQuery.
Q: Alright, that makes sense. I will note that we (Applied Predictive Technologies) are using a custom build that works best with an AMD-like distribution of Kendo UI. Thanks for the answer though!
A: I'll keep this in mind for future versions for sure! Thanks for letting us know.
Q: Did you consider adding a dashboard content to allow drag and drop functionality for customized Items that can have different sizes?
A: We don't provide a dashboard component. However, it's not hard to create one. We have a few examples online about how to do this.
Q: Have the compatible jQuery libraries been updated along with the shipped jQuery libraries?
A: Yes!
Q: A lot of these updates are framework specific, is Kendo UI still going to maintain focus on stand alone JS objects that we currently take great advantage of, without the necessity of a framework?
A: Kendo UI has always had dependencies on frameworks like jQuery. We don't anticipate that changing anytime soon.
Q: Sure, JQuery, no problem, but Vue, Angular, etc. That's what I mean. We have a platform with no JS framework. Just want to be sure the widgets will still be wonderful and supported.
A: These have moved (or are in the process of moving) to their own set of dependencies. We are committed to supporting all of them.
Q: Can we use Kendo UI to build the Controls Dynamically based on a JSON Schema using Angular 5, bootstrap V4?
A: I haven't tried this but it should work. You have to write some of the plumbing yourself to create the components dynamically yourself, but it should work.
Q: Are your gauges, and charts in general for that matter, based on d3.js? I noticed they are svg.
A: These are fully home-grown! Built from the ground-up (we call it the Kendo UI Drawing API) and offer both SVG and Canvas rendering options.
Q: Can Tree View be used on Angular 1 project?
A: For AngularJS 1.x we already have components based on the existing Kendo UI library! Check out this demo to see how it can be implemented.
Q: When I looked at the documentation last time it seems not all the features have been imported to the new react components, am I mistaken? Do the new react components support all the features?
A: The new React components are building out their features as we speak. Since these are built from the ground-up they do not have all of the features like we have in jQuery. Luckily we have React wrappers for our jQuery Grid that can be used while you wait for more features to be added to our jQuery-free Grid!
Q: All of this is being demoed in Kendo UI for Angular. Are these new changes available in Kendo UI for jQuery too?
A: Kendo UI for jQuery already has all of this functionality in its Grid! :)
Q: Window and Splitter are available in that?
A: Yes, Window and Splitter are now available for Angular!
Q: When the user changes the Splitter sizes, can these changes be saved. It might be nice to "remember" these settings when the same user visits the same page.
A: Currently this is not supported, but you can submit this as feedback to see it in future versions of the component! Here's our feedback portal for Kendo UI for Angular.
Q: Thank you, we have built The angular components ourselves, it would be great if you have a sample to demonstrate the same. We could replace our custom code with very well tested and trusted Kendo UI
A: We recommend trying out the components and seeing if our widgets can be dropped in and tweaked to match your existing components. Dynamic generation will always require a bit of a middle layer to handle how to translate the JSON in to configuration settings. If you run in to specific issues we have support, but if you need more help around the middle layer we have professional services that can help out!
Q: Can you resize if your browser is zoomed to 80%
A: While zooming in and out with your browser can have some unforeseen issues pop up here and there, you can still try to resize the browser and see how the component behaves.
Q: How to connect datagrid with mysql?
A: You need to write the connection plumbing yourself. That's been the case since v1.0 of Kendo UI.
Q: So, I love the grid. Seriously. And I've added standard logic to our app that saves user configuration changes (resize, reorder, show/hide) as JSON in local storage so that when a user returns to the app later, they will be presented with their own personal settings. Has this ever been given any thought to be a property of the grid widget?
A: Glad to hear that you love the Grid! It's one of my favorites too :) Did you create this for the Angular grid, or are you working with our jQuery-based grid? On the jQuery side we've added this functionality already (see the demo) but on the Angular side it's not there yet.
Q: has there been any performance metrics & improvements for larger data results being loaded/updated into Kendo UI Grid?
A: We run performance tests on our components. We haven't published any results lately. However, our demos are good and showing how performant our controls are. I would recommend writing a quick prototype to see for yourself.
Q: Does the grid supports different data type contents on each row in a same column? I mean, one row has numeric data type in column. In the same column on next row, it can have drop down box, next row might have check box etc.?
A: Yes, through cell templates.
Q: Do you think we could use Kendo UI to build dynamic tabs and dynamic controls within the tabs using a JSON, customize events for the dynamic controls.
A: It's possible. We provide the plumbing to do this. However, this is a pretty specific use case. We don't tend to target these specifically given the number of permutations that might exist. The good news is that you should be able to do this.
Q: Is there any difference in performance between the react wrappers and the new components?
A: We've done a lot of performance tweaks in the wrappers, but the new components are built from the ground up to take full advantage of the React framework itself. With the new widgets you'll see improved performance when you start working with larger data sets or updating just single cells or areas of a component that don't force a full repaint.
Q: Again for Angular4: is it possible to save the settings of a Grid. Let say like the parameter of column order or size?
A: Not yet, but you can feel free to vote on this feedback item to see this included in a future version!
Q: The Kendo UI Angular grid has had column resizing for quite some time. Is there something new about it as part of this release?
A: Yes, that's true. This is new for the native implementation we've built in Kendo UI for Angular. It's important to remember that we don't have feature parity across all the frameworks we support. We're working very hard to get there. :)
Q: I used Kendo UI Gantt Chart AngularJS version. But it mostly uses Jquery things. Is there any components which is purely AngularJS? Particularly Angular 1
A: Unfortunately we do not have pure AngularJS 1.x components - the jQuery-based widgets and their wrappers are what we have for folks looking to target AngularJS.
Q: Hi, is there angular version of datasource?
A: There's a long answer to this, but the short is: no because it's not really needed. Medium answer: The DS is important in jQuery where without it we manually create requests. On the Angular side the Angular framework itself (through services, or rxjs, or whatever else it might be) is in charge of handling data, so we don't want to override this. We do have the Data Query package to help with Kendo UI-specific data manipulation.
Q: JQuery. Interesting. Very similar to what I am doing. What is the difference between kendo.stringify and JSON.stringify?
A: Not much difference. It's plumbing. Uses JSON.stringify in browsers that support it.
Q: Would it make sense to create some public helper (class, component ...) to convert filters to odata query strings?
A: We actually have this within Data Query! Check out the northwind.service.ts file in this demo.
Q: assuming the new kendo UI components for react already have all the features I need, I should be able to migrate to the new stuff by changing the paths in my imports. for example: from this import {Grid} from '@progress/kendo-grid-react-wrapper'; to this import {Grid} from '@progress/kendo-grid-react'; am I correct?
A: There are a few features that might be missing when moving over to our native components. That's because our jQuery components have been available for a long time compared to our latest ones built on React. I'd try prototyping some existing code you have to see if it works.
Q: How to use Kendo UI Grid with lazy load option?
A: This depends on which Grid you are looking to utilize. In most cases this is referred to as “virtualization” and can be seen in our jQuery, Angular, React, and Vue components!
Q: And getting back to the grid, I'm writing to storage in the actual events so it is saved for the user automatically. I also added an option in the columnMenu to reset it to the original configuration. I have it all built out as a central part of our grid, but it would be nice if a "persist: true" would take care of it all. Just a thought.
A: This seems to be related to the Angular Grid, so we will answer with that in mind. This is something that has been reported in our feedback portal and we highly recommend voting and commenting on this feature to see it in the future!
Q: Just to confirm toODataString(state) - state is json representation of grid filter, sorting etc like in jquery version?
A: This function takes the State object (filter, group, sort, skip, take) and serializes it to JSON – much like in what we did with the jQuery version of the DataSource when interacting with an OData backend. This can be used in your Angular services to assist with interacting with an OData backend!
Q: do you guys discourage the user of the Kendo UI wrappers now that the full component are out?
A: No. The wrappers are great because they use our jQuery widgets under-the-covers. However, if you are looking to jump on-board the future direction of the components then I would RECOMMEND checking them out. "Discourage" is a strong word in this context. :)
Here is a complete transcript of the webinar if you prefer to read, but you miss out on all the great examples so definitely watch the video too.
John Bristowe: Hello, everyone. My name is John Bristowe. I'm a member of the Developer Relations Team at Progress. I'd like to thank you for taking the time to watch today's webinar. Joining me are my colleagues Tara, Alyssa, Ed, and Carl. Together, we'll walk you through the features we've added to the R1 2018 release of Kendo UI. The theme for today's webinar is to show you how Kendo UI helps you build better apps faster. We've added a whole set of new features to accomplish that and deliver an enhanced user experience. Before we begin, it's important to let you know that everything we'll be showing you here is now available online. So please make sure to check out the Progress updates available through your account.
Now, I'd like to pass things over to the product manager for Kendo UI, Carl Bergenhem.
Carl Bergenhem: Hey, everybody. Carl Bergenhem here and I want to kick things off by taking a look at some of the highlights of what's new in R1 2018 with Kendo UI starting with some core library updates, we took a look at the backlog that we have of issues and bugs across Kendo UI, and I can say that with this release we've covered over 250 issues that we resolved and this is a huge bug-fixing effort that went through the core library and can therefore be seen in our jQuery offering, our UI offering, and our UI for .net core offering as well. On top of this, we've improved our Odata support by enabling batch editing functionality in the data source in Kendo UI. The scheduler now supports drag & drop of multiple events, so a big feature that a lot of you have been asking for in the scheduler.
We took the ButtonGroup out of the old Kendo UI mobile library and put that in with the rest of Kendo UI in that name space. Now, one thing that I'm very excited to announce with this release with R1 2018 is that we have a batch of new React components and these are built from [the ground up, are not dependent on any library whatsoever, and this is the library that we're going to continue to expand throughout 2018 and beyond. This initial release contains the grid and a lot of features included in the grid. We have editing. We have paging, sorting, filtering combined with redux. You can work with your own state if you want to. We also have the DropDownList, Calendar, DateInput, Numeric Textbox, so a lot of your forms are covered, and we also have the PanelBar, TabStrip, and then Animation Framework.
There's a ton more that I encourage that you go ahead and check out on our overview page. We've also enhanced the support that we have for the React wrappers and for our Vue components. With R1 2018, all of our Kendo UI components are now available as Vue components. We've also gone ahead and added Vue templating as a part of our Vue support, and for our React wrappers we've gone ahead and added a ton of additional components as well. On the Angular side of the house, we've done a lot of updates and we've included three brand-new components and these among the top-voted components in a UseAVoice portal, and this includes the new TreeView component, the new Splitter component, and the new window component.
The Grid has received a lot of love as well, including column resizing and reordering, a new filter menu similar to that of what we've had in jQuery, and this is fully accessible supporting all the latest and greatest standards within accessibility. We've done other various updates in Angular as well, including features spread out across all the components and updates to our themes, including the material theme, and updates to Bootstrap v4.
John Bristowe: Thanks, Carl. I'd like to spend the next few minutes diving deeper into what's new in Kendo UI for jQuery developer. Let's start by talking about batch processing support in the data source component. The OData protocol defines a way to query and manipulate data through a simple set of operations. Now, occasionally, it can be advantageous to execute these operations as a batch. Doing so can reduce the number of requests hitting a service endpoint and, as a result, improve the overall scalability of your solution. Batch processing is a part of the OData specification, and it's facilitated by grouping multiple operations into a single HUDP request payload.
Now, the DataSource component for Kendo UI has a long history of supporting OData, but a couple of things have been missing in terms of its compliance with the specification; in particular, batch processing support. The latest release introduces support for conducting batched operations against OData-based service endpoints through the DataSource component. Now, some of you might be wondering, "Wait a minute. The DataSource has supported batch operations since the first version of Kendo UI," and that's true. However, that hasn't been the case for the OData protocol, and that's because the implementation details for supporting batch processing are different from protocol to protocol.
Let's see how this works using the grid which, incidentally, now supports this capability. Here I'm using one of the examples we provided in the UI for ASP.net NBC examples repo up on GitHub. So if you want to follow along, feel free to clone it and try it out for yourself. This grid has been configured to use an underlying service that supports the OData v4 protocol. I'll make a few changes like editing the values here and here. To trigger the update through a batch operation I'll click the save changes button. I'll now bring up Chrome Dev Tools and navigate to the network tab. Here you can see the batch request that's been made to the service endpoint. Support for OData v4 batch processing is evidenced by the content type request header here and by the request payload here.
Support for this capability is built into Kendo UI. There is no heavy lifting necessary to make this work. It's simply a matter of specifying the batch property to true on bound DataSource. Overall, this is great news for developers targeting endpoints that support OData. Furthermore, it's worth noting that more improvements to the v4 spec compliance will be made throughout the year. Next is the button group widget. The button group has long been a part of the hybrid mobile solution for Kendo UI. It's a widget that presents a contextual menu of options that is typically found at the top of a page. It could be used to filter data, swap elements, and anything else a developer wants to provide.
Now, historically, it's been non-optimal to include the button group when building desktop or responsive web applications. That's because it's resided in the mobile library of Kendo UI. With this release, we've added the button group to standard Kendo UI in order to make it easier for developers to target. Speaking of targets, we've updated the dependencies for Kendo UI across the board. Libraries like JadaZip, PacoDeflate, and even jQuery itself have been updated to reflect some of the latest changes that have gone into them. This should help developers looking to take advantage of the features they introduce. The scheduler is a popular widget in Kendo UI. With it, you can get an Outlook-like interface for scheduling events across a timeline.
In the latest release, we've added support for moving multiple events through drag and drop. This feature is supported by simply setting the selectable property to true. Multiple events may be selected by pressing down on the control key. This feature will improve the overall usability of the scheduler widget for users. Now, let's turn things over to the newest member of our team. Alyssa will be walking you through the latest features added for Kendo UI for Angular developers.
Alyssa Nicoll: Hello, everyone. My name is Alyssa Nicoll, as introduced and I am the newest member to the Progress Dev Rail Team. My title is Angular developer advocate for Kendo UI, I am so excited to be here to talk about the updates in Angular for our 2018 release. So a quick introduction. That was me. Also, wanted to give you this link ahead of time. If you are following along, and you want to be able to have quick access to some of the links I'm going to bring up, under telerik.com/kendo/angular/ui. If you go to the release history, you'll see at the very, very top. We're covering the 2018 release and we'll just be diving right in. So yeah. This is a handy link. All right. So as you probably saw, we're going to be hitting on some pretty cool things like new components, like the TreeView window splitter gauges.
Also, the enhancements to the Grid. Going to cover those. We really just need to get going if we're going to fit in our time limit. So the TreeView. Yes. I created a demo app for today and, currently, it's running. It's just an Angular project that I spun up with the CLI. It's running at local host 4200, as one would expect with NGServe. I created a couple of components. TreeView you'll see here; Grid, Gauge. So if we go ahead and jump straight into TreeView you can see that I have just created a component. It's got an HTML file where I am pulling in the TreeView, and then it has the TypeScript file, which I started off by using the demo TreeView. If you go to our UI Components page and scroll down, you can see all of the components we have to offer.
TreeView being one of them and so what I did was I followed along, which our docs are actually really phenomenal. Being new to the team, I'm still combing through them and learning more and more, but the more in-depth I go, the more I find out. I'm like, "Wow. This is really well documented." So definitely check them out if you haven't yet, but on the installation process ran through this with literally no issues; installed the Angular TreeView along with the animations because it's a dependency as well as common and core in RXJS, as you can see down below, and then if we go to my ... Hang on. Let me just go ahead go app module TS. So we go to my app module. You'll see here where I generated the project and then all green is the stuff that I added in.
I was a busy beaver, so I added in the TreeView and then down here if we scroll in the imports, TreeView as well as things like the gauges and layout, tab strip, things like that. They're all in the imports and if we go back over to our TreeView component, like I said, I started off with just the default demo and then I kind of wanted to add some more fun. I thought, "Hey, what would be more fun than furniture and carpet?" Not that furniture isn't the most exciting thing, but it just doesn't get me too excited, so I decided. Let's just pull up the project. Shall we? I decided to use doggies. I wanted to pull in types of dogs. So if we go back over here, you'll see that I created public-type of dogs and then inside of NG on init, I'm sorry for the super rudimentariness of this.
I know it should probably be in a service. I just didn't do that, so forgive me. I thought it might be like a smidge-pidge easier if all of the stuff we were talking about was in one place, but anyways don't follow this convention. Just pay attention to what I'm talking about and we'll all be fine. I imported the HDTP, HTGDP, there's way too many Ts in that, client and I'm using this.get, and I'm passing this beautiful dog.ceo to grab a list of breeds and I'm going to then loop through and this is like a super-duper important part. If you're super excited about the TreeView like I was, but then you try to go use it with whatever random data you happen to have handy, it probably most likely isn't going to be formatted properly. Yay! So let's just cover this right here right now, so that nobody is going to be freaking out.
We're going to go over to TreeView demo. We talked about how MPM installed through in those into the module imports, yes, yes. We've got it. Make sure you have a theme. All this should be pretty standard for you if you've ever used Kendo. If not, like I said, our dogs are pretty killer. Back to our current task at hand, understanding how the data has to be structured, so it has to be an array of objects. Don't stop there. An array of objects with text and item properties where text is the label and items is in another array of objects. So I know that sounds super crazy and fandangled but, essentially, see how we have text here. It has to say text. It can't be like Bob or something as your key.
Then you have another set of objects and those also have to have text as the key. So without further ado, let's check out our loops. So we have a couple of loops here to drill down into the object and grab the bit of data that we need and push it into the objects inside the array properly. Once we do that I'm literally just being like, "Hey, TreeView," which is right here. I'm setting the nodes to data and if you noticed, I'm saying, "This.data," because that's the variable that I'm just pushing all of this goodness into. I put the three little demos that I'm talking today inside of tabs because I thought that would just be super clean and nifty.
So inside of our first tab, this TreeView with all the doggies, and these, my good friends, are nodes on the TreeView, and if we go over to like "Greyhound," you've got Italian, Hounds, you got a really long list. This I wrapped so if we want to actually just like super nerdy on you here, build it. Build it bigger. Build it better. Okay, so I went ahead and was playing with styling things because that's what I do. I play with styling all the things so I grabbed this UL and I told it to be full X, and then I told it to wrap. I gave it like a max height of 200, but we could probably go ahead and bump that up to like a 600 pixels and as you'll notice, this is just really one long column and it's wrapping because I told it to.
Really, you could have one long list of things if you wanted, and it's really up to you, but yeah. So these are TreeView nodes and that was the TreeView, and I don't think I missed anything, but yes. Do ensure that your data is structured properly and you'll have a wonderful time with the TreeView. Other than displaying data, I also wanted to go over that I think this is really cool. I was like, "What? It does more things than just that? Hold onto your pants." So yes. You can. I should probably make ... I always forget to make the text big. Okay. This is also the TreeView but, as you can see, there is checkboxes, which is so super cool. Could you see how I checked furniture and then all the sub-children were selected?
If I unselect a core, then like all of these are unselected, so it's like pretty darn nifty. They have other modes other than just like display that are really cool, and we don't have time to dive into all of those and how to use them but, again, check out the docs, super awesome. Okay, new fancy Gauges. We've got three of them. I'm pretty sure that Arc is the one. I'm going to click on this. Open up the docs is the one that I went ahead and threw into our project. There is three. Like we said, the Arc, Linear, and Radial, and if we go back over to our project and click on "Gauge," here is the beautiful Gauge, and inside of the component it's like being told at different percentages to change color, so that was pretty fun.
This is just a Kendo slider element. Let's go back over to our codes. If we go to AWA at module TS, so a couple of things were needed here. We needed to include the slider module from Kendo and gather inputs and then the Gauges module from Kendo Angular Gauges and, of course, as we did before, make sure you put those inside of the imports and at that point, I wanted to. Like, it's totally unnecessary, but I created a Gauge component and just like our other one I put the Gauge goodness in the HTML file and this is the color-changing things that I was talking about, but if you are following along and you're on our docs looking at the Gauges, components, like we said. Go back to this and hit Gauges. You can check out this demo among many other demos to look at all of the cool, fun Gauges.
I think these are really useful on dashboard pages to display. Just really anytime that you can display information in not block text form is like really, really helpful to users. They probably retina it more or make more of a point, so it's really, really cool that they added this in, so check out the Gauges. Back over to our doc. So Splitter Window Material Theme, yes. I'm going to try to stay within five minutes here. So we've got three things to talk about real quick. The Splitter; so the Splitter, as it says, it cuts the page into different sections, and it lets you control like the size and layout of those sections, so down here in the example, as you can see, these literally bars or splitters on the page that are resizable, so it makes sense; pretty straightforward.
If you scroll down below, you can check out orientation, paint settings, keyboard navigation, et cetera that are all underneath the Splitter. If we go back, let's see. The Window is the next one. This window is a non-modal HTML window, so it can be moved, resized, loved on a little bit, whatever you want. I won't judge. So yeah. I mean, it's pretty basic, but it's also really cool because having to create your own custom one and then include your theme that you're already using is going to be so much easier now that it's a component provided by Kendo UI. Bum, bum, bum! Last, but certainly not least, we have released a material theme update. If you want to check that out, literally under components. Hit up styling, and then theme material, and I don't think that's the one I'm using right now, but you can.
As you see here in the docs, check out all the components what they look like with it, and I think I hit our time limit on that section. This Grid I am so super pumped to talk about the updates to the Grid. I'm going to switch my camera real quick. I have NPM installed, the Kendo Grid, and I created a Grid component if I go over here to our Tree here. I created a Grid component and inside that Grid component we have this HTML that we're looking at and then we also have this component file, which I put the example Grid. Bum, bum, bum. That is populating with ... Let's go ahead and check out that tasty Grid with these food items. So it's got category IDs, category name, and description.
I want to show you some updates that they've done to the Grid so far. Right now, this is how it usually behaves, but if we go ahead and add on an attribute of a reorderable and we set that to true. Save it. Go over and it refreshes. Go back to the Grid. You will see that now we can click and drag columns oh so nicely, and reorder them how you will. I can go ahead and bump up this guy so we see it really close up. Yeah. It's very nice reordering happening here and we have another one called, "Resizable," and if we set it to true, oh watch the magic. Similar to right now if I'm hovering over this, this is no options, but if we do the resizable, you'll see that we have this cursor that's like, "Hey, you can go ahead and resize these columns. Bloop! Lovely, isn't it?
This one has to do with accessibility, so if we set our next attribute to "navigable," such a fun word, navigable, we set that to true, and we're going to go ahead and I have this screen renew that I like to use when testing out things for accessibility or sometimes for actually just let it run reading to me. Chromebox, so I'm going to go over to that extension and enable it.
Automation 1: Chromebox spoken feedback is ready.
Alyssa Nicoll: Now, you hear Chromebox talking.
Automation 2: Release Webinar tab.
Alyssa Nicoll: We're going to go over to the Grid.
Automation 2: To Grid. Tab selected two of three. Category ID call and header read-only not selected.
Alyssa Nicoll: I just pressed tab and it tabbed into the Grid. As I go-
Automation 2: Category name, description "soft drinks, coffees" ...
Alyssa Nicoll: ... And press the arrow keys ...
Automation 2: ... "Tea, beverages, condiments, sweet and desserts."
Alyssa Nicoll: ... It goes through and reads it. One thing about screen readers or at least Chromebox, if you're done reading a certain area, so like ...
Automation 2: "Confections."
Alyssa Nicoll: Okay. That was pretty-
Automation 2: Cell not selected.
Alyssa Nicoll: That was pretty short, but if we go to a long one and we don't really want to listen to the whole thing ...
Automation 2: Desserts.
Alyssa Nicoll: ... You can press enter and end it.
Automation 2: Desserts, candies, and sweet.
Alyssa Nicoll: Yeah. I want to go and pull up. Bum, bum, bum, bum, bum, bum, bum, bum!
Automation 2: Window 2018 release webinar. Dropbox.
Alyssa Nicoll: She's still going.
Automation 2: ... Extensions, tab.
Alyssa Nicoll: Let me disable. Okay. Yes. I wanted to go back over to my beautiful paper. We talked about how setting resizable to true can resize the columns nicely. It's so beautiful. It also talks about reordering; how you can drag them around if you set reorderable to true. The accessibility, so this is a partial list of the keyboard shortcuts that we are offering. Right arrow, left arrow, down arrow, et cetera, and then once you're actually selected on a cell you can do like enter to disable keyboard navigation of the Grid. Escape, restores keyboard navigation. Tab moves the focus to the next focusable component. All of these shortcuts and more can be found here at this link: telerick.kendo/angular/uicompenets and then on into the Grid, which is what we're talking about.
It's particularly about the Grid keyboard navigation, and so you can read about these and many more, but I wanted to show you all this because switch back over to my camera because it's really exciting to be able to navigate through something that wasn't at all accessible before. I want to actually show you. If we go back to our code and we take away navigable, and we're going to turn back on our screen reader.
Automation 2: Grid, tab selected two of three.
Alyssa Nicoll: If I go and I press tab like we did before, it doesn't even recognize anything else on the page. It just goes right back up to the URL.
Automation 2: The marvelous demo Grid. Tab list with three items.
Alyssa Nicoll: If I actually select ...
Automation 2: Grid tab panel expanded Grid table.
Alyssa Nicoll: ... The Grid and manually click on it, and now I am trying to navigate through, it just totally just jumped back up to the TreeView or I mean to the tabs, and is navigating through these. All right. Back to my camera. So yeah. It's really exciting and I love, love, love this feature and I wanted to show it in action with Chromebox. So that is all that I have for you right now. Thank you so much for letting me give you guys some Angular updates and goodies. Back to you, John.
John Bristowe: Thanks, Alyssa. Next up is Ed Charbeneau. Ed's going to show off the new templates we've added to Visual Studio for developers wanting to target Kendo UI with Angular.
Ed Charbeneau: All right ASP.NET developers, you've decided to learn Angular, and you realize there's going to be a bit of a learning curve. For your next project, you'll need to learn type script, NPM, Webpack, and somewhere in the process you'll want to do some server-side rendering. Now, integrating all of these things into an ASP.NET application can be a challenge. So what if there was an easier way to get up and running so you can integrate faster and learn at a more reasonable pace? That's why we're excited to announce that in this release we've made a new template available for Kendo UI, Angular, and the ASP.NET stack. This is an all-in-one solution with ASP.NET core and Angular pre-integrated. Everything is included and pre-configured for NPM, Webpack, and even server-side rendering.
The application is organized like a typical ASP.NET NVC application with the Vue layer utilizing Angular instead of Razor. This means that we can use familiar concepts on the backend like C+, SQL, NAD Framework, and the Azure Ecosystem. It's easy to get started from either Visual Studio or the .NET command line. That's right. You can use the template from the command line while developing on Mac, Linux, and Windows using your favorite editor like Visual Studio. Enough of the hype. Let's take a look and see the template in action. To get started from Visual Studio, let's click file new project, and then we'll choose Kendo UI for Angular, ASP.NET core and VC Application.
We'll click okay to get started. Now that the application has been created, let's take a look and see what was generated for us. If we take a look under the dependencies node, you'll see that we have NPM. All of the packages have been installed by Visual Studio as soon as it recognizes that package.json file, it will automatically install all of these dependencies. Next if we navigate down to the client app folder, this is the folder that contains all of our Angular code and components. Further down, we have controllers. These are normal ASP.NET NVC controllers and then we have a views folder. Now the views are a little different in this application. They're only there to Bootstrap the Angular application on the client.
The rest of this is configuration, such as the type script config, and web pack config files. Now, let's run the application and see what this looks like, and we'll do some experiments with the components that are preinstalled for us. With the application up and running, you can see that we have our components here on the left-hand side; all of which are powered by Kendo UI built on native Angular code. Now, if we look at our increment component, you can see we have this nice Kendo UI button. If we click on it, it increments this counter. Let's take a look at the source code for this. Again, we're going to go to client app counter, and here you can see the template for that component as well as the code for that component.
If we look at the template, you can see that when we click the Kendo button, we're using this increment counter function. In our counter component, you can see that increment counter function, and all it does is simply increment this current count value from zero and it increments it by one. So what I want to do is a little experiment, and let's change this increment method to a decrement method. I'll save this and go back into the browser. Remember our current count is four, but this component initializes at zero, so notice that change to zero, and when I click increment now it decrements. Notice I did not refresh the browser or you did not see a full page refresh here.
That's because the template comes with Webpack's hot module reloading already pre-configured. All of the code changes were changed on the fly in this view while it's live and running in the browser. How cool is that? Now that you've seen it, let's talk about how you can get it. You can get the new Kendo UI for Angular project template from the Visual Studio marketplace at marketplace.visualstudio.com or you can simply click on the extensions and updates dialog directly in Visual Studio. For command line users, use the install switch with the .NET new command followed by the template name, Progress ASP.NET core SPA template Angular. Once you have it installed just do .NET new KENDO NG then run your NPM install, and .NET run to get started.
John Bristowe: Thanks, Ed. Tara Manicsic will now walk us through the latest features that have been added to Kendo UI for React and Vue developers.
Tara Manicsic: Hi, all. Tara here. I am very excited today to be talking about two awesome things that are happening with the Kendo UI library for React and View. First of all, we have brand-new built from the ground up React components specifically for React. We'll jump into the Grid and DropDownList today, but then I'll show you all the resources to find out more about these awesome components. Also, there are new releases for components in the React and Vue wrapper libraries, so we'll take a look at some of the ones using a Vue JS project. Let's go ahead and jump right into the code. I jumped ahead and created a project using Create React App, and you can see the file structure here. We can delve right into the Kendo UI fun by first using NPMI to install the Kendo default theme so we don't have to touch any CSS files and already have pretty things.
The DropDowns, and this is the syntax we use now for these true components, kendo/react/component. In this case, DropDown, and since we have an updated version of NPM, we don't need //save, but if you're under Version Five, you probably still need it. All right. Let's go ahead and clear that, and jump into the code. You see here we have our app.js file and that's the first thing we want to jump into so we can import the things that we need from the libraries we just installed, including DropDownList from @progress/kendo/react/dropdowns; pretty easy flow to remember.
Then the next thing we do is also import our default theme. Again, I love this because then I don't have to open CSS files half the time. It just looks good out of the box, but you can also customize everything in the variables mixing in these themes. The next thing we want to do is build our constructor and feed it in our props, and then feed the super function our props, and move onto setting state with this .state. The first thing we want to add inside of here after adding silly semicolons. Tweet at me if you don't think semicolons are silly. Show me the way. Anyway, we want to add an array of things that are going to be inside of our DropDownList, so for today we're going to have ratings DropDown with rad, awesome, stellar and, of course, interstellar with a little alien emoji.
It just makes sense. We're going to jump down inside of our template. We first just add our component and go [dropdownlist] and pass the data that we just set inside of state and that is our ratings, and then we can make this a self-closing component and go ahead and run NPM start, and build that right up, and we'll take a look, and we have a lovely DropDownList. Again, it is something you will use often for forms and such built with just those few lines of code very quickly, and it's already styled nice. Let's get a little more complicated and make a real busy component in here, a Kendo React Grid.
First we want to install that, but along with that we also want to install the Data Query Library and we're going to also include Kendo React inputs for functionality inside the Grid that we can get to later and then, also, Kendo React internationalization Progress Kendo React date inputs. Again, these are all things that I always install when I build a Grid for all the future functionality, but today we'll just be covering a basic Grid that is sortable. All of that is installed and we can go ahead and clear that out, and go back to the fun code part. All right. We're back inside APP.JS. Like the last component, the first thing we want to do is important what we just installed.
Inside here we're going to import the Grid but, also, the Grid column, but we're going to be using a lot, so we're going to import it as column. This came from Kendo React Grid, but with the data in the Grid since we installed Data Query, we're going to use OrderBy because this is the sort functionality that we're doing, so we use OrderBy from Data Query. Next, I went ahead and made a JSON file of nutritional facts about all food that I got from the government website on all food facts, and this is to help everybody with their New Year's resolutions, figure out all the protein, carbs, and sugars in all the food you're eating. You're welcome. Closing this out, we'll go ahead and start setting these things in state that we want to reference later.
So first, nutrition, and we're not just going to straight up pull out that JSON file. We're going to pass an empty array to this .get nutrition function and sort gets an emptier rate as well. We'll get into that function later. Allow unsort let's people unsort, so we're going to set that to true, and this .sort change we need to buy into this inside of this constructor first. Functions, sort change, this one we passed the event and set state semicolons to nutrition this.get nutrition and this would make more sense when you take a look at get nutrition. When you send that event out sort and set sort to event.sort, this new event.sort so that it has the information of how this information is now sorted.
In get nutrition, we passed sort so it has the information of what the sort is at this point, and then we know how to order nutrition based on getting the nutrition JSON file array and getting sort. Adding the component. First we enter Grid and, now, we start sending in the parameters. First, we're going to do some inline styling with max height just so it all stays on the page that we're looking at today. This is totally optional. Then more parameters we're going to add inside of the Grid component so we haven't closed it off yet is the data because, of course, a Grid needs data. So this .state nutrition set sortable into this object of allow unsort, which we pass it this.state allow unsort, which could also just be true. Mode we're setting to multiple so that they can sort multiple columns.
Okay, so the last thing we need to set inside here is sort and pass it this .sort and sort change this function of when the sort changes. It runs the function that we just made up there, this .state.sort or this .sort change, my bad, and then we close out Grid, finally. Or just that opening Grid arrow bracket. Now, we enter these columns and these are all nested inside of Grid. First, we want to do the field and title, and then close out, a self-closing tag on column. So what is the field? You see here description is the first one we have, and I set it to food because description was kind of vague, but that's what the data source I have use as the header.
Measure, also, didn't really make sense to me, so I chose amount. It's maybe more readable, but no doubt just putting protein here is much more readable than protein in grams per measure. We just need protein there, just like here we're not even going to use the whole word "carbohydrates." We're just going to write carbs. I hear it's the new in-thing to call carbohydrates, now. Just kidding. Don't quote me on that. This is the exact way that it is reference in the table of the data that we passed through so that's exactly what we're putting here, the same for sugar. Again, make sure you have your self-closing ties on the end of column. Grid has so much nested inside of it because all of these columns, but columns can be self closing.
We'll go ahead and nest these, get that format right. We understand that they are inside Grid and then we can go ahead and close our Grid out. Not Grid column, just Grid. Something else is up with the formatting, so let's take a look up more. Don't know why. It must be a curly ... Oh, there it is, a curly bracket. If we jump up here, we see that I also missed a comma there. Could've messed this up. No mess ups here, though. Let's take a look at it. We run NPM start because remember. We closed it to install those new modules. Now, we get going and we have a beautiful Grid. Again, that styling is already there. It's doing a max height at 500 so we can still see our DropDownList and if we go ahead and click up here, it sorts it once.
It sorts it in the opposite direction on the second click, and clears the sort on the third click because we allowed that, and since we chose multiple, we can click protein, and the proteins that have the same carbs like right here .13 will get sorted amongst themselves when we double sort. I think this Grid is definitely interstellar. Fantastic. Now, when you want more information about this you can go to kendoui.com. Go to the React section and you're here at this webinar so you don't need that banner. You could take a look at all these components that we have for React, and walk you through the installation and all the other things you need to customize this for everything that you need in particular.
Remember. As with all of our components, these are all responsive and come with accessibility standards, internationalization, keyboard, functionality so lots there and I highly recommend checking all of these awesome built-from-the-ground-up-for-React components out for yourself. Also, stay tuned and pay attention to Kendo UI on Twitter because we will be having more in-depth videos specifically for React coming up soon so remember @Kendo UI on Twitter. Okay. Let's jump into view. Let's take a new view on this. Sorry. Had to do it. Okay. I went ahead and already made a Vue project using the VUE CLI. We're going to go ahead and change directory into that project, slowly but surely.
Inside here, you see the standard build. I used the PWA template, the Progressive Web App template because, of course, I would. Next we start installing some Vue wrappers, but first the Kendo UI library and the Kendo theme default. So after that we can go ahead and install both the components we're going to be using today, which is the date inputs for the date picker-vue-wrapper and then the upload component with kendo/upload/vue/wrapper. Again, this is the syntax for the Vue wrappers. Kendo component Vue wrapper. So we'll go ahead and install those all at once, and then we're also going to throw them inside of our project all at once so you can see how fast and easy to build.
What I figured was kind of like a profile where they could enter their birthday with the date picker and then upload a profile picture. So clear this out and let's go into the code. The first or the files that we'll be using today are just profile and their components APP.VUE and main.js. In main.js is where we're going to import our data picker and the date picker and stop inputs installer that will need to use it from Progress Kendo date inputs Vue wrapper. We're going to do the same for upload, so we import and just copy all of this. Import upload, and upload installer. Of course, we get that from Kendo upload Vue wrapper. Those installers we put them into action using Vue.use and inside there we pass date inputs installer and upload installer.
To use these things, we also need to pass them into our new view. Oh, I had an extra P. Into our new view components along with app, so now we just need to add inside of here the data picker, and upload. Oh, we also need to go back up to the top and add the library and the theme. So import @progress Kendo UI, our main library, and the Kendo theme default. Look at this lack of semicolons. Doesn't it make life so much easier? Make sure to put the full path from this file to all that CSS. At .Vue we just deleted all the other stuff and added this profile.vue that we're going to work on, now. I'm actually going to change the reference to just name here, and make it a little more simple.
Inside here, we go ahead and start adding our components; first with Kendo data picker and the data we need to pass the date picker were the parameters are the minDate, which is obviously the smallest date we want the calendar to reference. Max date is just the opposite. It's the latest date that we want the calendar to reference and, also, we will do the value that we'll put in there as a placeholder and we'll set that to the current date and then we'll also do format. I wrote current date, but I'm actually going to change it to this user profile Tosh Magosh's birthday, and we want to set the format and then close out Kendo date picker. The data we're sending in is. "Who is Tosh Magosh?" You may ask? Well, obviously, it's who's been typing up all this code as I lead this webinar.
Maybe not. Okay. So minDate we have here. We're just going to put 1900 because I don't know who is using this profile, but they may be born in the 1900s. Probably not, though. We'll also put 2019 for all our future users and, like I said, instead of current date we're actually going to put Tosh Magosh's birthday, which is 2006 in August and set that to current date, no matter how untrue it is. Okay. That is everything that we're passing in there. Now, let's go ahead and add the Kendo upload.
All this needs, it doesn't need any data passed through because we're sending links in here and the first link we put in here is the async-save URL and this is where you want to save the files that you're putting in here, so for demo purposes I'm actually just going to hopefully paste the right thing, which is where we save the demos for or the information for demos.telerik.com. So just save it somewhere and then, also, where we remove it from, so these things definitely something you want to look into more later when you use this for yourself and all that documentation I'll point to after this. Also, we want to do the auto upload set to true and we want to do the credentials.
If you want them to do this with credentials or not, I'm going to go false for now just for this demo, but you have that option there, and then we'll go ahead and close out Kendo upload. That is all you have to do for the upload file. So that means that we can save this and look at what we have. So you see we have our beautifully styled date picker even though we didn't hit any styling/do any CSS styling. You can click through and pick a year that then leads you to pick a month that then leads you into pick a date. All these interactions come right out of the box, and you can also just type in your input and even the highlighting comes in the default styling. Put whatever date you want and it automatically formats it after you're done typing.
For upload files, we just click the button, find this amazing picture of Toshi working again, and there you go. You have the option to also retry and delete that file. All of these components live here, Kendoui.com. You can go to the Vue components, so there are a ton of components here that you can use and most all of these are the same for the React wrappers as well, so we're trying to get more and more of these React and Vue wrappers. It's such a tongue twister. All the things I was talking about before for upload you can look more into it here in this documentation as well as seeing how to initialize it with CDN and with WebPack. Again, great information to check out in the documentation.
Highly recommend reading through there and checking out the demos. More information to come. Stay tuned on Kendo UI and @tzmanics which is me.
John Bristowe: Thanks, Tara. Great stuff. Now, on the Kendo UI Team, we've been working hard on providing you with a better idea of what's coming so you can plan accordingly. Carl, what's there?
Carl Bergenhem: Taking a look at our roadmap, a couple of items that I want to highlight coming out with the next release will be the Conversational UI (AKA, chat bot UI component) for all flavors of Kendo you want. We'll also be introducing the new DropDown Tree widget, something that the folks on the ASP.NET and AJAX side might have been able to take advantage of so far, and we'll also go in and work with our material theme and add that in for the jQuery suite. Of course, the React components of just start us will continue to expand on the functionality of all existing components and introduce new ones. On the Angular side, we'll be taking a look at adding the menu, Tooltip, Toolbar, and a couple of other widgets alongside with additional material theme support.
On the Vue side, we'll look to include more components. Of course, similar to what we're doing on the jQuery side, as well as what other Vue Ecosystem libraries we can support like, for example, Vuex and additional resources for our Vue developers.
John Bristowe: Wonderful stuff, Carl. Thanks for that. Just before we wrap things up, I'd like you to know that we'll be hosting the Progress Next Conference from May 29 to June 1st in beautiful Boston, Massachusetts. Registration is now open and filling up fast. You can find out more and register at www.progress.com/next. There's one more thing that I'd like to share with you. Very soon, we'll be launching a new 24/7 on-demand training program with more than 30 hours of technical content that's designed to quickly get you onboarded and successful with our developer tools, whether you've been using them for years or are new to the suite. Valued at over $10,000 this offering will be free with your listened subscription.
These videos will provide practical knowledge combined with helpful approaches to application developing across a wide range of our offerings, including Kendo UI, Telerik UI for ASP.NET AJAX, NVC, Xamarin, UPF, WinForms, TelReporting and more. Watch your inbox in early February for more details. So that about wraps it up for us. On behalf of the Team, I'd like to thank you for joining us for today's webinar. Please make sure to keep an eye out on our blogs for more articles about this or for any other future announcements. In the meantime, please go check out the latest bits, and tell us what you think. Thanks again, and we hope to see you next time.
John loves technology and because he just doesn’t get enough during the day, he also writes apps for fun as a hobby. He has worked in various software development and product marketing roles at both hardware and software companies. John has a Bachelor's in Electrical Engineering (Computer Design) and is in the middle of his Master's in Computer Science. When not actually sitting in front of a monitor he enjoys playing guitar.