Kendo UI for Angular
Create project plans and other schedules in no time with the Angular Gantt Chart component. This interactive, data bound, and customizable component provides a task tree list and a timeline pane. In the task list, users can edit, sort, and reorder records. In the timeline, users can resize, move, edit, and remove tasks. The timeline can also be displayed in day, week, and month views.
Show the relative magnitude of values as colored rectangles in a two-dimensional matrix with the new Angular Heatmap. This chart component is ready to use out of the box but contains options to customize colors, gradients, labels, axes and much more. Much like other Angular Chart components, data can be remote or local and templates can be used to customize just about anything.
With the new Angular Typography component, ensuring text styling is consistent with your design system app-wide is easy. Set and update your text styles in one place and rules will be enforced throughout your entire project.
Place your pager controls where your users will most likely discover them by positioning them at the top, bottom, or top and bottom of the grid. It’s just a matter of setting a property.
Reduce potential user confusion or frustration when large data needs to load with virtual scrolling. With this feature enabled, the Angular Data Grid will show placeholders that indicate an operation in process for a more intuitive user experience.
Learn how to Implement a feature that allows your users to drag a record from one grid and drop it into another. We have added a knowledge base article and sample that shows you how to accomplish this using the HTML Drag and Drop API.
To ensure maximum accessibility and great UX, keyboard interactions to navigate and interact with the data grid pager is now possible.
With each release, we review accessibility features and compliance to ensure we are delivering the highest level of accessibility you can find so you don’t have to worry about it. With this release, we have added and enhances accessibility compliance in the Data Grid.
Give your users more control over their experience by allowing them to close tabs. With this option enabled, a close button will appear on each tab.
When the space your tabs occupy is greater than the width of the container, your layout can become unpleasant. To avoid this, the Angular TabStrip will automatically add scroll controls. Your layout will be intact, and your users will be pleased.
Make your ScrollView pager stand out against the content by choosing a dark or light appearance. This helps you pay attention to the detail of great UI, closely match today’s design trends and ensure points of interaction are visible by all users.
Focus and Blur Events have been added to the RichTextEditor API to give you more control over what happens when the content area is focused or blurred.
In many scenarios, users add spacing around content and that spacing gets removed when switching back and forth between code and design views. A common example is adding tabs to format code. The Angular Rich Text Editor offers the preserveWhiteSpace option to prevent that spacing from being removed.
Help your users find the data they need by showing it to them when they execute a filter. When a user types a filter, the tree nodes that contain matching values will automatically expand.
Help your users narrow their tree list to the information they want to see with a built-in filter. With this feature enabled, a text filter field will appear at the top of the component’s drop-down list. As the user types, the list will be filtered.
To ensure maximum accessibility and great UX, keyboard interactions to navigate and interact with the ColorPicker and ColorGradient is now possible.
See the ColorPicker and ColorGradient Keyboard Navigation demos
The Kendo UI Kits for Figma are design files that make the collaboration between application developers and designers easier. Each UI kit is a precise visual representation of the Kendo UI for Angular components. We offer three Kendo UI Kits for Figma, one for each of the themes that come with the Kendo UI for Angular component library: Kendo UI Kit Default, Bootstrap and Material. The purpose of the Kendo UI Kits is to enable the seamless handover of the interface design to the developers.
Every demo now includes a drop-down menu that allows you to choose to apply the Material, Bootstrap or Kendo Default themes and one of their built-in color swatches. This enables you to easily preview what these selections will look like for each component.
See the Angular Scheduler demo for an example
As part of our commitment to supporting industry standards as they are updated, Kendo UI for Angular supports Bootstrap 5, the latest version of Bootstrap.