ui for aspnet core examples
1.0.0
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:
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:
The project uses a local database which is created upon building the project based on the existent migrations.
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.
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
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 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 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 Map Component | Map Features | Map Documentation | Map Demos |
| 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 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 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 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 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 |
| 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 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 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 |
| ASP.NET Core MediaPlayer Component | MediaPlayer Features | MediaPlayer Documentation | MediaPlayer Demos |
| ASP.NET Core ScrollView Component | ScrollView Features | ScrollView Documentation | ScrollView Demos |
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 |
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 |
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.
| Four Telerik UI Design Kits for Figma | Telerik UI Figma Design Kits | Documentation |
| ASP.NET Core ThemeBuilder | Apply Your Brand Colors | Telerik UI for ASP.NET Core ThemeBuilder App |
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!.
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!
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.
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.
Issues and Pull Requests are welcome.
To submit a pull request, you should first fork the repo.
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!
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:
Navigate to Dependencies > Packages from the Solution explorer in Visual Studio.
Right click on Telerik.UI.for.AspNet.Core.Trial and select Remove from the context menu.
Go to Tools > NuGet Package Manager > Package Manager Settings, select Package Manager Sources and then click the + button.
Choose feed Name, set the feed URL to: https://nuget.telerik.com/v3/index.json and click OK.
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
