KendoReact R1 2021

Adds new React components including TileLayout, DropDownTree, MultiColumnComboBox, ListBox and more.
January 25, 2021 - 9:37
New Version


  • New React Components
    • TileLayout - 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.
    • DropDownTree - 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.
    • 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.
    • FloatingActionButton - 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. 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.
    • BottomNavigation - 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. This component is completely responsive and will respond to any changes in the size of the viewport.
    • ListBox - 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.
    • Icon & SvgIcon - The React Icon and React SVGIcon 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.
  • Expanded Component Features
    • Grid
      • Built-in Keyboard Navigation - KendoReact Grid has supported keyboard navigation for a long time enabling developers determine exactly how to handle the navigation.While this gave tons of flexibility, it also came with additional complexity since 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 Telerik have added some built-in and opinionated ways for handling keyboard navigation within the KendoReact Data Grid. This allows developers that just want keyboard navigation taken care of out of the box to use a simple set of configuration options instead of spending time figuring out how to write code for every type of interaction.
      • Improved Performance in State Management for Data Cells - Included improvements for how state management is done on the cell level; 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.
    • TreeList
      • Built-in Keyboard Navigation - 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.
    • Gantt
      • Built-in Keyboard Navigation - Continuing the story of Keyboard Navigation 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.
      • Editing - Now includes 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.
    • Editor
      • Improved Keyboard Navigation - 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.
    • Avatar
      • New Options and Updated Design. 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. This update provides React developers with even more flexibility when it comes to customizing the appearance of the React Avatar component.
    • Scheduler
      • Custom Form and Form Editor - Now includes a 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.
      • Current Time Marker - Another update to the KendoReact Scheduler component 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.
KendoReact TileLayout component.


Native UI and DataViz components for React Developers.

Got a Question?

Live Chat with our Telerik licensing specialists now.