Telerik UI for ASP.NET Core Components

Telerik UI for ASP.NET is library of 110+ full-featured ASP.NET UI components that enable you to build everything from complex data-driven applications to user facing web apps, with tons of customization options covering every UI development need: navigation and layout, data management and visualization, editing, interactivity and more.

This repository contains examples related to the Telerik UI for ASP.NET Core components that can be used in addition to the technical documentation and demos. These examples demonstrate common scenarios and provide answers to frequent how-to-questions regarding the most popular and widely used Telerik UI for ASP.NET Core components:

• ASP.NET Core Data Grid
• ASP.NET Core Chart
• ASP.NET Core Editor
• ASP.NET Core Scheduler
• ASP.NET Core PDF Viewer
• ASP.NET Core TreeView

The sample UI for ASP.NET Core projects are provided to demonstrate different frequently asked questions, features and scenarios. They are not part of our testing procedures and should be regarded as a knowledge base. Projects are tested only upon creation as well as when updating or upgrading the project. A prerequisite to run the sample applications is to have installed ASP.NET Core 3.0.

This repo allows you to experiment with RazorPages and MVC (Model View Controller) samples. To run the projects from this repository, please follow these steps:

1. Clone the repo

Telerik.Examples.Mvc

1. Open the Telerik.Examples.Mvc.sln file in VS 2019 or VS 2022.
2. Clean the solution
3. Build the solution and run the MVC project.
4. Navigate to a certain example by adding the ControllerName/ActionMethod to the URL, i.e https://localhost:44361/ajaxbinding/ajaxbinding

The project uses a local database which is created upon building the project based on the existent migrations.

Telerik.Examples.RazorPages

1. Open the Telerik.Examples.RazorPages.sln file in VS 2019 or VS 2022.
2. Clean the solution
3. Build the solution and run the Razor project.
4. Navigate to a certain ASPNET Core example by adding the PageFolder/ViewName to the URL, i.e https://localhost:44361/grid/gridcustomdatasource

Telerik.Examples.ContentSecurityPolicy

1. Open the Telerik.Examples.ContentSecurityPolicy.sln file in VS 2019 or VS 2022.
2. Clean the solution
3. Build the solution and run the ContentSecurityPolicy project.

The project applies a strict Content-Security-Policy for evaluating and sourcing JavaScript on the client-side.

NOTE: This repository does not contain the actual source code of the components, or the demos application available at the official UI for ASP.NET Core demos. The demos application is available as an offline project from your Telerik UI for ASP.NET Core installation.

---

Table of Contents

• Common Support Questions
  • Where can I find help?
  • When do you plan to release feature X?
  • Where do I make suggestions?
• ASP.NET Core UI Components
• Design to development
• Sample Applications
• Package References
• Contribution
• Licensing
• Useful Links

---

Common Support Questions

Where can I find help?

1. For community support, we recommend asking questions on the Telerik UI for ASP.NET Core forum.
2. If you have an active trial or license, you can use the official support channel for questions, technical assistance, bug reports or problem resolutions.

When do you plan to release feature X

Check the Telerik UI for ASP.NET Core Roadmap to see a list of components, features and tooling we have planned. You can also stay up-to-date with recently released features and bits by checking our What's New

Where do I make suggestions?

If your feature isn’t listed in the product roadmap, check our dedicated feedback portal. You can upvote existing requested items or If you don’t see your feature on our portal, you can request the feature there.

ASP.NET Core UI Components

ASP.NET Core Data Management

ASP.NET Core DataGrid Component	Grid Features	Grid Documentation	Grid Demos
ASP.NET Core ListView Component	List View Features	ListView Documentation	ListView Demos
ASP.NET Core TreeList Component	Tree List Features	TreeList Documentation	TreeList Demos
ASP.NET Core Filter Component	Filter Features	Filter Documentation	Filter Demos
ASP.NET Core PivotGrid Component	PivotGrid Features	PivotGrid Documentation	PivotGrid Demos
ASP.NET Core PivotGrid v.2 Component	PivotGrid v.2 Features	PivotGrid v.2 Documentation	PivotGrid v.2 Demos
ASP.NET Core Pager Component	Pager Features	Pager Documentation	Pager Demos
ASP.NET Core Spreadsheet Component	Spreadsheet Features	Spreadsheet Documentation	Spreadsheet Demos
ASP.NET Core TaskBoard Component	TaskBoard Features	TaskBoard Documentation	TaskBoard Demos

ASP.NET Core File Management

ASP>NET Core File Manager	File Manager Features	File Manager Documentation	File Manager Demos
ASP.NET Core Upload Component	File Upload Features	File Upload Documentation	File Upload Demos
ASP.NET Core PDF Viewer	File Select Features	FileSelect Documentation	FileSelect Demos

ASP.NET Core Geo Visualization

ASP.NET Core Map Component

Map Features

Map Documentation

Map Demos

ASP.NET Core Scheduling Components

ASP.NET Core Calendar Component	Calendar Features	Calendar Documentation	Calendar Demos
ASP.NET Core GanttChart Component	Gantt Features	Gantt Documentation	Gantt Demos
ASP.NET Core MultiViewCalendar Component	MultiViewCalendar Features	MultiViewCalendar Documentation	MultiViewCalendar Demos
ASP.NET Core Scheduler Component	Scheduler Features	Scheduler Documentation	Scheduler Demos

ASP.NET Core Editor Components

ASP.NET Core AutoComplete Component	AutoComplete Features	AutoComplete Documentation	AutoComplete Demos
ASP.NET Core CheckboxGroup Component	CheckboxGroup Features	CheckboxGroup Documentation	CheckboxGroup Demos
ASP.NET Core ColorGradient Component	ColorGradient Features	ColorGradient Documentation	ColorGradient Demos
ASP.NET Core ColorPalette Component	ColorPalette Features	ColorPalette Documentation	ColorPalette Demos
ASP.NET Core ColorPicker Component	ColorPicker Features	ColorPicker Documentation	ColorPicker Demos
ASP.NET Core FlatColorPicker Component	FlatColorPicker Features	FlatColorPicker Documentation	FlatColorPicker Demos
ASP.NET Core ComboBox Component	ComboBox Features	ComboBox Documentation	ComboBox Demos
ASP.NET Core MultiColumnComboBox Component	MultiColumnComboBox Features	MultiColumnComboBox Documentation	MultiColumnComboBox Demos
ASP.NET Core DateInput Component	DateInput Features	DateInput Documentation	DateInput Demos
ASP.NET Core DatePicker Component	DatePicker Features	DatePicker Documentation	DatePicker Demos
ASP.NET Core DateRangePicker Component	DateRangePicker Features	DateRangePicker Documentation	DateRangePicker Demos
ASP.NET Core DateTimePicker Component	DateTimePicker Features	DateTimePicker Documentation	DateTimePicker Demos
ASP.NET Core TimePicker Component	TimePicker Features	TimePicker Documentation	TimePicker Demos
ASP.NET Core TimeDurationPicker Component	TimeDurationPicker Features	TimeDurationPicker Documentation	TimeDurationPicker Demos
ASP.NET Core DropDownList Component	DropDownList Features	DropDownList Documentation	DropDownList Demos
ASP.NET Core DropDownTree Component	DropDown Tree Features	DropDown Tree Documentation	DropDown Tree Demos
ASP.NET Core MaskedTextBox Component	MaskedTextBox Features	MaskedTextBox Documentation	MaskedTextBox Demos
ASP.NET Core MultiSelect Component	Multi Select Features	MultiSelect Documentation	MultiSelect Demos
ASP.NET Core NumericTextBox Component	Numeric TextBox Features	NumericTextBox Documentation	NumericTextBox Demos
ASP.NET Core RadioGroup Component	Radio Group Features	RadioGroup Documentation	RadioGroup Demos
ASP.NET Core Rating Component	Rating Group Features	Rating Documentation	Rating Demos
ASP.NET Core Editor Component	Editor Features	Editor Documentation	Editor Demos
ASP.NET Core TextArea Component	Text Area Features	TextArea Documentation	TextArea Demos
ASP.NET Core TextBox Component	TextBox Features	TextBox Documentation	TextBox Demos
ASP.NET Core Signature Component	Signature Features	Signature Documentation	Signature Demos
ASP.NET Core Slider Component	Slider Features	Slider Documentation	Slider Demos
ASP.NET Core Image Editor Component	Image Editor Features	Image Editor Documentation	Image Editor Demos
ASP.NET Core Switch Component	Switch Features	Switch Documentation	Switch Demos
ASP.NET Core ListBox Component	ListBox Features	ListBox Documentation	ListBox Demos
ASP.NET Core Captcha Component	Captcha Features	Captcha Documentation	Captcha Demos

ASP.NET Core Data Visualization Components

ASP.NET Core Chart Component	Chart Features	Chart Documentation	Chart Demos
ASP.NET Core Area Chart Component	Area Chart Features	AreaChart Documentation	AreaChart Demos
ASP.NET Core Bar Chart Component	Bar Chart Features	Bar Chart Documentation	Bar Chart Demos
ASP.NET Core Diagram Component	Diagram Features	Diagram Documentation	Diagram Demos
ASP.NET Core Bubble Chart Component	Bubble Chart Features	BubbleChart Documentation	BubbleChart Demos
ASP.NET Core Line Chart Component	Line Chart Features	LineChart Documentation	LineChart Demos
ASP.NET Core Donut Chart Component	Donut Chart Features	DonutChart Documentation	DonutChart Demos
ASP.NET Core Pie Chart Component	Pie Chart Features	PieChart Documentation	PieChart Demos
ASP.NET Core Stock Chart Component	Stock Chart Features	StockChart Documentation	StockChart Demos
ASP.NET Core Heatmap Chart Component	Heatmap Chart Features	HeatmapChart Documentation	HeatmapChart Demos
ASP.NET Core Radar Chart Components	RadarArea Chart Features	RadarAreaChart Documentation	RadarAreaChart Demos
ASP.NET Core OrgChart Component	OrgChart Features	OrgChart Documentation	OrgChart Demos
ASP.NET Core TreeMap Component	TreeMap Features	TreeMap Documentation	TreeMap Demos

ASP.NET Core Barcode Components

ASP.NET Core QR Code Component	QR Code Features	QR Code Documentation	QR Code Demos
ASP.NET Core BarCode Component	QR Code Features	BarCode Documentation	BarCode Demos

ASP.NET Core Gauges Components

ASP.NET Core ArcGauge Component	ArcGauge Features	ArcGauge Documentation	ArcGauge Demos
ASP.NET Core CircularGauge Component	CircularGauge Features	CircularGauge Documentation	CircularGauge Demos
ASP.NET Core LinearGauge Component	LinearGauge Features	LinearGauge Documentation	LinearGauge Demos
ASP.NET Core RadialGauge Component	RadialGauge Features	RadialGauge Documentation	RadialGauge Demos

Interactivity & UX

ASP.NET Core ProgressBar Component	ProgressBar Features	ProgressBar Documentation	ProgressBar Demos
ASP.NET Core Circular ProgressBar Component	Circular ProgressBar Features	Circular ProgressBar Documentation	Circular ProgressBar Demos
ASP.NET Core Loader Component	Loader Features	Loader Documentation	Loader Demos
ASP.NET Core Tooltip Component	Tooltip Features	Tooltip Documentation	Tooltip Demos
ASP.NET Core Notification Component	Notification Features	Notification Documentation	Notification Demos
ASP.NET Core Skeleton Container Component	Skeleton Container Features	Skeleton Container Documentation	Skeleton Container Demos
ASP.NET Core Sortable Component	Sortable Features	Sortable Documentation	Sortable Demos
ASP.NET Core Conversational UI (Chat) Component	Conversational UI Features	Conversational UI Documentation	Conversational UI Demos
ASP.NET Core Ripple Container Component	Ripple Container Features	X	Ripple Container Demos

ASP.NET Core Layout Components

ASP.NET Core Avatar Component	Avatar Features	Avatar Documentation	Avatar Demos
ASP.NET Core Card Component	Card Features	Card Documentation	Card Demos
ASP.NET Core Dialog Component	Dialog Features	Dialog Documentation	Dialog Demos
ASP.NET Core Form Component	Form Features	Form Documentation	Form Demos
ASP.NET Core GridLayout Component	GridLayout Features	GridLayout Documentation	GridLayout Demos
ASP.NET Core Expansion Panel Component	ExpansionPanel Features	ExpansionPanel Documentation	ExpansionPanel Demos
ASP.NET Core StackLayout Component	StackLayout Features	StackLayout Documentation	StackLayout Demos
ASP.NET Core Badge Component	Badge Features	Badge Documentation	Badge Demos
ASP.NET Core Splitter Component	Splitter Features	Splitter Documentation	Splitter Demos
ASP.NET Core TileLayout Component	TileLayout Features	TileLayout Documentation	TileLayout Demos
ASP.NET Core Popover Component	Popover Features	Popover Documentation	Popover Demos
ASP.NET Core Responsive Panel Component	Responsive Panel Features	Responsive Panel Documentation	Responsive Panel Demos
ASP.NET Core Window Component	Window Features	Window Documentation	Window Demos

ASP.NET Core Navigation Components

ASP.NET Core ActionSheet Component	ActionSheet Features	ActionSheet Documentation	ActionSheet Demos
ASP.NET Core AppBar Component	AppBar Features	AppBar Documentation	AppBar Demos
ASP.NET Core Bottom Navigation Component	BottomNavigation Features	BottomNavigation Documentation	BottomNavigation Demos
ASP.NET Core Breadcrumb Component	Breadcrumb Features	Breadcrumb Documentation	Breadcrumb Demos
ASP.NET Core Button Component	Button Features	Button Documentation	Button Demos
ASP.NET Core ButtonGroup Component	ButtonGroup Features	ButtonGroup Documentation	ButtonGroup Demos
ASP.NET Core Chip Component	Chip Features	Chip Documentation	Chip Demos
ASP.NET Core ChipList Component	ChipList Features	ChipList Documentation	ChipList Demos
ASP.NET Core Menu Component	Menu Features	Menu Documentation	Menu Demos
ASP.NET Core Drawer Component	Drawer Features	Drawer Documentation	Drawer Demos
ASP.NET Core DropDown Button Component	DropDown Button Features	DropDown Button Documentation	DropDown Button Demos
ASP.NET Core PanelBar Component	PanelBar Features	PanelBar Documentation	PanelBar Demos
ASP.NET Core FloatingAction Button Component	FloatingActionButton Features	FloatingActionButton Documentation	FloatingActionButton Demos
ASP.NET Core SplitButton Component	SplitButton Features	SplitButton Documentation	SplitButton Demos
ASP.NET Core Timeline Component	Timeline Features	Timeline Documentation	Timeline Demos
ASP.NET Core TabStrip Component	TabStrip Features	TabStrip Documentation	TabStrip Demos
ASP.NET Core Toolbar Component	Toolbar Features	Toolbar Documentation	Toolbar Demos
ASP.NET Core TreeView Component	TreeView Features	TreeView Documentation	TreeView Demos
ASP.NET Core Stepper Component	Stepper Features	Stepper Documentation	Stepper Demos
ASP.NET Core Wizard Component	Wizard Features	Wizard Documentation	Wizard Demos

Media

ASP.NET Core MediaPlayer Component	MediaPlayer Features	MediaPlayer Documentation	MediaPlayer Demos
ASP.NET Core ScrollView Component	ScrollView Features	ScrollView Documentation	ScrollView Demos

Document Processing Libraries

As part of your Telerik UI for ASP.NET Core free trial or licensed copy you get access to several document processing libraries that allow you to convert, manage and export data to different file formats.

ASP.NET Core PDF Processing Library	PDF Processing Features	PDF Processing Documentation	PDF Processing Demos
ASP.NET Core Spread Processing Library	Spread Processing Features	Spread Processing Documentation	Spread Processing Demos
ASP.NET Core SpreadStream Processing Library	SpreadStream Processing Features	SpreadStream Processing Documentation	SpreadStream Processing Demos
ASP.NET Core Words Processing Library	Words Processing Features	Words Processing Documentation	Words Processing Demos
ASP.NET Core Zip Library	Zip Library Features	Zip Library Documentation	Zip Library Demos

Visual Studio Code

The Telerik UI for ASP.NET Core Productivity Tools for Visual Studio Code include UI for ASP.NET Core Scaffolder, Code Snippets Pack, Project Templates with Telerik components, Telerik REPL for ASP.NET Core

ASP.NET Core Visual Studio Code

Visual Studio Code Overview

Visual Studio Code Documentation

Design-to-Development Support

Four Design Themes

Telerik UI for ASP.NET Core offers a variety of professionally designed and customizable built-in themes plus the Telerik SASS Theme Builder to help you create and deliver UI according to business needs. Telerik Ui for ASP.NET Core includes four built-in themes: ASP.NET Core Default Theme, Material, Fluent and Bootstrap Themes, as well as multiple color swatches including "Ocean Blue" targeting accessibility compliance.

Design Kits for Figma

Four Telerik UI Design Kits for Figma

Telerik UI Figma Design Kits

Documentation

Customize the Telerik UI for ASP.NET Core Themes to Match Your Brand

ASP.NET Core ThemeBuilder

Apply Your Brand Colors

Telerik UI for ASP.NET Core ThemeBuilder App

Sample Applications

ASP.NET Core Admin Dashboard Application

We created the ASP.NET Core Admin Dashboard Application to illustrate how such an application can look following the best practices of building UI with Telerik UI for ASP.NET components. It demonstrates the components' look and feel and can be used as a leraning resource by anyone that's considering to use the Telerik UI components for building UI, regardless of their experience. The demo covers a complete admin dashboard application, including task tracking, product catalogue, account settings etc., and demonstrates how easy it is to build UI with the help of complex components such as the DataGrid (Table), Charts, Forms and more!.

• Live demo
• Source code

ASP.NET Core Stock Portfolio Application

The ASP.NET Core Stock Portfolio Application is a progressive web app (PWA) showcasing how to create fast and efficiently beautiful, dynamic financial dashboards. It uses some of the most renowned Telerik UI for ASP.NET Core components and shows dynamic data updates in real time, allowing for great flexibility and efficient data monitoring with no visible delay. The sample applications utilizes components such as ASP.NET Core Grid, Charts, DropDownList, HeatMap, Calendar and more!

• Live demo
• Source code

ASP.NET Core Telerik UI + Bootstrap Application

The ASP.NET Core + Bootstrap Application shows how to create responsive applications using Telerik UI for ASP.NET Core alongside Twitter Bootstrap. The grid layout and responsive CSS is based on Bootstrap, while the components are provided by Telerik UI for ASP.NET Core. The demo allows you to resize the page by changing the font size or customize it using the pickers above to experience its responsive features.

• Live demo
• Source code

Package References

The projects usually reference a commercial version of UI for Blazor components. If you only have a trial license, replace the reference to the NuGet package and to the JS Interop file and/or Theme accordingly.

The references (both to Telerik UI for ASP.NET Core, and the .NET framework) are usually up-to-date for the time of creation. You may need to update to their latest versions and make any necessary changes. The Blazor (?) framework is evolving rapidly and these examples may not get their references updated all the time. Nevertheless, the general approaches should remain valid, barring breaking changes in the framework.

Contribution

Issues and Pull Requests are welcome.

To submit a pull request, you should first fork the repo.

Licensing

Telerik UI for ASP.NET Core is a commercial UI library. To use the components, you need to either register for a free trial or purchase a license.

The 30-day free trial can be obtained from Telerik UI for ASP.NET Core product page and gives you access to all Telerik UI for ASP.NET Core components and their full functionality. For more infromation regarding the available license and budnle options you can review the product pricing page.

For both active trialist and license holders you get access to free on-demand technical training sessions and our legendary technical support provided directly by the UI for ASP.NET Core dev team!

How to Reference the Commerial NuGet Package

All active licence holders have access to the private Telerik NuGet Feed. The Telerik.Examples.Mvc and Telerik.Examples.RazorPages reference a local NuGet package that is a Trial version of the Telerik UI for ASP.NET Core NuGet.

In order to add a reference to the commercial NuGet Package follow the steps below:

1. Navigate to Dependencies > Packages from the Solution explorer in Visual Studio.

2. Right click on Telerik.UI.for.AspNet.Core.Trial and select Remove from the context menu.

3. Go to Tools > NuGet Package Manager > Package Manager Settings, select Package Manager Sources and then click the + button.

4. Choose feed Name, set the feed URL to: https://nuget.telerik.com/nuget and click OK.

   

5. Browse and Install the Telerik.UI.for.AspNet.Core NuGet package.

Visual Studio sometimes caches the NuGet packages and they should be cleared. In order to do this, open the Tools > NuGet Package Manager > Package Manager Settings menu command, then select Clear All NuGet Cache(s).

If an error is present in the Package Manager and a reference to the deleted source is still standing, оpen the NuGet Package Feed and remove the reference manually.

For more information on how to add the private Telerik NuGet feed and install the package refer to the NuGet Install in ASP.NET Core article

Useful Links

• Browse all UI for ASP.NET Core component demos live
• Browse the Telerik UI for ASP.NET Core documentation
• Follow this link to report bugs and add feature requests
• Browse or contribute to localization texts used in the samples ?
• Create, run, share and test ASP.NET Core code snippets directly in the browser in our ASP.NET Core REPL code runner