We recap the news from the latest Kendo UI and Vue webinar and answer the questions we couldn't get to live. Missed the webinar? Check out the replay below.
Last week, we hosted the webinar on Kendo UI and Vue, which highlighted how to use the Kendo UI Vue library in a Vue application. 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 tradition for us to give away prizes to attendees who ask the best questions. This time is no different. The winner this time around will receive Bose Wireless Headphones!
Questions and Answers
Q: Is it possible to bind current state of grid grouping/filtering/column ordering etc to model?
A: It takes a little work with our API, but this sample should show how it can be done: http://dojo.telerik.com/@zdravkov/odUmO
Q: Why is there such a mix of conventions in the use of single and double quotes? Then the use of single within double quotes? The docs use it but don't explain why we are needing to map string types.
A: This comes from the props used to having strings for the jQuery widgets, usually configured with a jQuery object. Setting this in templates requires the use of double and single quotes. We can try to make this more clear in the documentation.
Q: Any type of formatting types for columns in grid like date, currency..?
A: Yes. The format is as follows: format: "{0:c}".
Q: What is the advantage of Vue over Angular? Why should one use Vue when the Angular Kendo UI library is more mature?
A: This is definitely just a matter of personal preference for using Angular or Vue. We just want to help you build with whichever you chose.
Q: Is it possible to implement Vue with ASP .NET 4.6 Kendo web apps?
A: You can utilise the wrappers with http://ASP.NET, yes.
Q: What editor were you using?
A: For this webinar we used Visual Studio Code: @code
Q: How long is your trial license?
A: 30 days—fully functional
Q: Are there any plans for a GUI tool (web, etc) to configure some of the more complex components like the awesome grid?
A: Nothing planned at the moment. However, we’re open to new ideas.
Q: Since Vue.js is considered an extremely lightweight framework how does Kendo UI affect its performance?
A: The performance of Vue isn't affected; we provide Vue wrappers to make it easier for you to build applications with Kendo UI.
Q: Why do not you remove the dependence on Jquery?
A: This is what we've done in our @angular, and soon our @reactjs components. Currently looking at the needs of our @vuejs devs and how jQuery fits (or doesn't).
Q: Any issues with Vue, TypeScript, Electron and Kendo UI?
A: That's quite a combo. It should work. Emphasis on SHOULD. :)
Q: Looking at your Vue presentation, how do you deal with an async transport read on your datasource?
A: There's an async property on the DataSource. That's because it uses jQuery.ajax under-the-covers. You can set the async property on this if you like. By default, it's true.
Q: Does the new Vue integration natively work with/know about Vuex?
A: We don't have a sample quite yet, but we're working on ensuring official support for Vuex (with sample projects) in the future!
Q: Is it possible to have Vue components as editors/custom renderers inside kendo-grid-column or are we stuck with jQuery powered templates?
A: Right now we do not support Vue templates, but we are actively working on seeing what we can do there in the wrappers.
Q: Are Vue components kendo-datasource, kendo-grid and kendo-grid-column reactive? Will the grid rerender itself if model bound to those components changes?
A: Yes, they are https://docs.telerik.com/kendo-ui-wrappers-vue/getting-started/model-binding
There was also a request for better MVVM documentation
And a request to shorten the component names
Transcript
Hey everybody. Thank you so much for joining us today for our build a better UI with Vue webinar. Here at Progress we are very excited to be announcing the Kendo UI component library support for Vue JS. It's a great library, a great framework, and we are excited to help you build more robust apps faster with our component library.
Before we dig in, let me introduce myself. My name is Tara Manicsic. You can find me on Twitter @tzmanics. And I'm a developer advocate for the Progress team. And I mostly focus on Kendo UI and I have learned so much about how awesome and easy it could be to have somebody writing this code for you that builds your front end UI components. It's fantastic. I started as a node engineer and coming to the front end was always very daunting for me because CSS is scary. But fortunately, on the Kendo UI team I've been able to learn how to have somebody else do that work for me. And that is what Kendo UI brings you.
And before we really jump in, I also want to bring your attention to our hashtag HeyKendoUI. So at any point in this webinar or after this webinar, if you have any questions, any comments, anything that pops into your mind that you want to know more about, hit us up at this hashtag, HeyKendoUI, to ask us any questions. And after this webinar we will actually pick one of the questions as a lucky winner of these awesome Bose headphones. So make sure to hit us up if you have any questions at all, either during the webinar or after.
And now, with all of that out of the way, let's go ahead and jump in. I introduced you to me, and now I'd like to introduce you to Kendo UI. And one of the best sites to go to if you have any questions is kendoui.com, which will take you to telerik.com. So, Kendo UI, that team has been building UI components for over 15 years. So they really understand what it takes to make great component libraries, ones that are actually helpful and easy to use, and really robust. So we actually support jQuery, React, Angular, and Vue right now. And what's really great is getting the license for Kendo UI means you get the support for all four of those libraries, for all four of those tools. So, if for some reason you change your mind about how you want to build your project, which we tend to do sometimes, you have the support built in to that license you get from Kendo UI.
The Kendo UI library is awesome in the ways that are quite obvious. You get these amazing components from your everyday things like drop down menus and auto completion inputs, buttons, and all those things that you use in forms like what you use every day. And also, the robust things like data visualization charts and grids that give you the ability to in-line edit and do crub methods inside of your grid. But on top of that, you also have the reliability of the components with their accessibility and that is like keyboard support for the components, section 508 support for accessibility, and aria support, and WCAG 2.0 compliance.
So, you have all these great things and on top of that, you even get really great support with Kendo UI that's dedicated to the product that you're working on. So you have technical people looking at your problem and trying to help you work through your problem with you.
A little while back we announced our support for the Vue library and bringing our components to Vue, which I am extremely excited about because I really love Vue. I use it for almost all of my side projects. And I wanted to show you this page first. This is our getting started with Kendo UI for Vue page. So, we're going to be covering a few of these things in today in the webinar, but this actually has a different approach of how to set up your project. And here, you see that we talk about integrating Kendo UI using CDN files. So here's a list of the files that you can use as NPM packages. And you can also use the CDN files to include this in your project.
[00:05:00] So now I also want to show you that we have demos for all of these things. If you go onto the demos page, it's at Telerik.com support demos. And you can go down and find the Kendo UI page. So what we're going to look at are the jQuery demos. And in this list of demos, we have all of our components. So this demo's at Telerik.com. You can look at all of our other things, but let's focus on Kendo UI today.
So one of the things we're going to be building out today is the grid. And you can use this once you, obviously follow along with me and build a grid of your own, when you want to go back and get more information, maybe do some more things with the grid, you can go to this page and there's actually a section that breaks down how to do it in view. And we'll be going at it in a different. So this will show you another approach to take and it's a great resource for the next step after this webinar.
So, I wanted to give you this resource first so you could see all these things that you can do inside of the grid as far as editing and updating and even deleting the things that you have in your grid. It's a very powerful tool, so we are going to be covering that today to at least get our hands on it and see what it's like to integrate it into your Vue project.
So here I just wanted to point out the pagination, which we will be doing with our grid today as well. And if we scroll down to the bottom, there is just more information and you have your sample files. You can see what the code looks like. You can dig into the code more.
So today, when we build out our project, we're going to be using the Kendo UI default theme. And I wanted to show you first the Kendo UI theme builder. This is a really great tool. Like I said before, I am not what one would call very good at CSS, so tools like this, this theme builder, a Sass theme builder that Progress has, I lean on these heavily. And we have a specific one for Kendo UI and you can start with a theme that already exists. So I like to use the Kendo UI default theme. I like the colors and I think that they did a really good job. People that actually know design well figured these things out so I don't stray from it too much. But you can use Bootstrap. And then we also have a beta material design for all of our components.
So the way this works is you go in here and you can click either the default like I did or the other option is the Bootstrap. And it will show you what all of the components look like with that styling. So you can interact with these components, you can see how the colors change and what happens when your user is interacting with this UI. And then, you have the option to customize it by changing these different colors in the color swatch area on the left. And as you do that, you get a live update, right there, to show you what it looks like. I like this a lot because I can see what the changes look like, if it's good or bad. And then you just click this download arrow and name your theme. And when you hit okay, it will give you a nice little zip file of everything you need.
So I'm a big fan of that, but moving on to what we'll be doing today. We'll be using the Vue CLI to create our project. And the Vue CLI is a great tool from the command line to build a simple scaffolding of your Vue JS project. I am not very good at saying that word. Scaffolding. All right. I'll get it. I swear. So you see here, the usage is basically doing Vue init and then picking a template.
So there are a lot of really great templates, like webpack and browserify and simple, but today I want to be doing our PWA, or our progressive web app template. I'm a big fan of progressive web app and it give you the opportunity basically to create your web app and also make it look and interact real nice in a mobile device, as well, which our components are responsive, but progressive web apps gives you the opportunity to take it even a step further.
[00:10:00] So just a quick glimpse into progressive web apps. They are basically a way to use modern technology to make your website more accessible and more reliable and more engaging. And the big thing that I like to point out about this, these are the top ... these are the things that Chrome tends to consider making your web app progressive, but one of the biggest thing is, is Progressive. So any changes you make won't break anything if it's not supported in the browser you're using.
So let's jump right in. Inside our terminal, we'll go ahead and globally install the Vue CLI with NPM I for install and the dash G for global. And that's basically saying anywhere I am in all of my folders, make it so that I can use the Vue CLI because I want to create Vue projects in every single folder that I have. Maybe you do. I kind of do that.
So the first thing we want to do after we have that installed is change into a directory where we want our project to live. So CD in my whole long list of getting to where I want it to be, which is in my webinar's folder. And once we're in that folder, we run the command Vue init PWA, which is our template, and then the name of your project, which today for us will be Kendo UI-vue.
So it's basically walking us through these different questions of to describe our application. And that project short name it's asking you for right there is for the progressive web app part of your application. That is, progressive web apps have the ability with a manifest.json to save an icon on your home screen, and that short name is what shows up under your icon. And we'll give it a fun project description. The author is me, Tara Manicsic, and we're going to do a Vue build of stand alone. And then we follow the other questions and ... So we're going to keep it pretty simple today besides our awesome components in making a PWA, and not include the router. We will lint, because linting is awesome and I love the standard library. I'm a big fan, so we'll keep it that. But with the testing and end-to-end testing, we won't include that today. But you can if you want to in the future.
So then we want to change into our projects directory and run NPM install. And this is basically downloading all of the dependencies from NPM that we need to get our project running, to make sure everything works really well and we have all the supplies needed to get it going and check out what we have. In this case, you can also run NPM I, which is just the shortcut or the nickname for NPM install.
All right. So, we are have all of those, 11 hundred and 56 packages installed. And we can go ahead and clear that out. And then run NPM start, which is our NPM script telling it to run our Vue file. And if we go to local host 8080, we can see that we do in fact have a working Vue JS application, with all these fun links to get any information that you need on your Vue application.
So since we have that running well and we know it's a good starting point where everything works, we'll go ahead and initiate this as a git directory so that we have version control. So I'll do git remote add origin. And that origin is actually a repo that I made for this project and I will make a commit for every code change that we make today as we go along. And that way you can check out the diff and see what's changed, see if you have all of the same changes to make everything work correctly, because we all want a working project, right?
[00:15:00] So here we see that everything has changed because we just added all these things. So we'll go ahead and do git add all the things. And then go ahead and ... Oh, take a look and see, yes, new things. Then we'll make a commit basically stating the fact that these are the initial files of the, that the Vue CLI gave us to create the scaffolding of our project. See, I said it right that time.
All right. So I'm going to push this up so it all exists in that repo. Again, I'm tzmanics on GitHub and you'll see it's KendoUI-vue on GitHub as well.
Okay. So let's go ahead and take a look at these files. Inside here we have a whole list of fun things. And the build directory that basically has everything that we'll build out for your application. Then you have some config files, your node modules, which is a pretty long list as we remember from installing all of these modules. We don't need to look at all of them. And then the static folder that has our manifest.json, which is that file that I talked about earlier that gives the meta data to have people open things on their home screen or add your app to their home screen and show them full screen views.
Then we have our source folder, where we'll be doing most all of our work today. Inside there we have an assets folder with a logo image, a logo PNG, that we will not be using today so we can go ahead and delete that by pressing the delete button. Or I guess we're recycling it.
And then we have this component of the hello.vue. We're going to stick with working inside of this component today. And so, if you recall what we opened up in the app that we looked at at Local Host 8080, these are the links that we saw there, the links to give us more information on our Vue project.
So that was the whole template. And now we see in the script we have some information that we're passing to the template, and we have some styling in here.
For today, though, we will not be using any of these things. We'll probably keep the nice little header but for as for all of these links, we're going to put our own things in here. So we'll go ahead and delete all of these things.
And inside of our script section, we don't need the name and we don't need the message, so we'll go ahead and delete that. And really, all of this styling, we're going to be using the default styling, so a lot of these things we do not need. We actually won't have any lists, either ordered or unordered, and so we won't have any list items either. So we'll go ahead and delete those, as well.
So we'll go ahead save that file. And then we'll take a look at the app Vue file. This is the component, this is what's basically holding everything that is inside the hello.vue. Forgive me for my funny navigation throughout here. It turns out when you use Windows and the vim mode inside of visual studio code, you can't use some of the keyboard shortcuts. It's a funny little thing. Has me moving quite slowly through here.
So again, we'll delete these things that we don't need today or that we basically won't be using today, like the logo. But everything else, we're going to be keeping that component name, hello, the same, so we'll keep that in there. And going through here, we do know that we're going to keep the header so I am actually just not going to touch any of this styling and just leave it all in there. If we were sending this to production, we would definitely try to get rid of all the code we're not using. But this is just our fun app for today.
[00:20:00] So let's go ahead and make sure that all of the changes we made didn't break anything by running NPM start, taking a look at Local Host, and seeing that everything is gone besides that pretty little header. And we are good to push another commit with the changes of removing everything. And that way, we know the next stopping point that we can go back to if we make changes that don't come out how we expected.
So again, you can see that we removed some assets and just changed those to files, those two Vue files. So we'll add those, make sure that's the only things that we were adding. And then make a commit simply stating that we removed things. And then, once that commit is made, we'll go ahead and push it up to GitHub.
Okay. So now that we have a clean slate, the first thing that I want to show you is basically how we include the components into your project. And all of these can be installed with NPM. So first, we'll install Kendo UI. So this is the base library, the base module that we need in order to have Kendo UI functioning properly in your application. So this is the one file that has to be in there for in order for you to use the Kendo UI components. So yay. We have that installed. Fantastic.
So let's go ahead and open up the files where we need to include that Kendo UI module. So this is when we're going to go into our main dot JS file. So in here, you see that this is where we're importing Vue and we're importing that app.vue file. So we'll just go ahead and import @progress/kendo-ui. And that's basically all you need to do to have your project pull the Kendo UI library in. So we'll save that.
And then, while we're jumping around, we'll go ahead and go to our main HTML file. It's a little bit down the list. And in here, in the index.html, we're going to add the files we need to include the Kendo UI default theme. So just right under the title before the icons, I'm going to paste these here. And you can find these in the resources page in the getting started pages. And it's basically just giving you the way to make it look good in mobile and the default theme. So if we do NPM start, we're basically just taking a look and making sure that there's no errors, that we didn't break anything. So if we get our plain blank slate site up, that means that we didn't break anything. And there we go. There it is. Yay.
So since we did make changes, though, in the code, we'll again go ahead and terminate this job of running ... Because otherwise, if you leave that open, if you keep that running in the background, if you do NPM start and don't close it out, you will get that refresh. So when you're using the Vue CLI, it's nice to have that in the background, it just kind of keep getting those hot updates, keep getting those live updates of the changes that you're making to make sure that everything looks good.
So we added everything we changed and did a simple commit message, UI based library and styling. So we'll go ahead and push those up. Great. So now we're ready to get started and pulling in the actual components.
[00:25:00] So first I want to install with NPM the Kendo buttons library. So we will only be using one type of button. There are multiple buttons in the button library, and we're actually going to be using the Kendo buttons group. And that's basically kind of give you a tab-like kind of button. And this is a very simple component. I wanted to start with a simple one so you just see how easy it is to add these. So we installed it. And now we can just go ahead and go into our code, back into our code. And we'll go to our main JS file. Accidentally closed it. That is not what I meant to do. Okay.
So again, we'll go into our main JS file. And in here, we're basically just going to import the part of the library, of the buttons library, that we're going to use. So not the whole library, we're just importing what we want to use. So again, today we're just going to use the Kendo button group. But then we also, with the Vue framework, need to install the Kendo buttons installer. And all of that is coming from what we just installed with NPM, which is the Kendo buttons Vue wrapper.
So, once we bring those in with import, we also want to make sure that we do Vue.use in order to utilize and put into play that Kendo buttons installer that we need. These are very verbose hints that VS code is giving. I just have a new install of VS code, so getting all my settings just right. We're not there yet. So for these more tidbits, these very verbose tidbits fromVS code, I will remember to try and click the screen to get rid of those so you can actually see what you're writing.
So again, inside of this new Vue object that we're creating, we want to add inside the components the Kendo button group because that is the item that we will be using in our component. So if we go back to that main hello.vue component, inside of the template is where we'll be putting our Kendo UI component. And that's basically inside of the angle brackets, we do Kendo-button group. And this will be the main holder for the buttons in our Kendo button group. So, if it makes sense, it will be Kendo-button group-button.
And then, we just put the name of our button, like we do regularly with buttons. Being really creative with button one. And then close it out. And since it's a button group, I'm going to put two more buttons to just have three side by side buttons. And I'll be ... I'll stick with my originality of naming and do button two and button three.
So, that's actually all we have to do in that hello.vue file. So I'll run NPM start to take a look and see what this looks like. All right. So, see? We have three buttons all in a row. Button one, button three, button two. And see, that's the default styling that we're getting from Kendo UI that interaction of the hover over colors and that primary color unclick of that default salmon orange color.
So again, we have new things to that we added, so we'll go ahead and push those up. Commit those and push those up. But this was the way I wanted to show you just how easy it is to do these components. So basically, we installed it. We put it inside of our main JS file to import it into our component. And then, inside of our component, we basically just called the component we needed inside of the angle brackets like we're used to doing with many tags in HTML in general.
[00:30:00] So we have that pushed up. Or it's pushing up. No, pushed up now. We'll go ahead and clear that out. And now, I want to step into a more robust component. The grid. So that's progress/kendo-grid-vue- wrapper. And this is our most popular component for a very good reason. The Kendo grid is very robust and they keep adding more and more awesome functionality to the grid. And we're going to be putting together a simple one today. And when I say simple, I mean simple about how we're setting it up but you'll see you get a lot of interactions of it right off the bat.
So we have that installed. Per usual, we head to our main JS to get it included inside of our application. So I'm just going to copy what we have here for the Kendo button group. And switch it up to the Kendo grid and also the Kendo grid installer. And, of course, we have to change where that's coming from, which is just Kendo grid vue wrapper.
So just like with the buttons, or with the button group, we want to use the Kendo grid installer, have vue.use Kendo grid installer. And then, down below here we want to add the kendo grid inside of our components.
Now, one other thing that we're actually going to need in order to use our grid, is the data source. So Kendo-data source-vue-wrapper. And the data sources is basically how we're going to be feeding data into our grid. And there is an extensive documentation on everything that you can do with the data source. Today, we're just going to be bringing in O data. And it's a file that we have hosted online. But there are a ton of things that you can do with this data source. So I wanted to at least show you what it looks like to bring that in and use it in the most simple way.
So that will, again, be imported just like the grid and button group. We want to bring in Kendo data source and also the Kendo data source installer. And just as a reminder, there are a ton of resources to look more into the data source and see how everybody's using it and see all the things that you can do with it in the documentation. And a lot of that is in the demos.telerik.com that I previewed earlier.
So, just like with the Kendo grid and Kendo buttons, we want to do vue.use the kendo data source installer and also add it in our components list.
So one thing that we're also going to be using that I forgot to add right here is the Kendo grid column. And that's seemingly self-explanatory. So we use the Kendo grid column inside of our Kendo grid. So we want to add ... Oh, looks like we want to add Kendo grid inside there and also the Kendo grid column. And I just need to add a comma there. And then we'll go ahead and save that. And then, go back over to our hell.vue component because we have everything that we need in our main dot JS file now.
[00:35:00] So inside here, we'll leave our button group there. And we'll start to add our grid component. So first, I want to go ahead just for styling purposes, separation, I'll add a new class called grid. And then, in here is where I will create the Kendo grid data source first. So this is where ... Sorry, Kendo data source. And this is where basically I give the parameters and the information about the data source. So the reference to the data source will be data source. Again, I'm not very original. And the type that we're using today will be O data.
Then, we need to set a page size. And here, this is the transport read. So this is where we're reading the data from. So I want you to take a look at what this file looks like. So if we put that link here in our browser ... You can see it's this SVC of this information that we have. And you see that there's the customer ID, the customer name, the customer title or the contact title, contact name, and the country. But there's more information in there, but we don't have to use all of it. So in our columns, as we'll see in a little bit, we're only going to use certain bits of that information. But we have all of it there if we need it.
So we'll go ahead and close out our Kendo data source and move on to the Kendo grid. And just like with the buttons and just like with the data source, you do the open bracket kendo- grid and then we start to set some values, some parameters to our grid. And there's a huge list of different things that you can set for your grid, but we're just going to use a handful of them here today.
So, height, just to make it fit on the page well. And then the data source ref, which is the data source that we just made and the ref that we chose was data source. And then, groupable. And this is a way to let users visualize the data by grouping it by a certain category. And I'll show you what that looks like later. Sortable is exactly what it sounds like. So you're able to sort your data on the grid. Pageable refresh. That just lets you refresh the page that you're currently on. Pageable page sizes, which can be set to a number or a boolean which is basically saying that you have the page menu at the bottom of your grid. And pageable button count, which basically says that if you have that menu, that pageable page menu at the bottom of your grid, how many buttons do you want there to be? So we'll set that to five.
So, those are all the setting that we'll set today for the Kendo grid. And inside here, this is when we start to do the grid columns. So this is a thing that we pulled in before and this is basically for each column, we'll set the field. So the first one that relates to our data is contact name. Then we'll set the title, which is the text that will be displayed, and we'll just put a space in there. Readability, you know? And then, it's optional, but we're going to go ahead and set the width here for this column.
[00:40:00] So, we're going to keep these columns pretty simple and just mostly put the field and the title, and on some of them or on maybe one other one, we'll put the width. But there are a lot more things that you can add to the columns, a lot more parameters that you can set in your columns. And again, these are really great resources in the demos and in the different APIs for the grid to tell you each thing that you can do, or for the grid column moreover, to show you each thing that you can customize and change inside of your grid columns.
So, the next one we'll put here is contact title. Again, our data has a contact title key in there. And we'll name it contact title. But we'll go ahead and get rid of the width for this column. Oh, I just noticed that I did not close out my grid column. So I'll close this one out here. Copy that. And paste it in the right spot. And then I'll go ahead and do a few more columns just copy these four lines, paste it here. And the other fields that we will look at are the company name. And we again will not set the width for that. We'll go ahead and copy that again. And the last one we'll do here will be the country. So, we'll change the field. And that same thing can be used for the title.
So, we've closed ... We have the close of our column. We'll actually go ahead and do a width here, as well. And set it to 150. Pixels, that is. And then we can go ahead and close out our Kendo grid. And we're still inside that div that we had already made the closing tag for.
So, this is all done. I'm pretty sure I also spelled everything right, so let's run NPM start and see what we have served up. All right. So at Local Host 8080. Yay. We, in fact, have a working grid.
So you see, this is some of the default styling that we get with these zebra striped rows and the hover effects. That's the pagination that we set below before. And you see we can go all the way to the very last page and skip ahead to all of those. And they are paginated. And we can change the amount that belongs on each page. We still have our row of buttons up top, as well.
So you see, we have this scroll or the hover over function. And we can also pull these up here. This is the sortable. This is what we get when we want to ... The contact name wasn't good. We'll try the title. So if we just want to look at sales representatives, we can drag that up there and ... Or have them grouped by sales manager, sales representative, collapse them. And you see that color default that we have going on there is the same primary color or accent color we're using here in our paging menu. So we have that consistency across our components and we didn't touch any styling. I mean, we added those links for our styling, but we did not touch any CSS besides deleting it, which is how I like to handle CSS.
So, there is a much more in-depth project that we have available for you to dig into the code here on GitHub @telerikvue-dashboard that you can install, mess around with it, and really dig into everything on this dashboard. And if you want to take a look, this is what it looks like. So it's sticking in data from GitHub, different issues and it's showing you the different data visualizations we have with the interactions. And there's that button group that we used in our project being used to give you the different time spans for the information on here.
[00:45:00] And so, we have many different types of graphs. And this is the donut graph. And who doesn't like donuts? And you can see that you get this interaction with these graphs. So I'm clicking here and I can see these data points, but also click here and remove different categories.
So, the next thing on here are the issues grid. So this is a much more in-depth kind of feature packed version of the grid. And this isn't even doing everything that we can do with the grid, but it's showcasing a lot of things that you can use the grid for, how you can use it, what can go inside of the grid, and how you can filter these things. So this is the filter menu here where you can set different things to look for and filter your grid down to make it even more useful and be more powerful for your user.
And then we can also see the components that work inside of this form. Or basically, how we can use these things altogether. So you see the data visualizations. You see the form. And you see the grid. So this is a great project, a very robust project to dip into and basically see all the code running together, see everything that you can do with this.
So, again, real quick, we'll jump back and I'll push this last piece of code up so that you have everything that you need to replicate the project that we made today. And again, inserting this grid, we basically just installed the module, and then we imported it in our main dot JS file, and then added those angle bracket components, those tags inside of our template, inside of our main component file.
So, it's three steps and that's basically what you do with all of the components. With our grid, we bound data to it, which was one other small step. But it's basically those three main steps.
So, all of our information is up there for that project. And I want to take you back real quick to KendoUI.com again. Because this is where you will find your most helpful resources. This will be your guide to going through Kendo UI components and seeing everything that you could take advantage of.
So, again, on this page, if you scroll down, you can check out all the different frameworks and libraries that we support, and really kind of dig in and see what you can use Kendo UI for. And if you go to Vue, go to try it, you can go to this getting started page that helps walk you through the process and also the demos. They give you a really rich library of tools and examples and a lot of these are also, you can open them in Plunker, which lets you mess around, break it, edit it, customize it, do all the things that you would do with your code that you would be using, which I usually break it.
So you can break it and then fix it. And there are just so many components that you can use. And later on, when this webinar is done, we will be posting it here on our YouTube channel. Excuse me. And you can actually find a bunch of our other webinars to see everything that we cover and just learn more in-depth about the different things that we offer that can help you build your awesome projects even faster.
So, thank you so very much, again, for joining me today. It was really fun coding with you. And I hope to see what you build with everything that you've learned today. And again, if you have any questions whatsoever, I can be found personally on Twitter @tzmanics and that amazing ball of weird right there is my dog Tosh My Gosh. You can find her at her hashtag if you have any questions for her, in particular.
[00:50:00] But more importantly, you can check us out at our hashtag, we're KendoUI on Twitter. You can tweet at that hashtag, HeyKendoUI, to ask us any questions about anything that you've learned today, anything that you want to learn in the future, or anything that you just have any questions about as well. And we're more than happy to get back to you. And on top of it, we will be choosing one lucky winner that is asking a question, an awesome question, at HeyKendoUI, and that winner will receive these awesome Bose headphones. So, submit a question, ask us anything that you like, and enter in the chance to win these headphones.
So again, thank you very, very much from me and Progress, the Kendo UI team. We really appreciate you coming out today and we cannot wait to see all the amazing things that you build with Kendo UI and Vue. Thanks so much for coding with me.
