Kendo UI R2 2023

Adds new PDFViewer to view PDF files directly within your Angular applications.
June 8, 2023
New Version

Features

Kendo UI for Angular

New Component: Angular PDFViewer

  • View PDF files directly within your Angular application, eliminating the need for third-party software or add-ons.  
  • With intuitive paging mechanisms, powerful search capabilities, and flexible zoom options, users can easily navigate and explore PDF content.

Angular 16 Support

  • Angular 16 introduces a wide range of improvements, such as enhanced performance, new capabilities, and an improved developer experience.

Grid

  • Column Menu: Tabbed Interface
    • When the view property is set to "tabbed", the column menu will present a visually appealing and user-friendly design consisting of three tabs, each offering a specific functionality:
      • Filter: provides an advanced filtering menu, enabling users to apply custom filters and refine data precisely.
      • Columns Visibility: offers a convenient column chooser, helping users to control the visibility of each column and customize the grid layout.
      • Under this tab, you can configure additional data grid operations, such as sorting in ascending or descending order, auto-sizing columns individually or all at once, rearranging column order and more.
  • Row Reordering - Now supports row reordering via drag and drop.
  • Printing - Now supports a configurable print layout, enabling users to print all grid columns and rows along with the corresponding content. Both scrollable and pageable data grids can be printed.
  • Selection Aggregates - Select a single or multiple cells or rows and calculate various metrics based on the selected data.
  • Selection Functionality
    • Perform range selection when not all items that should be selected are currently rendered and/or available on the client.
    • Customize the shift-click range selection behavior.
    • Enable adding items to the current selection through the keyboard.

DropDowns and Date Input Components

  • Adaptive Mode - The DropDown components (incl. AutoComplete, ComboBox, MultiSelect, DropDownList, DropDownTree, MultiSelectTree, and MultiColumnComboBox) and DateInputs (incl. DatePicker, DateTimePicker, TimePicker and DateRange) now support an adaptive mode, enabling a mobile-friendly rendering of the components’ popup.

Charts

  • Drilldown - Enable users to deep dive into specific data. Users can click on a specific chart element, such as bar or pie segment and navigate to a different view containing more detailed data about the selected item.
  • Navigator Top Position - The StockChart component has been enhanced with a new property enabling you to position its navigator on top (in addition to the existing bottom position).  

Gantt

  • Redesigned Popup Edit Form - You now have more options when editing tasks, dependencies and resources.  

ListBox

  • Globalization - This feature enables developers to provide their own custom cultures for any of the built-in strings contained within ListBox.

Dialog

  • Updated Actions Layout - Now you can easily customize button layout.

TreeList

  • Row Reordering - Now enables row reordering via drag and drop.

ActionSheet

  • Updated Template Support, Animations, More Events and More Features
    • Ability to apply a template to the entire component.
    • Updated HeaderTemplate rendering scope.
    • ExpandedChange, expand and collapse events.
    • CssClass and expanded input properties.

Drag and Drop

  • DragTargetContainer and DropTargetContainer - Allow you to configure multiple elements in a container as drag or drop items.

Design System Documentation

  • R2 2023 includes a dedicated design system documentation site which offers a wide range of resources, design assets and frontend documentation specifically tailored for the Telerik and Kendo UI libraries.

Migration from Font Icons to SVG Icons

  • With the R2 2023 release, the default icon type is changed from 'Font' to 'SVG'.

Accessibility Improvements

  • The R2 2023 release makes several enhancements in WAI-ARIA attributes, keyboard navigation, online demos and documentation, and introduces VPAT templates.

Kendo UI for Vue

New Components

  • Vue GridLayout and StackLayout - Simplify the process of organizing and aligning elements within web applications.
  • MultiSelectTree - Enable users to select one or more items from a hierarchical list of data.
  • DropDownTree - The new DropDownTree component enables you to easily visualize hierarchical data in a tree-like structure.

DropDowns

  • Grouping - DropDown components (incl. AutoComplete, ComboBox, MultiSelect and DropDownList) now provide the possibility to group similar data items in logical categories to help users easily navigate through the drop-down list.

DateRangePicker

  • Events - Now supports a variety of events, allowing you to modify the component behavior based on your needs.

DateTimePicker

  • New Events - With the new Open/Closed events in the DatePicker, DateTimePicker, TimePicker and DateRangePicker components, you now have even greater control over user interactions.

AutoComplete

  • Popup Selection Event - With this event you have the ability to respond to the user's selection.

Visual Studio Code Scaffolders

  • You can now effortlessly create new pages in your applications with the most used data-bound components, including the Data Grid, Scheduler, Chart and Form components.

Migration from Font Icons to SVG Icons

  • With the R2 2023 release, the default icon type is changed from 'Font' to 'SVG'.

Design System Documentation

  • R2 2023 includes a dedicated design system documentation site which offers a wide range of resources, design assets and frontend documentation specifically tailored for the Telerik and Kendo UI libraries.  

Kendo UI for jQuery

Grid

  • Compact Grid Mode and Row Resizing - Reduce grid size to achieve better visibility on smaller devices or to render as much data as possible. Additionally, the DataGrid has been enhanced with the ability to adjust the row height of the component.

DropDowns and Input Components

  • Adaptive Mode - DatePickers (incl. DatePicker, DateTimePicker, DateRangePicker, TimePicker and TimeDurationPicker) and Select components (MultiColumnComboBox, AutoComplete, DropDownList, DropDownTree, and MultiSelect) now support an adaptive mode that provides a mobile-friendly rendering of their popup.

Charts

  • Navigator Top Position - The StockChart component has been enhanced with a new property enabling you to position its navigator on top (in addition to the existing bottom position).  

Scheduler

  • Custom Toolbar - Whether you want to add new buttons, rearrange existing ones, or customize their appearance, the toolbar configuration option empowers you to easily achieve the desired layout.

ActionSheet

  • Footer Template - Enables you to customize the footer by adding interactive elements, additional information or action buttons.
  • Body Template - Easily create visually appealing and informative content within the body of the Actionsheet.
  • Adaptive Behavior - Benefit from the adaptive design features to ensure your action sheets adjust seamlessly to different screen sizes and orientations.  
  • Fullscreen Mode - Maximize the impact of your action sheet by occupying the entire screen.  
  • Subtitle Support - Include subtitles for each action to provide additional information or instructions, making it easier for users to understand the purpose of each action.
  • Action Buttons - Easily include interactive elements that trigger specific actions or operations and customize the appearance and behavior of these buttons.
  • Close Button - Users can now easily dismiss the action sheet and focus on other elements of your application.

Gantt

  • Redesigned Popup Edit Form - You now have more options when editing tasks, dependencies and resources.

Styling and Customization Support within ThemeBuilder Pro

  • With custom variables for colors, typography, metrics and more.
  • From button icons to grid header padding, you can customize every detail of the components.
  • You can also benefit from custom fonts and icons, ensuring consistent and memorable brand identity. 

Editor

  • Table Wizard Enhancements
    • The General tab includes table, columns, rows and new granular cell properties, as well as a new table alignment configuration option that provides the possibility for tables to be positioned left, right or center.
    • The Advanced tab exposes configurations for ID and CSS, as well as accessibility settings for the table caption, header rows and columns.
    • The cell configuration dialog provides the possibility to configure cell width, height, margins, padding, borders and more.
    • Users also have the option to apply the selected settings either to a specific cell or to all table cells.

Scheduler

  • Highlighted Ongoing Events - Now enables you to highlight the events that are currently taking place.

DateInput

  • Date Editing - The enhanced DateInput enables you to configure both auto-switch behavior as well as the steps for incrementing and decrementing the various segments.  

DateTimePicker

  • Start and End Values - With the latest release, you can also benefit from the startTime and endTime configuration options in the jQuery DateTimePicker, enabling you to set ranges of allowed values.

Migration from Font Icons to SVG Icons

  • With the R2 2023 release, the default icon type is changed from 'Font' to 'SVG'.

Design System Documentation

  • R2 2023 includes a dedicated design system documentation site which offers a wide range of resources, design assets and frontend documentation specifically tailored for the Telerik and Kendo UI libraries.

KendoReact

New Components

  • SpreadSheet - Bring advanced Excel-like experience to your applications.
  • ContextMenu - Provides a user-friendly menu that displays a contextual popup with data in a traditional menu-like structure.
  • TimeLine - Easily present a collection of events in chronological order.

Grid

  • Integrated ContextMenu - Enables you to set up a context menu within any Grid command.
  • Integrated PageSize 'All' Option - The pager dropdown list 'All 'option is now available.

Chart

  • Navigator Top Position - The StockChart component has been enhanced with a new property enabling you to position its navigator on top (in addition to the existing bottom position).

Date Input

  • Adaptive Mode - The Date Input components (incl. DateTimePicker, DateRangePicker, DatePicker, and TimePicker) now support an adaptive mode which provides a mobile-friendly rendering of the calendar popup.

DropDown

  • Adaptive Mode - The DropDown components (incl. ComboBox, DropDownList, DropDownTree, MultiSelect, MultiSelectTree, and MultiColumnComboBox) now support an adaptive mode, enabling a mobile-friendly rendering of the components’ popup.
  • Grouping - The React DropDown components (incl. AutoComplete, ComboBox, MultiColumnComboBox, MultiSelect, and DropDownList) now provide the possibility to group similar data items in logical categories.

TabStrip

  • Right-to-Left Support - Enables you to easily change the direction of the content from left-to-right to right-to-left and vice versa.

Pager

  • All Pages Configuration - The component can now be configured to show all items in a single page.

ActionSheet

  • Animations - Now supports animations, making the process of opening and closing the ActionSheet’s menu smooth and engaging.  
  • Keyboard Navigation - Enable end users to use the keyboard to navigate the component and invoke actions such as buttons click, grid paging and more.  

FlatColorPicker and ColorGradient

  • DefaultValue - Enabling you to set a default color value, ensuring a consistent starting point for color selection.
  • Format - Now you can specify the default input format for the gradient input editor.
  • Opacity - Get more flexibility with the option to display the opacity slider.
  • New method called onChange. This method triggers an event handler whenever the user edits the color value.
  • The ColorGradient now incorporates the 'format' prop, enabling you to specify the default input format in the gradient input editor. 

Visual Studio Code Scaffolders

  • You can now effortlessly create new pages in your applications with the most used data-bound components, including the Data Grid, Scheduler, Chart and Form components.

Migration from Font Icons to SVG Icons

  • With the R2 2023 release, the default icon type is changed from 'Font' to 'SVG'.

Design System Documentation

  • R2 2023 includes a dedicated design system documentation site which offers a wide range of resources, design assets and frontend documentation specifically tailored for the Telerik and Kendo UI libraries.
Angular PDFViewer

Kendo UI

JavaScript, HTML5 UI widgets for responsive web and data visualization.

Got a Question?

Live Chat with our Telerik licensing specialists now.