Kendo UI for Vue
The Vue FlatColorPicker component helps your users choose colors from a gradient or palette view. It’s a complete color editor that gives users interactive controls for simply selecting a color or altering its opacity, hue, RBG, and Hex values. This component is an alternative to the Vue ColorPicker. The ColorPicker component displays the color editor in a popup while the FlatColorPicker renders the editor right on the page.
See the Vue FlatColorPicker demo
With R3 2022, we are excited to announce that the new Fluent theme is officially available for all Telerik and Kendo UI libraries and their web UI components! Just like our other themes, the new Fluent theme follows the guidelines of the official Fluent Design System so that all components are immediately styled with the Fluent Design System just by including the new theme.
To see the theme in action, visit the Data Grid demo and choose the Fluent theme.
The Kendo UI for Vue Input components now feature the ability to add custom elements before the input element (a prefix) or after the input element (suffix). This new feature, also called “adornments,” lets you customize all Kendo UI for Vue input elements without needing to deeply modify the components through source code, making these input components extremely flexible.
We have revamped the remainder of the API docs to make them more detailed and user-friendly.
See the Vue Data Grid API documentation
The Vue ColorPalette renders a set of predefined colors from which users can select. You can choose from the built-in color presets or define your own. A simple use case for the Vue ColorPalette component is enabling users to preview the available colors for a product they are buying online. A more complex example is using the ColorPalette within a full-featured color picker tool such as the Vue ColorPicker component.
The Vue Data Grid supports many filtering scenarios, from the most basic to the most complex. To ensure you can successfully satisfy requirements, we have added various examples to the documentation. These include using the column menu to filter data and using an external interface for filtering.
See the Vue Data Grid Filtering demos
The Kendo UI for Vue Data Grid includes a built-in indicator that displays when data operations are in progress. Any time data is loading, the user will see a spinning icon. Custom indicators are supported in cases where you need to implement your own.
The ThemeBuilder has long been a popular tool for developers using Kendo UI to customize the style of their components without having to write CSS. It has now been rebuilt for better performance and time-saving features such as the ability to save work and reuse it for multiple projects. For those of you who want to take customization to the next level, we are also introducing ThemeBuilder Pro!
Learn more about the new ThemeBuilder
The Vue Data Grid supports scenarios where developers need to update columns when the underlying data model changes. This can include both showing and hiding columns as well as applying filters.
The Vue ColorGradient helps users select colors by rendering a gradient map users can click on to select a shade of a particular color. The component also included a hue slider for selecting the base color, opacity slider and inputs for RBG or HEX values.
See the Vue ColorGradient demo
The Vue Data Grid allows you to specify rows to be pinned to the top or the bottom of the viewport. When that is done, they will “stick” to the top or the bottom and remain visible when the user scrolls the view above or below them. The demo shows how this works and how to enable the feature.
See the Vue Data Grid Sticky Rows demo
When the pager is implemented, users can choose how many records they’d like to see per page. With this release, users can now opt to see all results rather than being limited to sets such as 10, 20 and 50.
See the Vue Data Grid Pager demo
The Kendo UI for Vue Badge component renders a visual indicator common to many apps. It attaches to any element or Vue component and shows the user critical information such as online status or unread messages. A common scenario is the online status displaying your avatar in popular messaging apps.
We have rewritten our popular dashboard sample to include 100% native components. Previous versions included a mix of jQuery and native Vue components. Now that we have a well-rounded set of native Vue components, we have been able to make this improvement.
See the Kendo UI for Vue Dashboard Sample Application
When implementing data grids, performance is a top concern. We address it in various ways with native architecture and features such as virtualization and paging. To help you assess performance and see how these features work, we have added a demo that you can use to set item count and toggle various features.
See the Vue Data Grid Performance demo
The Vue ColorPicker component helps your users choose colors from a gradient or palette view. It’s a complete color editor that gives users interactive controls for simply selecting a color or altering its opacity, hue, RBG, and Hex values. This component is an alternative to the Vue FlatColorPicker. The ColorPicker component displays the color editor in a popup while the FlatColorPicker renders the editor right on the page.
Via a brand-new extension, Kendo UI Productivity tools for Visual Studio Code, you will now see suggestions for creating Vue components. This means you will be able to add components from the Kendo UI for Vue suite with only a few keystrokes.
The Vue TreeList component is perfect for data that is homogenous and hierarchical, which means all data items have the same fields and each level aligns its columns with the parent and child elements. You will find the same features you know and enjoy in the Vue Data Grid including sorting, filtering, paging, editing, row and column virtualization and much more.
Due to popular demand, we have updated the API for select components to include the valuePrimitive property. This will allow you to specify the value-binding behavior. When true, the field will be updated with the selected item text field. When false, the field will be updated with the selected item.
Many developers need to bind the Vue Data Grid to streaming data in order to show updates in real time. While this has many use cases, the most common is stock pricing. This new demo shows how the Data Grid can instantly reflect changes in the data.
See the Vue Data Grid Live Update demo