Considering the impact this decision will have on our ability to meet the deadline and how painful or smooth app maintenance will be afterwards, it’s worth looking into.
This decision can be boiled down to two main approaches: building your own components or buying a third-party UI library. We’ll explore the implications of each well-trodden path in eight reality-inspired categories:
For an in-depth discussion on this subject, visit 8 Key Factors When Deciding Between Building In-House and Buying a UI Component Library (article).
]]>The magic of Kendo UI for Angular isn’t just great JavaScript components, it is our pursuit to help developers be successful through support, learning materials and an active community. We thought you would find it interesting to see what your peers are learning.
Here, we generally focus on Angular concepts, but guidance for Kendo UI for Angular is also very popular. Visit our Getting Started series, video library, and documentation for more samples, demos and instructions.
Without further ado, here are the top 10 Angular How-To articles as measured by your visits in 2020. Let’s count them down, just for fun:
10: How to Lazy Load a Component in Angular
This article's 10th place rank is a bit misleading since it was just published in October. Chances are that it will be on top of 2021 list. It covers lazy loading components using the popular Ivy Renderer.
9: Getting Started with Nx in Angular
Written over a year ago and still very popular and relevant is this tutorial on building a full-stack application with Nest.js, Angular, and Nx (Nrwl Extensions).
8: How to Use Drag and Drop with the Angular 7 CDK + Kendo UI
Our own developer advocate, Alyssa Nicoll jumped right in after the Angular 7 release to show our users how to implement drag-and-drop. Even though we are now on Angular 11, this is still relevant today.
7: Building a Food Store using Redux and Angular
Learn how to manage data by walking through steps to build a complete food store application using various Angular tools such as Express, Node, and Redux.
6: Getting Started with Angular Elements
Learn how to reuse Angular code and components across applications, even in non-Angular environments, using Angular Elements.
5: Working with GraphQL In Angular: How to Make a GraphQL Query
Learn how to work with GraphQL to fetch data by building an app that can query for and create books. You will also work with Apollo Angular.
4: Building an Online Store Using ngrx/store and Angular
In another online store tutorial, you will learn how to manage a complex application’s state using ngrx/store.
3: Testing Dynamic Forms in Angular
Creating dynamic forms is one of the most common tasks Angular developers are faced with. Create a basic reactive form and test it in this tutorial.
2: How to Use *ngIf else in Your Angular Applications
Published in early, 2020, this article tackles the common questions about *ngif elsein Angular applications. You will find hands-on instructions and plenty of code samples.
1: Understanding Angular Property Binding and Interpolation
It’s no surprise that this article tops our list. Angular’s two-way binding is one of the features that make it so popular. You will learn about binding types and interpolation so you will be equipped to choose the method that is right for you.
The articles listed above attracted hundreds of thousands of views, proving that Angular is alive and well. Angular developers are taking advantage of new features, learning how to best manage data, and optimizing their applications to match the expectation enterprise users have. We look forward to updating this list to see what Angular developers are working on in 2021.
Are there topics you would like to see us write about? Please leave a comment and let us know.
If you haven’t tired Kendo UI for Angular yet, it is the top choice among professional developers for building great UI. A trial is free, and it only takes a few minutes to get started. Sign up for the Kendo UI for Angular Trial here.
]]>For Vue developers we are here to kick off the year with a bang! The R1 2021 release for Kendo UI for Vue is here and it brings a set of new native components for Vue along with enhancements to existing components. Let’s dive right in and see what is new in Kendo UI for Vue with R1 2021.
The new native Vue MultiSelect component from Kendo UI for Vue offers users an intuitive user experience for selecting multiple values within a dropdown. Each selected value can appear as a list of entries and listed out as strings or as tokens and users can easily delete entries using mouse interactions or keyboard navigation.
This Vue component is perfect for scenarios that require the look-and-feel of a simple input but give users the ability to select multiple values.
Check out the Kendo UI for Vue MultiSelect Component in action right here.
With the new Kendo UI for Vue Window component developers can now easily add in a window experience similar to that of desktop windows within any Vue application.
Aspects of the Vue Window like the title, the action items that allow for minimizing and maximizing, and the content, can all be configured ahead of time and controlled using our intuitive API.
For a closer look at the Vue Window component head on over to the Kendo UI for Vue Window documentation.
Continuing the trend of adding pickers in to the Kendo UI for Vue library, with R1 2021 we are officially introducing the Vue TimePicker component. This input element allows users to select a time from an available drop down list or they can input their desired time using their keyboard. Of course, this comes with built-in validation and prevents characters not related to time from being inserted in to the TimePicker’s input.
To play around with the Vue TimePicker and to see all available configuration options, head on over to the Kendo UI for Vue TimePicker documentation section.
Wrapping up the list of most popular pickers in the Kendo UI collection, we also managed to release the Kendo UI for Vue DateTimePicker component. This picker combines the Vue DatePicker and TimePicker components into a single interface, allowing users to pick both the Date and the Time that they desire.
Selecting either Date or Time is done through the provided drop down and features a Vue Calendar to select the date and a list of available time slots. Alternatively, users can input both date and time using just their keyboard.
To play around with the Kendo UI for Vue DateTimePicker component you can refer to this documentation article.
Last but not least, with R1 2021 Kendo UI for Vue also introduced the Vue Slider component. This is one of those UI components that makes your Vue applications pop by letting users select a value within a range through dragging a single handler across a visual range. This is a great substitute for regular inputs where a value needs to be provided and developers can set up the minimum and maximum values of the range through a single configuration option for each.
Check out the Kendo UI for Vue Slider component documentation right here.
With R1 2021 the Kendo UI for Vue Grid has expanded its keyboard navigation capabilities to cover more scenarios related to interacting with the Vue Data Grid using just the keyboard. This is greatly improves the accessibility of the Kendo UI for Vue Grid component and lets users that need to use their keyboard to do actions like editing, selection, paging, and more through keyboard shortcuts.
For insight into common types of keyboard navigation and how to implement them in your Kendo UI for Vue Grid, check out this documentation article!
Adding on to the growing list of features in the Vue Data Grid, with R1 2021 we are also introducing the ability for the Kendo UI for Vue Grid’s column menu to showcase a list of available columns in the current data set and offer users the ability to show or hide a column based on selecting or deselecting a checkbox.
Head on over to the Kendo UI for Vue Data Grid Column Menu docs and demos for more information.
Did we miss a UI component that you need for your Vue applications? Or maybe you need a feature in an existing component? Well, we want to hear from you! Feel free to add comment in the comment section below, or submit an item to our Kendo UI for Vue feedback portal. Every component and feature in the R1 2021 release came from feedback from our customers so make sure to make your voice heard!
If you want to see everything I just covered in action or ask myself and the rest of the Kendo UI for Vue crew any questions join us for the Kendo UI R1 2021 Release Webinar on Thursday, January 28th starting at 11:00 AM ET. For more details head on over to our webinar registration page. Seats are limited so don’t forget to snag your spot today!
Looking for even more? You can also catch us on a special full-day Twitch session from 8am - 5pm ET on January 29th.
]]>The R1 2021 release of Kendo UI for jQuery is here to kick off the year with a bang. Let’s dive right in to all the new components and features that arrived with today’s R1 2021 release!
Initially popularized by Material Design, but now found just about everywhere, the Floating Action Button is a contextual button that executes an action on a page fits both desktop and responsive web applications alike. With the new Kendo UI Floating Action Button component, any jQuery developer can take advantage of this modern user experience across their applications.
Beyond the individual button, which can be styled and customized with a few configuration options, the jQuery Floating Action Button also sports the ability to define a “speed dial,” or additional contextual action items, which animates out on top of the larger original button. Just like the main action button these speed dial buttons can be customized to fit any design.
For a better look at how the new Kendo UI for jQuery Floating Action Button can fit in to your applications today head on over to our demos!
With R1 2021 we are also adding the new Kendo UI for jQuery Bottom Navigation component. This is the perfect UI component for any type of navigation that may have to span across desktop and mobile devices, giving users a quick and intuitive way to interact with an always-present navigation at the bottom of the page. I may have already given this away, but the component is fully responsive and can adapt to the current viewport.
You have full control over the icons and text associated with each button and integrating with any sort of routing setup is a breeze thanks to the various configuration options and events the component offers.
For a better look at the new jQuery BottomNavigation component check out our online demos.
Adding on to our expanding list of layout-focused components, the new Kendo UI ExpansionPanel component provides a quick and easy way to create content which can be expanded and collapsed. The component is broken down in to two parts: the header, which is always displayed, and the content area, which is shown or hidden depending on if the jQuery ExpansionPanel has been expanded or collapsed. As with all of our components, exactly what type of content goes into each of these areas is completely customizable by providing Kendo UI templates.
To see more of the new Kendo UI for jQuery ExpansionPanel component you can find our demos right here.
The new jQuery RadioGroup component builds on top of the previously released Kendo UI RadioButton component. Whenever two or more RadioButtons need to be used in a list you should be using the new Kendo UI for jQuery RadioGroup component to help manage selected options, validation, and the layout of the RadioButtons.
To see the jQuery RadioGroup component in action head on over to our online demos.
Similar to the RadioGroup component above, the new Kendo UI for jQuery Checkbox Group component builds on top of the existing jQuery Checkbox component and provides helpful options for managing two or more related checkboxes.
Check out the Kendo UI for jQuery CheckboxGroup component online demos right here!
The Kendo UI Data Grid has had the ability to export content to various file formats like Excel and PDF for some time and with R1 2021 we are making this even better! Now you can define whether a column should or should not be a part of the exported file. This configuration is done on a per-column basis to give you the ultimate flexibility.
Check out what this looks like by heading over to this online Kendo UI Grid demo.
Speaking of exporting improvements for the jQuery Data Grid, with R1 2021 we also introduced a ready-to-use sample showcasing how to export images from the Kendo UI Grid when exporting as an Excel file.
To see what the code looks like you can refer to this Kendo UI for jQuery Grid documentation article.
Continuing with our Grid improvements, in R1 2021 the Kendo UI Grid also added additional UI elements to help sort and group columns via the column menu. This can be enabled via couple of configuration options and gives end users even more options for interacting with the Kendo UI Grid columns through the column menu.
To see this all the new goodies in the Kendo UI for jQuery Grid Column menu head on over to this online demo.
With all of these new features we certainly had to think about how we could potentially improve the overall user experience as well, so with the latest update of the Kendo UI Grid we also added a configuration option to switch to a new and improved column menu design.
To see this new and improved column menu design you can refer to this online demo of the Kendo UI Grid.
The Kendo UI for jQuery ListView component also received a big update with R1 2021, specifically adding grouping. Similar to other data bound components like the Data Grid, any data bound to the Kendo UI ListView can now be grouped by any defined field.
To see the ListView Grouping in action, check out this online demo.
The Kendo UI for jQuery TileLayout component is already a super popular component despite being out for just a single release and with this popularity comes feedback from all of our users. One of the top-requested features for the TileLayout is the ability to add and remove tiles after the initial rendering of the component. So, with R1 2021 we added the ability for developers to modify the collection of tiles by being able to add and remove tiles dynamically.
The Editor also received some love with R1 2021. Specifically, we added the ability for lists to be created with roman numerals. Previously similar lists would be built out using numbers like 1-3, but with this new tool you can bring on the fanciness by listing items as I, II, III, IV, and so on and so on.
This Kendo UI Editor demo showcases all the tools available and includes the new Roman Numeral interface.
Another feature added to the Kendo UI for jQuery Editor is the ability to align HTML Tables within the editor content. This tool will let users quickly and easily align any table to the left, center, or right of the Editor document.
To see just how this new Table Aligning Tool for the Kendo UI Editor works, head on over to the jQuery Editor online demos.
Always striving to ensure that we are as accessible as possible with Kendo UI, with R1 2021 we also introduced various accessibility improvements across many of our components. The biggest impact comes with the ScrollView, Drawer, Timeline, and TileLayout components all added built-in keyboard navigation.
Did we miss any jQuery component or feature that you need in your web apps? Feel free to add a comment in the comment section below or add your specific request in our Kendo UI for jQuery feedback portal. Our roadmap is driven by the feedback that we hear from you so make sure you provide any and all feedback!
Interested in seeing everything I wrote about above live and in action? Maybe you have wanted to ask a question to myself or the Kendo UI for jQuery team? Well, join us for the Kendo UI R1 2021 Release Webinar on Thursday, January 28th starting at 11:00 AM ET! We’ll cover everything that I mentioned here and sprinkle in Q&A as we can throughout the session. For more details head on over to our webinar registration page. Seats are limited so don’t forget to snag your spot today!
Looking for even more? You can also catch us on a special full-day Twitch session from 8am - 5pm ET on January 29th.
]]>KendoReact always brings the thunder when it comes to releases and today’s R1 2021 release is no different! We have tons of new components, features, and even support for React 17 to announce today. Keep on reading to discover what is new in KendoReact with R1 2021.
The React 17 release famously had the “No New Features” statement in its announcement blog post, but that wasn’t necessarily the case for UI component creators like the KendoReact team. Nevertheless, on the official launch day we had day-zero support for React 17 in all KendoReact UI components. While this happened back in October 2020, it certainly is good to reiterate that you can upgrade to the latest and greatest with KendoReact.
The new KendoReact TileLayout component is the perfect component for creating interactive dashboards using a single UI component with a flexible set of configuration options. Simply define some grid-like metrics (rows and columns) along with a collection of tiles and their dimensions and you’re off to the races.
Once set up, end-users can enjoy the ability to drag around the various KPIs that are displayed in order to end up with their desired layout. Each KPI, or Tile, is completely customizable which means you can build some truly stunning and interactive layouts with this new React component.
Head on over to the KendoReact TileLayout docs and demos section to see more!
One of the top-requested form components over the last few releases has been a React UI component which combines the TreeView component and a dropdown component, which has lead to the new KendoReact DropDownTree.
The React DropDownTree component is perfect for forms that need to be concise and take up as little real estate as possible while still offering an advanced data structure to select an item from. When users interact with the simple input element, the dropdown opens up to reveal a built-in TreeView with a hierarchical structure. Users can then pick a node and the selected value will appear in the input of the component.
To see how you can take advantage of this already popular component, head on over to the KendoReact DropDownTree.
Adding to the list of popular dropdowns we added in R1 2021, we also have the new KendoReact MultiColumnComboBox. This React UI component takes a drop down and provides a table structure for each item. Items are still shown as a list, but each item can display multiple fields per row, giving that classic table look and feel. Once a user selects an item, a single value will be displayed in the input but the underlying data item of course has all fields available for the developer.
Found in many modern web applications and mobile applications, the new React FloatingActionButton provides a permanent button that appears to be floating above existing content in a predefined area on the screen. This button tends to be responsible for a single action, often contextual to the content on the current page, and has been spotted as the “compose” button in gmail and other email clients.
The look-and-feel of the component can be customized through the available configuration options to make sure the main button fits your overall design. Additionally, the KendoReact FloatingActionButton can feature a “speed dial” set of buttons which will animate out of the main button and provide multiple action buttons to select from. Just like the main button, the look and feel of all of these buttons can all be tweaked to ensure a consistent appearance throughout your applications.
To see more from the React FloatingActionButton, head on over to the KendoReact online demos.
With R1 2021 we also introduced the new KendoReact BottomNavigation component—the perfect navigation UI element for responsive web and mobile applications.
The React BottomNavigation component easily integrates with any routing library so navigating between views is easy as pie, and each navigation item within the component features an icon and associated label to ensure that end-users have the full context around what each navigation will provide.
It may go without saying, but this component is completely responsive and will respond to any changes in the size of the viewport.
You can find out more about the KendoReact BottomNavigation component in our online docs and demos right here.
Another highly requested component is the new React ListBox. This component provides an interface for displaying a list of items in a defined area that can be scrolled through. Additionally, several ListBoxes can be combined in order to give a user experience that allows users to move items between lists. When dealing with multiple ListBoxes you also have the option to add buttons that render between the boxes to help manage moving single, or multiple, item(s) between the various ListBox instances.
To see more about the React ListBox component you can refer to the KendoReact ListBox docs and demos.
To round up our list of new components, with R1 2021 we are also introducing the React Icon and React SVGIcon components. The names kind of give it away, but these UI components are both responsible for displaying icons within your React application. The big difference between the two is that the KendoReact Icon component displays icons as font icons, while the SVGIcon renders all of its icons as SVG elements.
When you add these React UI components to your application you have access to over 400 integrated icons from KendoReact so chances are you’ll find the perfect icon to use for any scenario.
To see more of these icons in action you can find the documentation for the KendoReact Icon here and the documentation for the KendoReact SVGIcon here.
While the KendoReact Grid has supported keyboard navigation for a long time by now, we have let developers determine exactly how to handle said navigation. So, as an example, rather than assume what keyboard shortcuts or interaction requirements you may have we have left it up to the developer to determine exactly what happens when you hit the tab key in the React Data Grid.
While this gives a ton of flexibility, it also comes with additional complexity since now developers have to think about how keyboard navigation should work for them and also write the code to correspond to these rules. In order to make this easier for all developers, with R1 2021 we have added some built-in and opinionated ways for handling keyboard navigation within the KendoReact Data Grid to help alleviate this complexity. This lets developers that just want keyboard navigation taken care of out of the box use a simple set of configuration options instead of spending time figuring out how to write code for every type of interaction.
To see more about this improved keyboard navigation in the KendoReact Data Grid, head on over to this documentation section for the KendoReact Grid.
Everyone loves performance improvements, right? Well, with R1 2021 we took a look at how we could improve the performance of the KendoReact Grid and discovered that we could do some improvements for how state management is done on the cell level.
As you can imagine, the Grid cells are the building blocks of any data grid so improving the performance of an individual cell can have a huge impact across any data grid.
Similar to the Grid improvement mentioning keyboard navigation, with R1 2021 the KendoReact TreeList component has taken a step towards making keyboard navigation simpler to implement for developers. While you can still take full control over exactly how keyboard navigation is handled, now you can also enable a base-level keyboard navigation that handles interactions for you through a few configuration options.
Head on over to this KendoReact TreeList Keyboard Navigation demo to see more.
Continuing the story of Keyboard Navigation in our React UI components, the KendoReact Gantt also had built-in keyboard navigation added with R1 2021. This is super helpful to ensure that the Gantt can pass accessibility compliance reviews and makes it super easy to add keyboard navigation. For developers that need a little bit of extra control they can of course take over fully to fit with any keyboard navigation requirements.
To see Keyboard Navigation in the KendoReact Gantt in action you can head on over to this demo.
Another React Gantt update that we managed to add in with this release is the built-in editing functionality which can help end-users with modifying and updating tasks found within the Gantt. This moves the KendoReact Gantt component away from just a read-only component and adds a a big feature that many Gantt users will be looking for.
You can see the KendoReact Gantt Editing feature in this online demo.
The round up of keyboard navigation improvements for R1 2021 continues, as the KendoReact Editor also added a built-in option for keyboard navigation that avoids needing to define your own keyboard operations with the Editor component. Just like with the other components we added this feature to, enabling keyboard navigation this way makes hitting accessibility goals as easy as pie.
With R1 2021 the KendoReact Avatar component received several updates to its design as well as additional configuration options to help control the overall look and feel of the component. Without going in to the nitty and gritty details, this update provides React developers with even more flexibility when it comes to customizing the appearance of the React Avatar component.
To see more about the KendoReact Avatar you can check out our online demos!
Editing has existed within the KendoReact Scheduler for quite some time, but the form responsible for editing any event has always been a default form that could not be customized—but this has officially changed with R1 2021. With the new Custom Form and Form Editor feature a React developer can pass a custom component to be responsible for the editing of the Scheduler. This gives yet another way to make the Scheduler fit any and all design requirements.
To see how you can create your own Custom Forms with the KendoReact Scheduler you can refer to this demo.
Another update to the KendoReact Scheduler component that landed in R1 2021 is the Current Time Marker. This feature is subtle at first, but it provides an indicator that is constantly displayed within the calendar interface and shows your current time across the displayed events. This feature makes it much easier for end-users to know what events they have scheduled as well as what the current time is without having to cross-reference their clock.
To see the React Scheduler Current Time Marker feature in action, head on over to this docs and demos article.
All of the above UI components and features were added thanks to feedback from KendoReact users, which is why I always like to ask: what did we miss with this release? Is there a UI component or feature that you need for your React applications that we haven’t added in yet? We want to hear from you! Feel free to provide a comment in the comment section below, or add your specific request in our KendoReact feedback portal.
Interested in seeing these new components and features getting added to our famous ACME React application? Curious to get more information about this release and other React activities we are up to? Or do you just want to take some time to ask myself and the rest of the KendoReact team questions? Well, join us for the Kendo UI R1 2021 Release Webinar on Thursday, January 28th starting at 11:00 AM ET. For more details head on over to our webinar registration page. Seats are limited so don’t forget to snag your spot today!
Looking for even more? You can also catch us on a special full-day Twitch session from 8am - 5pm ET on January 29th.
]]>It’s always a great time whenever a new release of Kendo UI for Angular arrives, which is why I’m so excited to talk about today’s R1 2021 release. Let’s dive right in and see all the new components and features of the R1 2021 release of Kendo UI for Angular!
Angular 11 was released on November 11th, 2020 (get it? 11 on 11/11! ) and of course Kendo UI for Angular immediately released support on that very day. While this happened towards the end of last year, I still want to highlight this as a part of our R1 2021 release for the folks that haven’t had a chance to upgrade yet.
For more information about what Angular 11 has brought to the table you can check out Alyssa Nicoll’s blog post right here.
On the other side of the coin, the R1 2021 release also marks the removal of support for both Angular 6 and 7.
As you are aware, Kendo UI for Angular follows the same cadence of framework version support as the Angular framework itself. Angular 7 was officially dropped from LTS support on April 18th, 2020. We maintained support throughout most of 2020, but on December 16th, 2020 we officially dropped support for both of these editions of Angular.
As usual, for folks that still need Angular 6 and 7 you can still get access to previous versions that support these versions of Angular by using distribution tags like @ng6
and @ng7
. These branches are frozen in time, so they will not receive updates, but you can still reference them for applications that aren’t ready to be upgraded to a new version of Angular quite yet. If you’re not familiar, this documentation section goes in to detail around how all of this works.
We have also implemented some breaking changes in various components that you should keep an eye out for. While individual changelogs for our packages will also mention this, we have the following GitHub issues that goes in to specifics.
One of the most anticipated UI components for Kendo UI for Angular, the new Angular DropDownTree component provides the simplicity of a DropDown and the hierarchical list of items of a TreeView.
TreeViews can take up a lot of space within any web application and often they serve the purpose of letting users select a value from the available tree structure. Real estate is often an expensive resource in modern web applications, so “hiding” the Angular TreeView within a drop down and letting the selected value display within an input element saves a ton of space.
To see the Angular DropDownTree in action, and to see the available customization options, head on over to the Kendo UI for Angular DropDownTree documentation section.
Continuing the trend of popular and highly requested drop downs, with R1 2021 we are also introducing the Kendo UI for Angular MultiColumnComboBox component. Outside of being tough to say fast ten times, this Angular UI component combines a DropDown element with a table structure for all internal items. So, rather than listing a single field of text in a long list you now have the option to display multiple fields for each items through columns for each field.
Just like with any DropDown, this lets users select a value within a list of other values without taking up precious space within the application. While by itself there may not be too much to displaying a simple table with values to select from, it certainly becomes very handy to hide this within a DropDown when this list is a part of a longer form.
To see how you can add in the Angular MultiColumnComboBox into your Angular applications today, head on over to the Kendo UI for Angular documentation!
Another exciting component added with this release is the Kendo UI for Angular TileLayout component. Released based on feedback from developers looking to create an interactive dashboard with KPIs that can be moved around, the TileLayout component makes creating dynamic and interactive layouts a breeze. By just defining the number of columns available for the component the list of Tiles will automatically fill out the component and create a look and feel of columns and rows. Users can then freely drag and drop the tiles around, as well as resize them, in order to create their own custom layout.
There’s certainly a lot to unpack with this component and I can’t do it justice just in this blog post. So, head on over to the Kendo UI for Angular TileLayout documentation to see just how you can add this new component to your Angular apps today!
Popularized by desktop and mobile applications alike, the Floating Action Button is a big part of many applications following Material Design. Chances are you have used this at some point today, or at least fairly recently.
The Floating Action Button provides a simple “floating” button that does some particular action that is contextual to the content on the page. Beyond this function we have added the ability to create additional related action items that appear when the main button is interacted with. Often called a “speed dial,” the list of available actions can be customized to fit any scenario.
Each action button within the Angular Floating Action Button comes with configuration options like style and icon to ensure that the buttons provided make sense to the user.
For more information, as well as demos to play around with the component, head on over to the Kendo UI for Angular Floating Action Button documentation section.
A layout component that has been requested by many of our developers is the new Kendo UI for Angular ExpansionPanel component.
This component provides a UI element with a title, also called a header, that can be interacted with to expand or collapse related content underneath it. Whatever is displayed in the header or content area can be customized using Angular templates so the Angular ExpansionPanel is extremely flexible and should be able to fit any Angular application.
Head on over to the Kendo UI for Angular ExpansionPanel documentation to learn more about this new component.
To wrap up the set of new UI components with R1 2021 we have also introduced the new Kendo UI for Angular TextArea component. This specifically introduces a more longform text input and is the Kendo UI for Angular equivalent of the native HTML TextArea element. The Kendo UI for Angular TextArea expands on the available components and directives which Kendo UI for Angular offers and helps achieve a consistent look and feel across any UI element in your Angular applications.
Previously only available through some CSS styling, we wanted to offer this as a standalone component to add additional features just like we did with the Kendo UI for Angular Textbox. This means features like adornments, which lets you add more elements before and after the TextArea, as well as validation icons are all available out of the box.
Here’s a quick link to the Kendo UI for Angular TextArea documentation for more information about this new component.
Throughout the last couple of releases we have improved various visual aspects of our Data Visualization library and this trend has continued with R1 2021. In this release we improved the way series highlighting is emphasized when you hover over different series in our various charts. As seen in the animation above, it becomes immediately clear which series is currently being focused while the other series becomes more deemphasized.
For a look at just how this new series highlighting works you can check out our Kendo UI for Angular Chart demos.
With R1 2021 both the Kendo UI for Angular Data Grid and TreeList take advantage of our Angular Pager to ensure that their built-in paging experience is now automatically responsive. This means that UI elements within the pager will dynamically change according to the available viewport and size of the Grid or TreeList.
This is far easier to showcase by playing around with the components, so head on over to the Kendo UI for Angular Grid or the Angular TreeList documentation sections to see this in action!
Introduced last year, with R1 2021 the Kendo UI for Angular ListView expands on its initial set of features by adding a built-in interface for editing items within the component. This moves the Angular ListView beyond just displaying data via provided templates and adds more interactivity and usability out of the box.
Check out the Angular ListView Editing demo for more information.
Accessibility is a big part of Kendo UI for Angular and the ListView component is no exception to this rule. Over the last couple of months, the Kendo UI for Angular team worked on adding built-in keyboard navigation, along with a few other improvements, to the Angular ListView in order to ensure that the ListView is compliant with WCAG 2.0, Section 508, and WAI-ARIA accessibility standards.
Adding to the already impressive list of features in the Kendo UI for Angular TreeView, with R1 2021 we have officially added in a built-in filtering mechanism and the ability to display a search textbox above the component. Previously only possible through developers providing their own custom code, the filtering mechanism can now be implemented through a simple set of configuration options.
This is one of the top-requested features for the Kendo UI for Angular TreeView, so I hope you are as excited as I am to see this feature added in!
To start filtering through all your TreeViews, jump on over to the Kendo UI for Angular TreeView documentation.
Expanding on the available features of the Kendo UI for Angular Editor, with R1 2021 we took a look at the underlying engine in order to expand the list of supported HTML elements which developers and end-users alike can add into the content of the Editor.
For a more thorough list of supported HTML elements you can head over to the Kendo UI for Angular Editor documentation.
Related to the above feature, with R1 2021 the Kendo UI for Angular Editor now supports Custom Schemas. This is an important feature because it allows the Angular Editor to support custom elements within its content, letting Angular developers expand the available elements that users can add in their content—including something completely custom.
For a peek into how this actually works, head on over to the Kendo UI for Angular Editor documentation.
For those of you that may have migrated from jQuery, ASP.NET MVC, or ASP.NET Core you may have noticed that the Angular Calendar and MultiViewCalendar components have a different design. When we initially introduced Kendo UI for Angular we revisited the user experience for calendars and created a new overall design and user experience.
We know that folks migrating between these calendars, or teams that need to support multiple technologies with a single design, can run in to some issues around the new designs. So, in order to ensure that we cover everyone with our Angular Calendars we have introduced the “Classic Rendering” mode of the Angular Calendar and MultiViewCalendar components.
The two different ways to display the Angular Calendar components can be done with a single configuration option, allowing Angular developers to easily pick and chose between the two user experiences!
To see the new Calendar rendering in action, head on over to the Kendo UI for Angular Calendar component docs right here!
Last but not least, with R1 2021 both the Kendo UI for Angular DateTimePicker and TimePicker components now support milliseconds as a part of their inputs and drop down interfaces.
See the Kendo UI for Angular TimePicker documentation and the Angular DateTimePicker documentation to see what this looks like in each component.
Did we miss an Angular component or feature that you need in your Angular projects? Feel free to add a comment in the comment section below or add your specific request in our Kendo UI for Angular feedback portal. All of the above features and components were requested by folks like you, so make sure that your voice is heard!
Want to see these new features and components in more detail? Want to ask myself and the Angular team questions about the R1 2021 release or just anything Kendo UI for Angular related? Join us for the Kendo UI R1 2021 Release Webinar on Thursday, January 28th starting at 11:00 AM ET. For more details head on over to our R1 2021 Kendo UI release webinar page. Seats are limited so don’t forget to snag your spot today!
Looking for even more? You can also catch us on a special full-day Twitch session from 8am - 5pm ET on January 29th.
]]>As a quick note before we get started: since we are covering all products found within Kendo UI this post will be more of a summary of each product. At the end of each section I will link to a more detailed blog post which goes a little more in-depth with images and such.
Interested in a particular flavor of Kendo UI, or want to sign right up for our release webinars? Jump right to your favorite section here:
Found in many modern desktop and mobile applications the Kendo UI for jQuery FloatingActionButton component is, at its core, a floating button that executes a single action. Usually showcased as a circular button with a plus sign triggering an item to be added to a list or even composing a new email.
The new Kendo UI for jQuery BottomNavigation component serves as a perfect navigation element for any responsive web application, letting developers define a row of available buttons for users to navigate through.
The Kendo UI for jQuery ExpansionPanel component is a layout component that provides a header that can expand and collapse underlying content. Of course, both the header and the content can be completely customized to fit your requirements.
Building on top of the recently introduced Kendo UI for jQuery RadioButton component, the jQuery RadioGroup component helps organize and control multiple RadioButtons.
The jQuery CheckBoxGroup component lets developers easily control the behavior of a list of Kendo UI CheckBox components.
With R1 2021 developers can now specify if a particular column should be included whenever content is exported to Excel or PDF. This is done on a column-by-column basis with the column settings controlling if the column should be included (the default) or excluded.
A popular request for the Kendo UI for jQuery Grid is to include images when exporting to Excel. So, with R1 2021 we introduced a helpful article covering how images of various types can be exported along with the rest of the content of the Grid.
Adding to the already extensive feature set in the Kendo UI for jQuery Grid’s column menu, users can now define if they want to sort or group any column via the column menu.
In order to account for all of the functionality available out of the box with the Kendo UI Grid’s column menu we took some time to revamp the look and feel of this part of the Grid. By default the Grid component will render the same look and feel as always, but a configuration option will allow a switch to the new design.
One of our more popular feature request, with R1 2021 the Kendo UI for jQuery ListView added the ability to group data and provide a user experience to expand and collapse said groups.
With R1 2021 the jQuery TileLayout component includes functionality to add or remove tiles after the component has been initially rendered.
Expanding on the available tools in the Kendo UI for jQuery Editor, with R1 2021 any ordered list can now be written using roman numerals.
The new Table Aligning Tool for the Kendo UI Editor lets users align any table to the left, center, or right within the Editor content.
Accessibility is a big part of Kendo UI for jQuery and as a part of our ongoing commitment to follow accessibility standards we did a review of our existing components and implemented improvements. The biggest impact comes from the TileLayout, Drawer, Timeline, and ScrollView components which all added keyboard navigation as a built-in feature.
To see more in-depth information, along with images and gifs, head on over to the What’s New in Kendo UI for jQuery with R1 2021 blog post.
The new Angular DropDownTree component marries the hierarchical data layout of a TreeView with a DropDown. This lets a single input element contain a full TreeView that can be interacted with to select a value.
In a similar vein to the above-mentioned DropDownTree, the new Kendo UI for Angular MultiColumnComboBox provides a DropDownList where the list of items is a table structure, letting each item have multiple columns with information displayed.
The Kendo UI for Angular TileLayout component is perfect for any dashboard application that needs to display several KPIs that end-users can interact with. This new component gives developers the ability to define a layout with a list of tiles that contain customized content driven by Angular templates. These tiles can be dragged and dropped to be rearranged, letting end-users discover their ideal layout.
Popularized through web applications like gmail and countless of mobile applications, the new Kendo UI for Angular FloatingActionButton provides a contextual action button that can be display as a floating button on any page.
With R1 2021 we are also introducing the Angular ExpansionPanel component. This component provides a expandable content area with a header that is always displayed. The content of the header as well as the content can be driven through Angular templates.
The new Kendo UI for Angular TextArea component raises the HTML TextArea element to the level of other Kendo UI for Angular components, providing a lot of additional functionality and the consistent look-and-feel across all UI elements within your Angular applications.
While Kendo UI for Angular has had day zero support for Angular 11 since it was released on November 11th, 2020 I wanted to make an additional note about this support as it was a part of our development efforts for R1 2021!
With R1 2021 the built-in pager that appears when the Kendo UI for Angular Grid or TreeList components set paging to true is now fully responsive. This lets the pager respond to the current viewport as the browser is resized or adhere to the smaller viewport when displayed on mobile devices.
Adding to the Kendo UI for Angular ListView component, with R1 2021 the ListView now has a built-in editing feature to help users edit any data displayed through component.
Continuing with the Kendo UI for Angular ListView we also added Keyboard Navigation and other items related to accessibility, allowing the Angular ListView to be compatible with WCAG 2.0, Section 508, and WAI-ARIA standards.
The Kendo UI for Angular TreeView now features built-in UI elements to help filter through available items within the TreeView.
The Kendo UI for Angular Editor received an update to allow additional HTML elements to be displayed within the content, removing some restrictions of what can and cannot be displayed within the Editor.
Along the lines of elements within the Kendo UI for Angular Editor content area, we now also support custom elements to be added thanks to the support for Custom Schemas.
For the folks using Kendo UI for jQuery, or our ASP.NET MVC or ASP.NET Core offerings that have switched to Angular we have introduced the “Classic Rendering” mode of the Kendo UI for Angular Calendar and MultiViewCalendar components, letting users maintain the same look and feel across all of these UI libraries.
With R1 2021 both the TimePicker and DateTimePicker supports displaying milliseconds within their interfaces.
To see more in-depth information, along with images and gifs, head on over to the What’s New in Kendo UI for Angular with R1 2021 blog post.
Looking for a dashboard component that allows your users to drag and drop KPIs around? Look no further than the new KendoReact TileLayout component. This React UI component lets developers define a collection of tiles which can be dragged and dropped to rearrange their order.
The new KendoReact DropDownTree component provides a DropDownList interface with an internal TreeView, letting developers save a ton of real estate since once a value is selected the popup will the TreeView will collapse.
The new KendoReact MultiColumnComboBox is a ComboBox component where the list of items is displayed within a data table, allowing items to have multiple fields displayed at once in a column structure.
The new KendoReact FloatingActionButton provides a contextual action button that “floats” somewhere within your React applications. Common use cases include a button with a plus sign adding items to a list, or composing a new email.
The KendoReact BottomNavigation component is a great component to serve as the main navigation for any responsive web application or PWA. Like the navigation in many of the mobile applications you use today, the React BottomNavigation component provides a series of tabs that can be interacted with to navigate to a new page.
With the new KendoReact ListBox component developers have a great UI component for displaying a list of items within a defined area that can be scrolled through. You can also add multiple React ListBox components to a page and can add an interface of buttons to help with moving single or multiple items between the items moved between the ListBoxes.
With R1 2021 we also are introducing the KendoReact Icon and SvgIcon components which serve as components to add in icons in a React application. The great news is that this gives developers access to the over 400 icons available from KendoReact.
Between R3 2020 and R1 2021 React 17 was released. While it was famously labeled as a release with no features, there were still changes that affected UI component libraries like KendoReact. Thankfully we addressed those changes and have been compatible with React v17 since day one.
While many of these components have already had the ability to navigate through all items via keyboard navigation, what keyboard shortcuts to use and how has been up to the developer to implement. While this gives a lot of control, it’s not as easy as just setting a single property and being off to the races. With R1 2021 we took a look at the KendoReact Grid, TreeList, Editor, and Gantt and added keyboard navigation if it did not previously exist, and updated their keyboard navigation implementation to provide some sane defaults when navigation is enabled.
The KendoReact Grid received some under-the-hood improvements with R1 2021. Specifically, we improved performance around how state management is done on the cell level.
Another feature delivered for the KendoReact Gantt component is built-in editing. Now tasks can be edited both through the TreeList interface and interacting with the rendered tasks. Editing is done through a built-in edit form which appears in a dialog component as a popup.
With R1 2021 we also expanded the React Avatar component to provide additional configuration options as well as updating the look-and-feel to help make this React component as flexible as possible.
A big feature for the React Scheduler fans out there that we added with R1 2021 is the ability to implement a custom form and form editor. This lets developers take full control over what exactly is displayed when the editing interface appears as users add or update events within the Scheduler.
The KendoReact Scheduler also received another popular feature with R1 2021: the Current Time Marker. The name kind of gives it away, but this shows a horizontal line across the Scheduler interface to showcase the current time over the displayed events.
To see more in-depth information, along with images and gifs, head on over to the What’s New in KendoReact with R1 2021 blog post.
The new native Vue MultiSelect component lets users pick multiple entries from a list of available items. Each item is displayed either as text or as a token in the MultiSelect input area to show the currently selected items.
The Kendo UI for Vue Window component serves as a movable window that can host a wide range of content. The Vue Window also provides features like show/hide, maximize, minimize, and more.
Continuing the trend of adding form elements to Kendo UI for Vue, with R1 2021 we added the Vue TimePicker component. This Vue UI component gives users a dropdown of available time slots that a user can select from.
The Kendo UI for Vue DateTimePicker component combines the new Vue TimePicker and the existing Vue DatePicker in to a single component, letting users select both the date and the time of day within a single interface.
The last native UI component added to Kendo UI for Vue is the Slider, giving users an intuitive interface for selecting a value by dragging a handler to end up on a particular value. This is a great UX improvement over having to manually type in values.
The Kendo UI for Vue Grid received improved keyboard navigation with R1 2021. Specifically we added sane defaults for what happens when developers enable keyboard navigation instead of relying on the developer to implement what should happen and when during keyboard interactions.
With R1 2021 the Kendo UI for Vue team also added the ability for users to select items to display within a column via a list of checkboxes within the column menu.
To see more in-depth information, along with images and gifs, head on over to the What’s New in Kendo UI for Vue with R1 2021 blog post.
All of the new components and features listed above came from feedback from our customers. If we missed a particular component or feature that you have been waiting for now is the time to make your voice heard! Each of the UI libraries for jQuery, Angular, React, and Vue has its own public feedback portal where you can create new items as well as vote and comment on existing items. To find each portal you can either visit the in-depth articles mentioned above, or head over to the main Telerik Feedback page and find the product you’re interested in.
This is quite the jam-packed release and your head may be swimming from all the new details! To help we have set up a live Kendo UI R1 2021 Release Webinar on Thursday, January 28th starting at 11:00 AM ET! Myself and the rest of the Kendo UI team will dive through all of the jQuery, Angular, React, and Vue components and features we introduced with this release. We will also have dedicated time for Q&A so come and ask any question you may have! For more details head on over to our webinar registration page. Seats are limited so don’t forget to snag your spot today!
Looking for even more? You can also catch us on a special full-day Twitch session from 8am - 5pm ET on January 29th.
The first release of 2021 for Telerik and Kendo UI is coming as planned on January 20, bringing major updates across our Telerik .NET and Kendo UI JavaScript product lines. Our goal is and always has been to help you build, test and deliver even the most technically complex projects quickly, with ease and for the lowest cost.
Join our Developer Advocates and product teams for the live R1 2021 release webinars and Twitch demo session to learn the exciting news.
Find out what’s new in your library of choice!
You can register for more than one webinar.
The webinar will cover all new updates across our .NET web, desktop and mobile products, plus reporting, testing and mocking tools.
Save Your Seat Tuesday, January 26 I 11 am – 1 pm ET
Here are some of the highlights we will cover in the Telerik Release Webinar:
The webinar will cover all new updates across our JavaScript web products.
Save Your Seat Thursday, January 28 I 11 am -1 pm ET
Here are some of the highlights we will cover in the Kendo UI Release Webinar:
The webinars will be complemented with a full-day Twitch session on January 29, where you will be able to see examples of using the new components and features and ask your questions to the speakers via the live chat.
The live webinars and Twitch sessions are a great opportunity for you to ask questions before and during the webinars. We’ll be waiting to hear from you on Twitter—please use the #heyTelerik and #heyKendoUI hashtag to join the conversation—and on CodeItLive, our Twitch channel, via the live chat.
Sign up today to make sure you don’t miss these great events with our experienced developer advocates Ed Charbeneau, Microsoft MVP, speaker, author of Blazor: A Beginner’s Guide and host of Blazing into Summer week of Blazor events, Sam Basu, Microsoft MVP, speaker, DevReach co-organizer and author of numerous articles on Xamarin.forms, Alyssa Nicoll, Google Developer Expert, TJ VanToll, host of React Wednesdays, and Carl Bergenhem, speaker and host of a ton of JavaScript events.
Healthy, happy & successful 2021! See you then!
]]>With today’s release (December 16th, 2020) Kendo UI for Angular npm packages now have an additional requirement for developers to provide a license key when adding any of our npm packages to their Angular project. While a project will still compile and run as usual, a warning message will appear in the console until a license key has been properly provided.
This message will also provide a link directly to the new Kendo UI for Angular My License page with instructions for how to acquire and install a license. This license is a physical file (in .txt file format) which needs to be included in your project. Once it has been added a single CLI command will have to be executed and all of this together will remove the warning message mentioned above.
Our goal with this is to ensure that acquiring a license and activating it is seamless. In order to give you a look in to what this looks like in practice I’ll cover what these steps are in the “How to Use your License Key” section below, but for those of you interested in why we have added license keys I’ll cover that first.
Kendo UI for Angular offers all of our UI components for Angular via npm packages. This ensures that Angular developers can quickly and easily add our UI components to any of their Angular projects. We know that npm is the standard for handling various packages and reference in modern web applications.
One limitation of this setup is that a commercial library such as Kendo UI for Angular does not have any tooling to assist with trials or licensed users.
As a way to continue to offer Kendo UI for Angular through npm and make hosting our packages in a public repository sustainable going forward, we hope that license keys will be a seamless process for our users while managing trial and licensed users alike.
This will affect any developer who downloads and installs the latest version of any of Kendo UI for Angular packages which, as most of you are aware, are versioned separately. If you are not upgrading today, then you will not see this warning message until you have done said upgrade.
Eventually this will of course affect all Kendo UI for Angular users in the future.
If you remember one thing from this blog post it should be to bookmark the Kendo UI for Angular My License Key page. This page will contain all the information that you need in order to understand our licensing setup along with a more detailed FAQ.
As a quick summary in this blog post the process is pretty much three steps:
The abovementioned My License page has a “Download Your License Key” section. Sign in with your Telerik account and look for the button labeled kendo-ui-license.txt
—this will download the license file you need.
As a heads-up you will need to either have an active trial, or be a licensed developer, in order to get access to a license key. If, for some reason, you are neither then this page will provide an easy-to-access link to our free trial sign-up page!
Whether this is your first time starting a Kendo UI for Angular trial, you are looking to upgrade from a trial license to a developer license, or you are a licensed developer updating to the latest version of Kendo UI for Angular, the process is the same.
kendo-ui-license.txt
) to the root folder of your project.
@progress/kendo-licensing
as a project dependency by running npm install --save @progress/kendo-licensing
.
npx kendo-ui-license activate
in the console.
Once you have done these three you should be good to go! Easy, right? This is all that you need to do in order to remove the warning message.
This works well for dev machines, but if you need this for CI servers we recommend adding the Kendo UI for Angular license key to your environment variables, as mentioned in this section of our documentation.
For trial users looking to update their license files after they have purchased a license you will have to snag another license key (tied to your purchase) and follow the same instructions again. This will replace the old trial license key and ensure your project is properly licensed.
If you are a licensed developer whose subscription has expired, and you follow the above instructions you may be met with a message that indicates that the current version of Kendo UI for Angular is not available as a part of your inactive subscription. This can be remedied by renewing your license and gaining an active subscription.
A note I want to make here is that Kendo UI for Angular licenses are still perpetual. However, they are perpetual for the versions of Kendo UI for Angular you had as a part of your subscription. So, if your subscription expired in 2020 (say December) then you would not have access to any version released in 2021.
With all that out of the way, let’s create a project using the Angular CLI and see how these license keys work in practice.
So, for this guide I’ll go ahead and create a new project using ng new
command from the Angular CLI. This lets me get up and running with an Angular project in no time flat. So, I’ll just create a new app with:
ng new kendo-ui-license
Which then grants me a fresh Angular application to try out the licensing with.
For this sample I’ll use the Kendo UI for Angular DropDownList as its one of our more popular components and it makes for an easy package to add into my project.
Following the instructions on the DropDown package overview docs, I will run the following ng add
command:
ng add @progress/kendo-angular-dropdowns
Since I used Angular schematics with the above ng add
command I should be good to go with all the proper inclusions in my project, but just for reference here is my app.module.ts
:
This means we are good to go with referencing any of the Kendo UI for Angular Dropdowns throughout our application. In fact, we even have the Kendo UI for Angular Default theme set up with this command—no need to do any additional configuration.
Additionally, the previous ng add
command should already add this to my project, but to be safe (and to highlight it here in the blog post) I’ll also run the following npm install
command:
npm install --save @progress/kendo-licensing
This is the package which is responsible for activating our license key and all Kendo UI for Angular packages now require the inclusion of @progress/kendo-licensing
as a dependency.
From here I’ll copy and paste code from the Kendo UI for Angular DropDownList Getting Started page. For the sake of this demo I’ll just remove most of the content already available in my App
component and replace it with my DropDownList.
So, lets jump over to my app.component.ts
and add in our sample data
And then in my template which comes from app.component.html
I add the markup associated with my component.
When I run my Angular application, I get a lovely DropDownList. Note that the component is fully functional. When I open the developer console, I see the following message in the console:
This message lets us know that we need to apply a license key. In case you didn’t bookmark the link previously, the message has a handy link that leads directly to the Kendo UI for Angular licensing page.
From here I can follow the instructions that I mentioned previously and download my license file by finding this button on the page (note that you have to be logged in to a Telerik account to see this):
The next step is to add kendo-ui-license.txt
to the root of my project.
Once this has been added to the project, I just have a quick command to execute:
npx kendo-ui-license activate
And that should be it! When I rebuild my application and open the developer console, I see that the message is gone, and I can continue on with developing my application. If I add more components they will just check the existing license file and will not prompt another message, so this project is now good to go for further development!
If you have a question not answered in this blog, please review the Frequently Asked Questions section of the Kendo UI for Angular License Key page, which covers more scenarios. You can also always count on our helpful support team for additional questions about this change.
Are there ways we can improve this licensing mechanism for you and your team? We would love to hear it! You’re welcome to leave a comment in the section below or submit a support ticket to interact directly with our support and engineering teams.
]]>With Kendo UI for Vue 2.0 we are adding a requirement for developers to provide a license key when adding any of the npm packages of Kendo UI for Vue. A warning message will appear in the console until a license key has been properly provided.
This message will link directly to the My License page with instructions for how to acquire and install said license. This is a physical license file which needs to be included in your project and after executing CLI command will remove the warning message mentioned above.
Our goal with this is to ensure that acquiring a license and activating it is seamless. I’ll cover what these steps are in the “How to Use your License Key” section below, but for those of you interested in why we have added license keys I’ll cover that first.
Kendo UI for Vue offers its packages via npm as a way for Vue developers to quickly and easily add our UI components to any of their Vue projects. We know that npm is the standard for handling various packages and reference in modern web applications. One limitation of this setup is that a commercial library such as Kendo UI for Vue does not have any tooling to assist with trials or licensed users.
In order to continue to offer Kendo UI for Vue through npm and make our development efforts to expand the number of features and UI components that we offer sustainable, we believe that license keys will be a good path forward for both our users as well as give our team a way to manage trial and licensed users alike.
This will affect any user who works with Kendo UI for Vue 2.0 and any version that comes after. So, if you previously have used Kendo UI for Vue in your projects you will only see this message when you upgrade to version 2.0.
Eventually this will of course affect all Kendo UI for Vue users in the future, but since we are announcing this today, I just wanted to highlight this scenario for our existing users.
The biggest thing to take away from this blog post is to keep the Kendo UI for Vue My License Key page somewhere in your bookmarks. This page will contain all the information that you need in order to understand our licensing setup along with a more detailed FAQ. That being said, I just want to cover the crucial steps to go from warning message to no warning message which should be done in three steps:
The abovementioned informational page has a “Download Your License Key” section. Sign in with your Telerik account and look for the button labeled kendo-ui-license.txt
which you should download.
A note I should make here is that you will need to either have an active trial, or be a licensed developer, in order to get access to a license key. If you do not have access the page will bring you to a registration form for a Kendo UI for Vue trial to get you up and running!
Whether this is your first time starting a Kendo UI for Vue trial, you are looking to upgrade from a trial license to a developer license, or if you are a licensed developer updating to Kendo UI for Vue 2.0, the process is the same.
kendo-ui-license.txt
) to the root folder of your project@progress/kendo-licensing
as a project dependency by running npm install --save @progress/kendo-licensing
npx kendo-ui-license activate
in the consoleOnce you have done these three you should be good to go! Easy, right? This is all that you need to do in order to remove the warning message.
If you want to move beyond your local development machine and work with this license key on your CI Servers we recommend adding the Kendo UI for Vue license key to your environment variables, as mentioned in this section of our documentation.
For trial users looking to update their license files after they have purchased a license you will have to snag another license key (tied to your purchase) and follow the same instructions again. This will replace the old trial license key and ensure your project is properly licensed.
If you are a licensed developer whose subscription has expired, and you follow the above instructions you may be met with a message that indicates that the current version of Kendo UI for Vue is not available as a part of your inactive subscription. While Kendo UI for Vue licenses are perpetual, part of your subscription is access to newer versions of Kendo UI for Vue. So, if you see this message you can simply renew and get a new, active, license key and add it to your Vue project.
With all that out of the way, let’s create a project using the Vue CLI and see how these license keys work in practice.
So, this scenario I have a newly built Vue app that used the vue create
CLI command. For my app I chose to go with the aptly named “kendo-licensing-sample” so we end up with vue create kui-licensing-sample
.
For the sake of demonstration, a quick and easy component Kendo UI for Vue component would be the Kendo UI Vue DropDownList.
Following the instructions on the DropDown package overview docs, I will run the following npm install
command:
npm install --save @progress/kendo-vue-dropdowns @progress/kendo-vue-intl
Also, to get our components styled appropriately I’ll be working with the Kendo UI for Vue Material Theme by running:
npm install --save @progress/kendo-theme-material
Now, with Kendo UI for Vue 2.0 you will see this included as a part of our npm install
commands that we list for installation instructions, but I wanted to highlight it here to showcase what package we need for the licensing mechanism to work properly.
npm install --save @progress/kendo-licensing
This is the package which is responsible for activating our license key and all Kendo UI for Vue packages now require the inclusion of @progress/kendo-licensing
as a dependency.
I’ll import the DropDownList component to my project inside the HelloWorld.vue
sample component that the Vue CLI gave me, then go ahead and copy and paste code from the Kendo UI for Vue DropDownList Getting Started page. It should end up looking something like this when put together:
I also went ahead and added this statement to App.vue
in order to apply the Kendo UI for Vue Material theme across my application
import '@progress/kendo-theme-material/dist/all.css';
Now, when I run my Vue application we should see the Vue logo and a DropDownlist with a few options. If I inspect the developer console in my browser I see the following message warning me that there is no license found in this project.
This message lets us know that we need to apply a license key. In case you didn’t bookmark the link previously, the message has a handy link that leads directly to the Kendo UI for Vue licensing page.
From here I can follow the instructions that I mentioned previously and download my license file by finding this button on the page (note that you have to be logged in to a Telerik account to see this):
Now that I’ve downloaded the license file I’ll add kendo-ui-license.txt
to the root of my project.
Once this has been added to the project, I go back to my terminal or command prompt and run:
npx kendo-ui-license activate
And that should be it! The next time I run my project the warning message should be gone, and I am off to the races. It really is as simple as that.
If you have a question not answered in this blog, please review the Frequently Asked Questions section of the Kendo UI for Vue License Key page, which covers more scenarios. You can also always count on our helpful support team for additional questions about this change.
Are there ways we can improve this licensing mechanism for you and your team? We would love to hear it! You’re welcome to leave a comment in the section below or submit a support ticket to interact directly with our support and engineering teams.
]]>Kendo UI is a library used for developing applications at a relatively quicker pace with precision; it provides UI components for libraries like jQuery, Angular, React and Vue, and comes packed with numerous components for creating charts, data tables and drag-and-drop pages.
Vue.js is a frontend development framework for developing a range of applications on different platforms. Alongside its simple integration, detailed documentation and flexibility, Vue lets you extend the template language with your components. Vue also provides libraries for routing and state management, and we’ll be utilizing the latter in this article.
In this tutorial, we are building a marketplace using Vue and Kendo UI; our store presents users a range of delicious fruits; it also lets users add and remove items from the cart. We’ll build the store with aid from Kendo UI components, and a minimal server using Express to serve the products to the application.
To follow this tutorial, a basic understanding of Vue and Node.js is required. Please ensure that you have Node and npm installed before you begin.
If you have no prior knowledge of Vue, kindly follow the official documentation here. Come back and finish the article when you’ve gone through the documentation.
We’ll be using these tools to build out our application:
Here’s a demo of the final product:
To get started, we use the vue-cli to bootstrap our application. First, we’ll install the CLI by running npm install -g @vue/cli
in a terminal.
To create a Vue project using the CLI, we’ll run the following command:
vue create vue-shop
After running this command, rather than selecting the default configuration, we’ll opt for the manual setup. We do this because we want to add a CSS preprocessor in our application and state management using Vuex. Follow the screenshot below:
The rest of the prompts can be set up as it best suits you.
Next, run the following commands in the root folder of the project to install dependencies.
// install dependencies required to build the server
npm install express body-parser
// front-end dependencies
npm install @progress/kendo-theme-default
Start the app dev server by running npm run serve
in a terminal within the root folder of your project.
A browser tab should open on http://localhost:8080. The screenshot below should be similar to what you see in your browser:
We’ll build our server using Express. Express is a fast, unopinionated, minimalist web framework for Node.js.
Create a file called server.js
in the root of the project and update it with the code snippet below
// server.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 4000;
const products = require('./products');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header(
'Access-Control-Allow-Headers',
'Origin, X-Requested-With, Content-Type, Accept'
);
next();
});
app.get('/products', (req, res) => {
res.json(products);
});
app.listen(port, () => {
console.log(`Server started on port ${port}`);
});
The calls to our endpoint are coming in from a different origin. Therefore, we need to make sure we include the CORS headers (Access-Control-Allow-Origin
). If you are unfamiliar with the concept of CORS headers, you can find more information here.
The configuration above is standard for Node applications, nothing particular to our app.
We’re creating a server to feed data to our application so we can see how Effects can be used to fetch external resources to populate the store.
Create a file named products.js
that holds the products for our store. Open the file and populate it with the code below:
//fruits.js
module.exports = [
{
"name": "Apples",
"price": 23.54,
"image": "https://images.pexels.com/photos/39028/apples-fruit-red-juicy-39028.jpeg?cs=srgb&dl=apples-food-fruits-39028.jpg&fm=jpg",
"description": "A big bite from an apple"
},
{
"name": "Lemons",
"price": 10.33,
"image": "https://images.pexels.com/photos/1898261/pexels-photo-1898261.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=400&w=400",
"description": "Great lemon slices"
},
{
"name": "Great dish",
"price": 12.13,
"image": "https://images.pexels.com/photos/37316/kaki-fruit-orange-subject.jpg?auto=compress&cs=tinysrgb&dpr=2&h=400&w=400",
"description": "Healthy meal served with a side of protein"
},
{
"name": "Mangoes",
"price": 10.33,
"image": "https://images.pexels.com/photos/918643/pexels-photo-918643.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=400&w=400",
"description": "A nice array of slushy mangoes."
},
{
"name": "Berries!",
"price": 10.33,
"image": "https://images.pexels.com/photos/1334131/pexels-photo-1334131.jpeg?cs=srgb&dl=abundance-berries-close-up-1334131.jpg&fm=jpg&auto=compress&cs=tinysrgb&dpr=2&h=400&w=400",
"description": "Berry abundance"
},
{
"name": "Coconut drink",
"price": 10.33,
"image": "https://images.pexels.com/photos/1030973/pexels-photo-1030973.jpeg?cs=srgb&dl=berries-berry-chia-1030973.jpg&fm=jpg&auto=compress&cs=tinysrgb&dpr=2&h=400&w=400",
"description": "Refreshing cocunut drink with strawberries"
},
{
"name": "Fruits",
"price": 16.43,
"image": "https://images.pexels.com/photos/103662/background-bitter-breakfast-bright-103662.jpeg?cs=srgb&dl=citrus-close-up-food-103662.jpg&fm=jpg&auto=compress&cs=tinysrgb&dpr=2&h=400&w=400",
"description": "A telling selection of fruits"
},
{
"name": "Bananas",
"price": 16.43,
"image": "https://images.pexels.com/photos/1093038/pexels-photo-1093038.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=400&w=400",
"description": "A bunch of bananas"
},
{
"name": "Eat healthy",
"price": 16.43,
"image": "https://images.pexels.com/photos/142520/pexels-photo-142520.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=400&w=400",
"description": "Corn, pepper, tomatoes and peas"
},
{
"name": "Tomatoes sprite",
"price": 16.43,
"image": "https://images.pexels.com/photos/533288/pexels-photo-533288.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=400&w=400",
"description": "A Tomato goes with any dish"
}
]
Note: Images are from https://pexels.com.
Start the server by running the following command in a terminal within the project folder:
node server.js
To get started, we’ll define the views for the application, starting from the home page. The home page houses the products grid. Create a file named Home.vue
within the src/components
folder. Open the file and update it using the snippets below. We’ll split the component snippets into three for the template
, script
and style
.
First, the template
. Copy the following content into the src/components/Home.vue
file:
<!-- src/components/Home.vue -->
<template>
<div class="main">
<section class="banners">
<div v-for="banner in banners" :key="banner.src">
<img :src="banner.src" :alt="banner.alt">
</div>
</section>
<section class="product-area">
<!-- product grid area -->
</section>
</div>
</template>
In the snippet above, we’ve defined an area for the banners and product grid. The banner area houses four banner images. We’ll go about creating the product grid component later in the tutorial.
Next, we’ll go about styling the home page, the banner area to be exact. We’ll give the images a defined height and give the container a max width.
<!-- src/components/Home.vue -->
<template>
...
</template>
<style lang="scss" scoped>
.main {
width: 90%;
margin: auto;
padding: 20px 15px;
margin-top: 30px;
.banners {
display: flex;
align-items: center;
justify-content: center;
div {
width: 26%;
margin-right: 10px;
img {
height: 200px;
width: 100%;
max-width: 100%;
border-radius: 10px;
object-fit: cover;
}
}
}
}
</style>
Next, we’ll create the banners
data property with an array of images. Open the home.component.ts
file and update it to be similar to the snippet below:
<template>
...
</template>
<style lang="scss" scoped>
...
</style>
<script>
export default {
name: "Home",
data() {
return {
banners: [
{
src:
"https://images.pexels.com/photos/209339/pexels-photo-209339.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=300&w=510",
alt: "A tasty treat"
},
{
src:
"https://images.pexels.com/photos/247685/pexels-photo-247685.png?auto=compress&cs=tinysrgb&dpr=2&h=300&w=510",
alt: "Chocolate covered pancakes"
},
{
src:
"https://images.pexels.com/photos/68899/pexels-photo-68899.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=300&w=510",
alt: "Burger and fries"
},
{
src:
"https://images.pexels.com/photos/165776/pexels-photo-165776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=300&w=510",
alt: "Get ready to slice"
}
]
};
},
};
</script>
Since we’ll be using external fonts, we’ll update the public/index.html
file with a link
tag:
<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="https://www.telerik.com<%= BASE_URL %>favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:600,700|Muli:400,600,700" rel="stylesheet">
<title>vue-shop</title>
</head>
<body>
<noscript>
<strong>We're sorry but vue-shop doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Then we’ll select Muli as our default font family; we’ll also negate the default padding
and margin
on the body
and html
elements. Open the App.vue
file and update the style
area with the following content:
<!-- App.vue -->
<template>
...
</template>
<script>
...
</script>
<style>
body,
html {
margin: 0;
padding: 0;
font-family: "Muli", sans-serif;
background-color: whitesmoke;
}
</style>
Next, we’ll create and render a Header component in our application before we start working on the product grid.
The header component displays the application logo and the number of items in the cart
. We computed the cart
value from the Vuex store.
Create a file Header.vue
within the src/components
folder. Open the file and follow the three-step process of creating the component below:
First, we’ll create the template
section:
<!-- src/components/Header.vue -->
<template>
<header>
<div class="brand">
<img src="https://www.telerik.com../assets/logo-2.svg" alt="avatar">
<h5>Just fruits</h5>
</div>
<div class="nav">
<ul>
<li>
<img src="https://www.telerik.com../assets/cart.svg" alt="cart">
<span class="badge" v-if="cart.length > 0">{{ cart.length }}</span>
</li>
</ul>
</div>
</header>
</template>
Next, we’ll style the header within the style
section. Update the file using the snippet below:
<!-- src/components/Header.vue -->
<template>
...
</template>
<style lang="scss" scoped>
header {
display: flex;
background-color: white;
margin: 0;
padding: 5px 5%;
color: whitesmoke;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
background: rgb(242, 247, 236);
.brand {
flex: 1;
display: flex;
align-items: center;
img {
height: 35px;
border-radius: 50%;
margin-right: 17px;
}
h5 {
font-family: "Josefin Sans", sans-serif;
font-size: 17px;
margin: 0;
letter-spacing: 0.4px;
color: rgb(83, 158, 17);
opacity: 0.7;
text-transform: uppercase;
}
}
ul {
list-style: none;
padding-left: 0;
display: flex;
li {
display: flex;
align-items: center;
position: relative;
img {
width: 40px;
}
.badge {
height: 20px;
width: 20px;
font-size: 11px;
color: white;
background-color: rgb(83, 158, 17);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
right: -10px;
border-radius: 50%;
}
}
}
}
</style>
Finally, we’ll include the script
section:
<template>
...
</template>
<style lang="scss" scoped>
...
</style>
<script>
export default {
name: "Header",
computed: {
cart() {
// we'll get the cart from the VueX store. The store will be created later in the article
}
}
};
</script>
After creating the Home
and Header
components, the next step is to render the components in the root App
component. Open the App.vue
File within the src/
directory. Update the template
section to render both Header
and Home
, components and the script
section to create the cart
property.
<!-- src/App.vue -->
<template>
<div id="app">
<main>
<Header/>
<div class="app-home">
<Home />
</div>
</main>
</div>
</template>
<script>
import Home from "./components/Home";
import Header from "./components/Header";
export default {
name: "app",
components: {
Home,
Header
},
};
</script>
<style>
...
<style>
Start the application server by running the following command: npm serve
.
Then navigate to http://localhost:8080 on your browser, you should see something similar to the screenshot below:
Note: Make sure to use your own preferred images here.
Next, we’ll set up the Vuex store by creating the default state of the application and defining actions and mutations for the application.
To ensure the best practice for the application and to make sure the application adopts a unidirectional flow of data, we’ll be making use of the Vuex library. Vuex is a state management library for Vue.js applications. It serves as a store for all the components in an application; it ensures that the state can only be mutated predictably.
The Vue-CLI already generates the store.js
file for us, so all we need to do is set the initial state of our application and create the mutations
and actions
required to update the state correctly.
Open the src/store.js
file and update the content following the snippet below:
// src/store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
items: [],
cart: [],
},
mutations: {
loadSuccess(state, payload = []) {
state.items = [...state.items, ...payload];
},
addToCart(state, item = {}) {
state.cart = [...state.cart, item];
},
removeFromCart(state, item = {}) {
state.cart = [
...state.cart.filter((product) => product.name !== item.name),
];
},
},
actions: {
loadItems({ commit }, items) {
commit('loadSuccess', items);
},
addToCart({ commit }, item) {
commit('addToCart', item);
},
removeFromCart({ commit }, item) {
commit('removeFromCart', item);
},
},
});
First, we have to define the initial state of the application; our application displays a list of items
and also allows users to add and remove items from the cart
, so the initialState
of our application features an empty array of items
and an empty cart
array.
Actions are typically used to describe events in the application when an event is triggered; a corresponding event is dispatched to handle the triggered events. Actions are similar to mutations in Vue.js; the difference is that actions commit mutations.
In the snippet above, we created three actions:
loadItems
: We dispatch this action when we wish to populate the store with items from the server.addToCart
: The addToCart
action is dispatched to add an item to the cart; it commits a mutation of similar name.removeFromCart
: This action takes an item as a second argument and removes it from the cart.Mutations are pure functions that transition your application’s state from one to the next. It is similar to an event, meaning it gets a type
and a handler
. The handler
function is where we transition the state of the application.
In the snippet above, we defined three mutation functions:
loadSuccess
: Within this method is where we load the items
array with the products fetched from the server.addToCart
: The addToCart
method takes an item and adds it to the cart
array.removeFromCart
: This method gets an item
and filters it out of the cart
.Next, we’ll create the component to render the products and also work on the add to cart functionality. Stay tuned.
Create the following files within the src/components
directory: Product.vue
for rendering individual product cards, and ProductList.vue
for rendering a list of product cards.
After creating these files, open the Product.vue
file and update with the code below. First the template
section:
<!-- src/components/Product.vue -->
<template>
<div class="product">
<div class="product-image-holder">
<img :src="https://www.telerik.comproduct.image" :alt="product.name" class="product-image">
</div>
<div class="product-details">
<p class="product-details__name">{{ product.name }}</p>
<p class="product-details__price">${{ product.price }}</p>
</div>
<div class="product-description">
<p>{{ product.description }}</p>
</div>
<div class="product-actions">
<button class="product-actions__add" @click="addToCart(product)" v-if="!inCart">
<span class="k-icon k-i-shopping-cart"></span>
</button>
<button class="product-actions__remove" @click="removeFromCart(product)" v-if="inCart">
<span class="k-icon k-i-shopping-cart"></span>
</button>
</div>
</div>
</template>
Here we have two buttons for adding to and removing an item from the cart. A flag inCart
is used to determine which of the buttons to display. We also used Kendo UI’s icon set to define the cart icon button. Kendo UI has a rich set of icons that are available here. They are easy to configure and customize.
Let’s style the component by adding a style
section within the component file:
<!-- src/components/Product.vue -->
<template>
...
</template>
<style lang="scss" scoped>
%button {
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
height: 32px;
width: 32px;
cursor: pointer;
&:hover {
transform: scale(1.1);
}
img {
width: 16px;
height: 16px;
}
}
.product {
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
border-radius: 5px;
margin: 0 15px 30px 0;
width: 286px;
max-height: 400px;
height: 320px;
background: white;
&:hover {
transform: scale(1.05);
.product-actions {
display: flex;
}
}
&-image {
max-width: 100%;
width: 300px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
height: 180px;
object-fit: cover;
}
&-details {
display: flex;
justify-content: space-between;
padding: 8px 15px;
&__price {
font-weight: 600;
color: #88C058;
opacity: 0.7;
font-size: 15px;
letter-spacing: 1px;
margin: 0;
}
&__name {
opacity: 0.9;
font-weight: 600;
margin: 0;
}
}
&-description {
padding: 10px 15px;
p {
opacity: 0.5;
margin: 0;
font-size: 15px;
}
}
&-actions {
display: none;
justify-content: flex-end;
padding: 0 15px;
&__add {
@extend %button;
border: 2px solid rgba(0, 0, 0, 0.3);
}
.k-icon {
color: rgb(52, 186, 219);
font-size: 18px;
}
&__remove {
@extend %button;
border: 2px solid rgba(0, 0, 0, 0.3);
.k-icon {
color: orangered;
font-size: 18px;
}
}
}
}
</style>
Next, we’ll add the script
section to create the variables and methods used in the template
section.
<!-- src/components/Product.vue -->
<template>
...
</template>
<style lang="scss" scoped>
...
</style>
<script>
export default {
name: "Product",
props: ["product"],
data() {
return {
inCart: false
};
},
methods: {
addToCart(item) {
this.$store.dispatch("addToCart", item);
this.inCart = true;
},
removeFromCart(item) {
this.$store.dispatch("removeFromCart", item);
this.inCart = false;
}
}
};
</script>
The Product
component takes a single prop product
; this object contains details of the product we render.
The addToCart
method takes one parameter (item
); we dispatch this method with an item to add to cart. After dispatching the item, we set inCart
property to true
. This flag is for displaying the “Add to cart” button when true
and the “Remove from cart” button when false
.
Meanwhile, the removeFromCart
method dispatches an item to be removed from the cart and updates the inCart
property to false
.
Next, we’ll render the Product
component in the ProductList
component. Open the ProductList.vue
file and update the template
section to render the Product
similar and the script
area to listen for custom events from the Product
component:
<!-- src/components/ProductList.vue -->
<template>
<div class="product-list">
<Product
v-for="product in products"
:product="product"
:key="product.id"
/>
</div>
</template>
<script>
import Product from "./Product";
export default {
name: "ProductList",
props: ["products"],
components: {
Product
},
};
</script>
<style lang="scss" scoped>
.product-list {
padding: 10px 0;
margin-top: 30px;
display: flex;
flex-wrap: wrap;
}
</style>
The product list component receives a products
array from the Home
component. It then loops through the products
array using the Product
component to render each item in the array.
After making this change, the next step is to render the product list component in the Home.vue
component. We’ll also update the Home
component to fetch products from the server and the Header
component to subscribe to the cart
.
Open the Home.vue
file and render the product list component within the element with the product-area
class attribute:
<!-- src/component/Home.vue -->
<template>
<div class="main">
<section class="banners">
...
</section>
<section class="product-area">
<ProductList
:products="products"
/>
</section>
</div>
</template>
<style lang="scss" scoped>
...
</style>
<script>
import ProductList from "./ProductList";
export default {
name: "Home",
components: {
ProductList
},
data() {
return {
banners: [
...
]
};
},
async mounted() {
const res = await fetch("http://localhost:4000/products");
const products = await res.json();
this.$store.dispatch("loadItems", products);
},
computed: {
products() {
return this.$store.state.items;
}
}
};
</script>
First, we fetch the products by making a request to the server using the Fetch API in the mounted
component lifecycle. After successfully fetching the products, we dispatch an event to populate the store with the products returned from the server.
Also, we subscribed to the items
property in the store; this keeps our component in sync with the Vuex store.
Finally, we’ll update the Header
component to subscribe to the store’s cart
array; this updates the header with the number of items in the cart.
<!-- src/components/Header.vue -->
<template>
...
</template>
<style lang="scss" scoped>
...
</style>
<script>
export default {
name: "Header",
computed: {
cart() {
return this.$store.state.cart;
}
}
};
</script>
After this change, if you visit http://localhost:8080, you should see all the latest changes we’ve made, including the ability to add and remove an item from the cart. You should also see the number of items in cart when an item is added or removed from the cart.
Note: Ensure both the Vue dev server is running on port 8080 and the server is running on port 4000.
In this tutorial, we have created an online fruit shop that serves the freshest of fruits. We utilized Vuex to manage the state of our application. Our store is a simple example of how applications can be built with ease using a library like Vue.js and Kendo UI’s components.
]]>“I love the process of migrating to a newer version of our software” —said no developer ever.
In my career so far, I’ve performed several dozen migrations, despite knowing that migration often feels like this:
Vue.js 3.0.0 "One Piece" is marvelous, but a lot of developers still have yet to migrate to it. The Vue Core Team did a great job with the migration guide and are currently working on the migration build but one more resource is always helpful, so I decided to outline several not-well-known changes that I stumbled upon while migrating Kendo UI for Vue components.
I have chosen the trickiest cases for me—emitting events with native names, using render functions and mixins merges. Each one of these rare cases could help you catch a bug that could be easily missed during the migration process. In my next blog I will also share all the steps that need to be done for a common ‘Getting Started app’ while upgrading our actual “Kendo Vue - Getting Started” app from the Kendo UI Template Wizard.
I often use a folder with thin layer components around a button, input or even a div and have it ready to use in my app—I call these ones my little weapons. The tiny trap here is that I tend to emit events that have the same names as the native component, so that I can easily switch between them. Like in the code below:
<
button
@
click
=
"onClick"
>One click</
button
>
<
MyButton
@
click
=
"onClick"
>Two Clicks</
MyButton
>
In Vue 3, having this configuration will trigger the event twice as you can see in this editable example.
One possible way to fix this is by using the great brand new Vue 3 ‘emits’ option, as it is described in the documentation here, or just prevent the native event by declaring it as ‘null‘ that will only trigger the custom event.
emits: {
click:
null
},
...
Remember my little weapons? Well, render functions, on the other hands, are like bazookas. They provide huge flexibility and need to be handled with care. Vue 3 brings on a huge change in the syntax, and the entire VNode props structure is flattened. Any change in such scenarios should be handled with special care because they could easily smash us with a rock:
|
|
Another tricky thing here is the part when we use a render function with yet another component. In this case we need to define the children as function, this brings more performance because the props will be registered only as a dependency of the child components:
|
|
Example code - https://stackblitz.com/edit/yyyupr-pzu5ny
In the very beginning of Vue 2, mixins were really trendy and could be easily used for all kinds of application structure purposes. Vue 3 is a game changer for them because of the introduction of the Composition API. Even though some of mixins features are still supported, I would really recommend reconsidering their usage and migrating away from using them.
One scenario where things may break is mixing data merges. This can lead us to another ‘rock’ when, in the resulting component, the merged data options could be expected—but will no longer exist.
|
|
In such cases, the official Vue documentation recommends either:
I really like how the setup function declares all the settings, so here is my first option for solving this with code:
|
|
Example here: https://codesandbox.io/s/immutable-hill-twofr
I have spent several weeks migrating all the Kendo UI for Vue components to Vue 3, and even more to migrate around 1000 examples! Even though I read all the change and migration guides carefully, I still often felt like this:
That’s exactly why I decided to share these tips with you. If you know of other tricky parts, or if any of these tips were helpful for you, please share your case in the comments below or reach out via twitter @pa4oZdravkov.
Happy coding and happy migration!
]]>React 16.6 added a <Suspense>
component that lets you asynchronously load components, data or any other code, and declaratively specify a loading UI while the user is waiting. This lets us build better responsive apps with smoother state/page transitions.
In this article, I’m going to focus on using Suspense for data fetching with an example using KendoReact Data Grid.
When working with data in React, we often put the code to fetch data alongside the component by calling it inside the componentDidMount
method or using the useEffect
hook. Let’s look at an example using a KendoReact Data Grid that shows basic user information.
Let’s say you have a function to fetch user data:
export async function getUsers(count = 10) {
const url = `https://randomuser.me/api/?results=${count}`;
const response = await fetch(url);
const data = await response.json();
return data.results.map(({ name, dob, gender, location }) => ({
name: `${name.first} ${name.last}`,
age: dob.age,
gender: gender,
country: location.country,
}));
}
and a component to call this function and display the result in a table:
import { Grid, GridColumn } from "@progress/kendo-react-grid";
import { useState, useEffect } from "react";
import getUsers from "./data/user-service";
export default function GridContainer() {
const [users, setUsers] = useState(null);
useEffect(() => {
const loadData = async () => {
const data = await getUsers();
setUsers(data);
};
loadData();
}, []);
return (
<Grid data={users}>
<GridColumn field="name" />
<GridColumn field="age" />
<GridColumn field="gender" />
<GridColumn field="country" />
</Grid>
);
}
In this component, I’m using hooks to asynchronously load the data when this component is rendered.
When this component is rendered, it will behave as you see in the screen recording below.
You should notice some seconds delay between showing “no records available” and displaying data. This is a confusing transition especially if the user is on a slow internet connection. This problem is not an unusual one. One way you could solve this is to introduce a loading state.
export default function GridContainer() {
const [users, setUsers] = useState(null);
const [loaded, setLoaded] = useState(false);
useEffect(() => {
const loadData = async () => {
const data = await getUsers();
setUsers(data);
setLoaded(true);
};
setTimeout(() => {
loadData();
}, 1500);
}, []);
return (
<>
{loaded ? (
<Grid data={users}>
<GridColumn field="name" />
<GridColumn field="age" />
<GridColumn field="gender" />
<GridColumn field="country" />
</Grid>
) : (
<h2>Loading Data</h2>
)}
</>
);
}
The change we just made was to add a loaded
state, update it when the data is ready, and conditionally render a loading status based on the loaded
state. This is one of the problems the React team wants to solve with Concurrent Mode and Suspense. Instead of writing extra code to indicate a loading state, you can signal to React that something is loading in the background and that it should suspend and display a temporary UI until the resource is ready to be displayed.
The pattern you saw from the previous section can be referred to as fetch-on-render. This means that your code starts fetching data needed for that component only after the component is rendered. There are times when this might not be a desirable experience, and because we know what data a route or component needs, we could asynchronously load the data and render the component in parallel. This pattern we can refer to as render-as-you-fetch, and we can achieve this using Suspense.
The way this will work is you wrap your component in <React.Suspense />
and provide a fallback UI to be rendered when its child components are not ready. In the child component that is wrapped with Suspense, you’ll throw a promise that reads (or attempts to read) the data while the fetch is still in progress. When this promise is thrown, React suspends rendering the component and displays the fallback UI you specified. It would retry until the data is ready, and the actual component will be rendered.
We can add another function to fetch data using this pattern as follows:
export const fetchUsers = (count = 10) => {
return wrapPromise(getUsers(count));
};
// Note: this is a simplified implementation.
function wrapPromise(promise) {
let status = "pending";
let result;
let suspender = promise.then(
(r) => {
status = "success";
result = r;
},
(e) => {
status = "error";
result = e;
}
);
return {
read() {
if (status === "pending") {
throw suspender;
} else if (status === "error") {
throw result;
} else if (status === "success") {
return result;
}
},
};
}
The fetchUsers
function is used to initiate the fetch and pass the promise to wrapPromise
. The wrapPromise
function returns an object with a read()
method which behaves in the manner React Suspense expects. If the data fetch is still not yet resolved, it throws a promise. If it succeeds, it returns the result; otherwise, it throws an error.
The implementation you see above is similar to what you’ll find in the React docs. It’s a simplified version of how they implemented it in the Relay framework which would serve as a reference implementation for data library authors, but not to be copied and used in production. It’s strongly advised not to use this feature in production. React Query has an implementation that you can check if you want to go further.
Suspense is part of a set of features the React team is building to help React apps stay responsive and gracefully adjust to the user’s device capabilities and network speed. They’re still experimental and are subject to change, but you can try them in an experimental build. You’ll have to install this version to use the features. There are no semantic versioning guarantees for the experimental builds, and APIs may be added, changed or removed with any experimental release.
To install the experimental build, run:
npm install react@experimental react-dom@experimental
In the entry point of your app, where you have something like:
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
Change it to:
ReactDOM.unstable_createRoot(document.getElementById("root")).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Now you can wrap your component with <Suspense />
. You can put the <GridContainer />
inside <Suspense />
and provide a fallback UI.
<Suspense fallback={<h2>Loading container</h2>}>
<GridContainer resource={fetchUsers()} />
</Suspense>
You passed a resource
prop to <GridContainer />
whose value will be the result of calling fetchUsers()
. When fetchUsers()
is called, it starts fetching the data and returns an object with a read()
function to use to get the data.
You now should update the <GridContainer />
to read data using the resource
prop passed to it:
export default function GridContainer({ resource }) {
const users = resource.read();
return (
<Grid data={users}>
<GridColumn field="name" />
<GridColumn field="age" />
<GridColumn field="gender" />
<GridColumn field="country" />
</Grid>
);
}
When this code is executed, it calls read()
to get the data. If it’s not ready, it throws a promise that causes it to suspend, and React renders the fallback code you specified. It tries again and, if the data is ready, it renders the component and replaces the fallback UI.
That is how you can use Suspense for data fetching. What I didn’t show is what happens when an error occurs. You would handle this using React’s Error boundary.
Suspense is still an experimental feature and its API is subject to change. It’s not yet part of a stable React release, but you can try them in an experimental build as I’ve shown in this article. I described how you can use this new mechanism to fetch data in React but it can be used for other async use cases. You can find a sample repo for the code in this article on GitHub.
An ecommerce application is one where people can place orders for items from their browser thus saving them the stress of going physically to the store. Many ecommerce giants have emerged over time selling various merchandise. Companies like Aliexpress and Amazon top the charts. In this tutorial, we will build a basic version of an ecommerce application.
Building components from scratch sometimes can be daunting and time consuming. To handle an aspect of our application, we will use Kendo UI components, which will save us a ton of time.
Kendo UI is a JavaScript library developed by the Telerik team at Progress. It enables you to build the UI of a web application rapidly. Kendo UI’s core library provides a wide set of easy-to-use UI components such as grids, text boxes, numeric text boxes, charts, etc. Kendo UI provides components for popular JavaScript libraries like jQuery, Angular, React and Vue.
To follow this tutorial, a basic understanding of jQuery and JavaScript is required. HTML/CSS knowledge is also recommended but not mandatory.
To build this application, here are a few tools we’ll use:
Shopping carts, ecommerce and stores are buzzwords that make such a platform seem difficult to develop. While developing a fully functional/scalable ecommerce application may be tasking, implementing basic versions can be trivial to build. We will go through the steps necessary to create one with HTML/CSS, jQuery and Kendo UI.
Create a folder called marketplace and define this folder structure inside it:
marketplace/
css/
styles.css
js/
items.js
functions.js
index.html
For our application we will use a very minimal approach. We:
Before anything else, let’s prepare our index.html file to receive and display contents. In your index file enter the following lines of code:
<!-- ./index.html -->
<html>
<head>
<title>Awesome Market</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href=" https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<main>
<header>
<nav class="navbar navbar-light bg-light justify-content-between">
<a class="navbar-brand">MarketPlace</a>
<div id="cart-container">
<div id="cart">
<i class="fa fa-shopping-cart openCloseCart" style="margin-right: 10px;" aria-hidden="true">cart</i>
<i class="fas fa-trash-alt" id="emptyCart">Empty cart</i> </div>
<span id="itemCount"></span>
</div>
</nav>
</header>
<div id="shoppingCart">
<div id="cartItemsContainer">
<h2>Items in your cart</h2>
<i class="fa fa-times-circle-o fa-3x openCloseCart" aria-hidden="true"></i>
<div id="cartItems"></div>
<span id="cartTotal"></span>
</div>
</div>
<div id="products" class="row"> </div>
</main>
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script src="js/functions.js"></script>
</body>
</html>
In our file we do a couple of things, let’s piece them out one by one.
So far we have defined a stylesheet and a functions file with empty contents. Let’s go ahead and and fill them up.
Open up your CSS file and add the file and add the following code to it:
// css/styles.css
main {
padding: 10px 0;
width: 1024px;
margin: 0 auto;
}
#cart-container {
float: right;
width: 210px;
position: relative;
}
#itemCount {
position: absolute;
display: none;
top: -10px;
left: -10px;
width: 20px;
height: 20px;
border-radius: 50%;
background: red;
color: white;
text-align: center;
}
nav {
margin-bottom: 30px;
nav ul {
list-style: none;
overflow: auto;
width: 100%;
background: #444444;
}
nav ul li {
float: left;
padding: 5px 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
nav ul li:hover {
color: #444444;
background: #cccccc;
}
nav ul li:hover a {
color: #444444;
}
img {
width: 100%;
}
.item {
width: 31%;
float: left;
margin: 1%;
}
.itemText p {
margin-bottom: 20px;
}
.price-container {
margin-top: 20px;
}
i:hover {
cursor: pointer;
}
#shoppingCart {
top: 0;
left: 0;
height: 100%;
width: 100%;
display: none;
position: absolute;
z-index: 9999;
background: rgba(0, 0, 0, 0.6);
}
#cartItemsContainer {
position: relative;
width: 600px;
left: 50%;
top: 150px;
margin-left: -300px;
padding: 40px;
box-shadow: 0 0 10px black;
background: #e9e9e9;
overflow: auto;
}
#cartItemsContainer i {
position: absolute;
top: 20px;
right: 20px;
}
#cartItemsContainer .itemDetails {
overflow: auto;
width: 100%;
margin-bottom: 40px;
}
#emptyCart {
display: none;
}
#cartItemsContainer .itemImage {
float: left;
width: 260px;
padding: 0 40px;
}
#cartItemsContainer .itemText {
float: right;
width: 260px;
padding: 0 40px;
}
#cartItemsContainer .itemText .price-container {
margin-top: 0;
}
.removeItem {
margin-left: 40px;
}
.col-sm-4 {
margin-bottom: 15px;
}
Now let’s fill our items.js
file with products. Add the following code to it:
// js/items.js
[
{
"name": "Berries",
"price": 23.54,
"image": "https://images.unsplash.com/photo-1488900128323-21503983a07e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80",
"description": "Sweet popsicles to help with the heat"
},
{
"name": "Orange",
"price": 10.33,
"image": "https://images.unsplash.com/photo-1504185945330-7a3ca1380535?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=340&w=340&q=80",
"description": "Mouth watering burger. Who cares if it's healthy"
},
{
"name": "Lemons",
"price": 12.13,
"image": "https://images.unsplash.com/photo-1504382262782-5b4ece78642b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80",
"description": "Sumptuous egg sandwich"
},
{
"name": "Bananas",
"price": 10.33,
"image": "https://images.unsplash.com/photo-1478369402113-1fd53f17e8b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80",
"description": "A great tower of pancakes. Dig in!"
},
{
"name": "Apples",
"price": 10.33,
"image": "https://images.unsplash.com/photo-1505253304499-671c55fb57fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80",
"description": "Great looking Waffle to start the day"
},
{
"name": "Sharifa",
"price": 10.33,
"image": "https://images.unsplash.com/photo-1470119693884-47d3a1d1f180?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=400&q=80",
"description": "What's greater than 5 minutes with grilled corn"
}
]
N/B: All images are gotten from unsplash.
Now open your functions.js
file and add the following code to it:
// js/functions.js
function init(){
// read our array of products and display it
$.getJSON( "js/items.js", function( json ) {
json.forEach(function (item) {
$("#products").append('<div class="col-sm-4"><div class="card">' +
'<img class="card-img-top" src="https://www.telerik.com' + item.image + '">' +
'<div class="card-body">' +
'<h5 class="card-title">' + item.name + '</h5>' +
'<p class="card-text price">' + "Price: $" + item.price + '</p>' +
'<p class="card-text price">' + item.description + '</p>' +
'<a href="https://www.telerik.com#" id="showPopupNotification" class="add btn btn-primary">Add to cart</a>' +
'</div>' +
'</div></div>');
});
});
}
$(init);
Using jQuery we:
items.js
fileindex.html
file.Now when you try to load your index.html
, you will see a blank screen. That is because your browser is unable to read the JSON
file due to something called Access control origin. To resolve that, we need to use a http-server
to load our files.
First install http-server by typing the following in your terminal:
npm install -g http-server
By installing that, you make http-server available to be used anywhere in your system. Now in your terminal type the following to serve your file:
http-server -c-1
Now when you visit http://localhost:8080
in your browser, you will see this:
That means we have been able to read and display our product alongside their information. Next, we need to write functions to handle adding and removing items from the cart.
Open your functions.js
and add the following code to it:
// js/functions.js
function init(){
var itemCount = 0;
var priceTotal = 0;
// other code stays same
// Add Item to Cart
$('.add').click(function (){
itemCount ++;
$('#itemCount').text(itemCount).css('display', 'block');
$(this).siblings().clone().appendTo('#cartItems').append('<button class="removeItem">Remove Item</button>');
// Calculate Total Price
var price = parseInt($(this).siblings().find('.price').text());
priceTotal += price;
$('#cartTotal').text("Total: $" + priceTotal);
});
// Hide and Show Cart Items
$('.openCloseCart').click(function(){
$('#shoppingCart').toggle();
});
// Empty Cart
$('#emptyCart').click(function() {
itemCount = 0;
priceTotal = 0;
$('#itemCount').css('display', 'none');
$('#cartItems').text('');
$('#cartTotal').text("Total: $" + priceTotal);
});
// Remove Item From Cart
$('#shoppingCart').on('click', '.removeItem', function(){
$(this).parent().remove();
itemCount --;
$('#itemCount').text(itemCount);
// Remove Cost of Deleted Item from Total Price
var price = parseInt($(this).siblings().find('.price').text());
priceTotal -= price;
$('#cartTotal').text("Total: €" + priceTotal);
if (itemCount == 0) {
$('#itemCount').css('display', 'none');
}
});
}
$(init);
Here we define functions we will need in our application.
Click
method we target specific elements and update their state based on which button is clicked$
to invoke the init function once it is loaded on our index pageAt this point we have a working version of an ecommerce application. Let’s add one more functionality with Kendo UI.
You may have noticed that the empty cart doesn’t display when we load our page. That is because we initially set it to not display at all from our CSS. In this section we will:
We need to import Kendo UI into our project before we can access the button component.
Open your index.html
file and add the following lines of code to it (read the comments to know where to insert the snippets) :
// ./index.html
<head>
//import kendoui through the cdn in your header
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"> </script>
</head>
In this file we simply import Kendo UI through the CDN.
Now let’s initialize the function in our js file. Open up the functions.js file and add this code to it:
// js/functions.js
// add inside init function
$("#emptyCart").kendoButton();
//insert code in bold into this function
$(document).on("click", ".add", function (){
// new code
$('#emptyCart').css('display', 'inline');
//other code stays same
Here we do two things:
Now restart your server and visit http://localhost:8080
in the browser. Once you add an item to the cart, you will see the button display.
In this tutorial, we learned how to use jQuery, HTML and Kendo UI’s button component to build a basic ecommerce marketplace. The knowledge from here is merely an introduction to creating store applications. Be sure to post comments for clarity on parts you don’t understand. Happy coding.
]]>First, a little bit of background.
Kendo UI is a comprehensive web user interface framework with a collection of JavaScript UI components with libraries for jQuery and even more modern ones like Vue, React and Angular. Kendo UI developers build interactive and responsive high-performance apps using a large library of UI widgets and data visualization components.
Using Kendo UI you can easily add really advanced UI components into your frontend project in the library of your choice. You get to save time from worrying about key functionalities of the interface and focus on proprietary features instead. Kendo UI ships with support for each of your favorite frontend web frameworks like Vue.js with an easy-to-use integration.
Also besides basic UI components, Kendo UI provides you with advanced data visualization UI elements that ensure you do not have to add additional libraries to your project to handle charts and graphs. These advanced UI elements are also very customizable too.
You will be building a climate view UI component in Vue.js using Kendo UI. We will start by scaffolding it with the Kendo UI starter extension in VS Code and then use Vue Router to create routes and finally use some Kendo UI chart components to build the interface.
I’m assuming you already have Vue installed; if not go to the installation guide. Now, let’s open up your VS Code. The first thing we are going to do is to install the Kendo UI template wizard extension. You can do that by going to the extensions tab of VS Code and searching for “Kendo UI Template.” Go ahead and download it, and after restarting VS Code you can now use it to scaffold new projects.
Kendo UI Template Wizard: Launch
and press Enter
to launch the extensionYou can start by choosing a project name and a folder where it will be located. When you click Next you are prompted to choose the frontend library you would like to use. Kendo UI has component elements for Vue, Angular and React.
The next stage is to choose the pages you want on your new project. For this project you can choose one chart with routing. Once you make a choice, the template wizard will run the Vue create command in the background and scaffold a Vue application for you.
Now that you are done with scaffolding the application, you have to ensure all dependencies are properly installed by running these commands:
cd newapp
npm install
Navigate to the root directory of the new app and in the main.js file ensure it looks exactly like this:
import Vue from 'vue'
import App from './App.vue'
import router from "./router";
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router
}).$mount('#app')
You can see that routing has been introduced to the project. In the case that you did not use the Kendo UI template wizard or you chose a blank project, you can add routing easily with the command below in the terminal of the project:
vue add router
In the app.vue
file, replace the content with the code block below:
<template>
<div id="root">
<div class="content">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'app',
components: {
}
}
</script>
The router that was imported has now been brought in here. If you open the router folder, you will see the router script (index.js) where the routes have been registered. Make sure that yours looks like this:
import Vue from "vue";
import Router from "vue-router";
import Home from "../components/Home";
import Chart1 from "../components/Chart1";
import Chart2 from "../components/Chart2";
Vue.use(Router);
export default new Router({
mode: "history",
routes: [
{
path: "/",
name: "Home",
component: Home
}
,{
path: "/Chart1",
name: "Chart1",
component: Chart1
},{
path: "/Chart2",
name: "Chart2",
component: Chart2
}
]
});
Now when you look at the app.vue
file, you will see where these defined routes are brought in. To define these individual routes, navigate to the components folder. You will see a lot of components. Delete all the components leaving just the home component.
Your home component home.vue
should look like this code block below:
<template>
<div class="container mt-5">
<div class='row'>
<div class='col-12'>
<h1 class='welcome mb-0'>Global Climate Vue Application</h1>
<h2 class='sub-header mt-0'>Get information about climate conditions of any region in the world with one click</h2>
</div>
</div>
<div class='row'>
<div class='col-12'>
<h1 class='get-started'>Pick a Subject</h1>
</div>
</div>
<div class='row justify-content-center'>
<div class='col-6 text-right'>
<div class='kendoka-div'>
<img class='kendoka' src="https://www.telerik.com../assets/images/kendoka-vue.svg" alt='kendoka' />
</div>
</div>
<div class='col-6 components-list'>
<p>
<img src="https://www.telerik.com../assets/images/components.svg" alt='components' />
<router-link to="/Chart1">World Population</router-link>
</p>
<p>
<img src="https://www.telerik.com../assets/images/styles.svg" alt='styles' />
<router-link to="/Chart1">Afforestation</router-link>
</p>
<p>
<img src="https://www.telerik.com../assets/images/blogs.svg" alt='blogs' />
<router-link to="/Chart1">Elevation</router-link>
</p>
<p>
<img src="https://www.telerik.com../assets/images/tutorials.svg" alt='tutorials' />
<router-link to="/Chart1">Topography</router-link>
</p>
<p>
<img src="https://www.telerik.com../assets/images/styles.svg" alt='styles' />
<router-link to="/Chart1">Vegetation</router-link>
</p>
<p>
<img src="https://www.telerik.com../assets/images/components.svg" alt='components' />
<router-link to="/Chart1">Prevailing Winds</router-link>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
data: function() {
return {
publicPath: process.env.BASE_URL
}
}
}
</script>
You might encounter errors which might be asking for the routes you defined in the route script. To create those, create a chart1.vue
file inside the components folder and inside it copy the code block below:
<template>
<div class='container-fluid'>
<div class='row my-4 mt-5'>
<div class='col-12 col-lg-9 border-right' >
<div v-if="loading" class="k-loading-mask">
<span class="k-loading-text">Loading</span>
<div class="k-loading-image"></div>
<div class="k-loading-color"></div>
</div>
<Chart :title-text="'World Population'"
:title-font="'19pt sans-serif'"
:title-margin-bottom="50"
:legend-position="'bottom'"
:series="series"
:theme="'sass'">
</Chart>
</div>
<div class='col-12 col-lg-3 mt-3 mt-lg-0'>
<h2>View by Continent</h2>
<ul>
<li>
<h3><router-link to="/Chart2">Asia</router-link></h3>
</li>
<li>
<h3><router-link to="/Chart2">Africa</router-link></h3>
</li>
<li>
<h3><router-link to="/Chart2">North America</router-link></h3>
</li>
<li>
<h3><router-link to="/Chart2">South America</router-link></h3>
</li>
<li>
<h3><router-link to="/Chart2">Australia</router-link></h3>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import '@progress/kendo-ui/js/kendo.dataviz.chart'
import { Chart } from '@progress/kendo-charts-vue-wrapper';
export default {
mounted: function(){
setTimeout(() => {
this.loading = false;
}, 300);
},
components: {
Chart
},
data: function() {
return {
loading: true,
series: [{
type: "pie",
labels: {
visible: true,
format: "p0"
},
connectors: {
width: 0
},
data: [
{ category: 'EUROPE', value: 0.09 },
{ category: 'NORTH AMERICA', value: 0.06 },
{ category: 'AUSTRALIA', value: 0.02 },
{ category: 'ASIA', value: 0.60 },
{ category: 'SOUTH AMERICA', value: 0.06 },
{ category: 'AFRICA', value: 0.17 }
]
}]
}
}
}
</script>
Here we use the Kendo UI chart component that comes with a special animation as it opens up to define continents according to their population. Kendo UI integrates beautifully with Vue, and you can add a lot of options in the Vue return function of a particular component.
For the second route, create a Chart2.vue
file inside the components folder and copy the code block below inside it:
<template>
<div style="width: 600px" class="container-fluid col-12 col-lg-9 mt-5">
<h2 style="text-align:center;margin:60px;">Climate Report for Africa</h2>
<div class="climate ">
<h3>Climate control history</h3>
<table class="history">
<tr>
<td class="spark">
<kendo-sparkline :data="pressLogData" :theme="'sass'"></kendo-sparkline>
</td>
<td class="value">980
<span>mb</span>
</td>
</tr>
<tr>
<td class="spark">
<kendo-sparkline :type="'column'"
:data="tempLogData"
:tooltip-format="'{0} %'"
:theme="'sass'">
</kendo-sparkline>
</td>
<td class="value">21
<span>°C</span>
</td>
</tr>
<tr>
<td class="spark">
<kendo-sparkline :type="'area'"
:data="humLogData"
:tooltip-format="'{0} %'"
:theme="'sass'">
</kendo-sparkline>
</td>
<td class="value">32
<span>%</span>
</td>
</tr>
</table>
</div>
<div class="temperature">
<h3>Temperature control</h3>
<div class="stats">
<kendo-sparkline id="temp-range"
:type="'bullet'"
:data="tempRangeData"
:tooltip-visible="false"
:value-axis="tempRangeValueAxisOpt"
:theme="'sass'">
</kendo-sparkline>
</div>
</div>
<div class="conditioner">
<h3>Conditioner working time</h3>
<ul class="pie-list stats">
<li>
MON
<kendo-sparkline id="stats-mon"
:type="'pie'"
:data="[14,10]"
:theme="'sass'">
</kendo-sparkline>
</li>
<li>
TUE
<kendo-sparkline id="stats-tue"
:type="'pie'"
:data="[8,6]"
:theme="'sass'">
</kendo-sparkline>
</li>
<li>
WED
<kendo-sparkline id="stats-wed"
:type="'pie'"
:data="[8,16]"
:theme="'sass'">
</kendo-sparkline>
</li>
<li>
THU
<kendo-sparkline id="stats-thu"
:type="'pie'"
:data="[12,12]"
:theme="'sass'">
</kendo-sparkline>
</li>
<li>
FRI
<kendo-sparkline id="stats-fri"
:type="'pie'"
:data="[6,18]"
:theme="'sass'">
</kendo-sparkline>
</li>
<li>
SAT
<kendo-sparkline id="stats-sat"
:type="'pie'"
:data="[1,23]"
:theme="'sass'">
</kendo-sparkline>
</li>
<li>
SUN
<kendo-sparkline id="stats-sun"
:type="'pie'"
:data="[5,19]"
:theme="'sass'">
</kendo-sparkline>
</li>
</ul>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import '@progress/kendo-ui';
import { KendoSparkline } from '@progress/kendo-charts-vue-wrapper';
Vue.component('kendo-sparkline', KendoSparkline);
export default {
components: {
KendoSparkline
},
data: function() {
return {
pressLogData: [
936, 968, 1025, 999, 998, 1014, 1017, 1010, 1010, 1007,
1004, 988, 990, 988, 987, 995, 946, 954, 991, 984,
974, 956, 986, 936, 955, 1021, 1013, 1005, 958, 953,
952, 940, 937, 980, 966, 965, 928, 916, 910, 980
],
tempLogData: [
16, 17, 18, 19, 20, 21, 21, 22, 23, 22,
20, 18, 17, 17, 16, 16, 17, 18, 19, 20,
21, 22, 23, 25, 24, 24, 22, 22, 23, 22,
22, 21, 16, 15, 15, 16, 19, 20, 20, 21
],
humLogData: [
71, 70, 69, 68, 65, 60, 55, 55, 50, 52,
73, 72, 72, 71, 68, 63, 57, 58, 53, 55,
63, 59, 61, 64, 58, 53, 48, 48, 45, 45,
63, 64, 63, 67, 58, 56, 53, 59, 51, 54
],
tempRangeData: [21, 23],
tempRangeValueAxisOpt: {
min: 0,
max: 30,
plotBands: [{
from: 0, to: 15, color: '#787878', opacity: 0.15
}, {
from: 15, to: 22, color: '#787878', opacity: 0.3
}, {
from: 22, to: 30, color: '#787878', opacity: 0.15
}]
}
}
}
}
</script>
<style>
.temperature, .conditioner {
margin: 0;
padding: 30px 0 0 0;
}
.history {
border-collapse: collapse;
width: 100%;
}
.history td {
padding: 0;
vertical-align: bottom;
}
.history td.spark {
line-height: 30px;
}
.history td.value {
font-size: 1.6em;
font-weight: normal;
line-height: 50px;
}
.history td.value span {
font-size: .5em;
vertical-align: top;
line-height: 40px;
}
.stats {
text-align: center;
}
.pie-list {
margin: 0;
padding: 0;
list-style-type: none;
}
.pie-list li {
display: inline-block;
text-align: center;
width: 34px;
font-size: 12px;
}
#stats-mon,
#stats-tue,
#stats-wed,
#stats-thu,
#stats-fri,
#stats-sat,
#stats-sun {
display: block;
width: 40px;
line-height: 35px;
}
#temp-range {
width: 100%;
line-height: 40px;
}
</style>
This second route makes use of the Kendo UI Sparkline component to portray climate conditions. Tying everything together, you can now run the app in the dev server with the command:
npm run serve
And you will have a fully functioning UI component with routing and all the pre-defined charts.
This post is an introduction to Kendo UI for Vue.js and how you can easily start a Vue project using the Kendo UI template wizard. It also shows how easy it is to implement Vue routing and to bring in Kendo UI components into your Vue projects. Happy hacking!
]]>