Visual Studio 2022 Support

Telerik UI for ASP.NET MVC Controls

Build rich and responsive web apps for any device twice as fast. Powered by Kendo UI


*Includes access to online technical training to speed-up your onboarding.


Telerik Earns Multiple TrustRadius Best of Development 2021 awards

Telerik has won Best Feature Set and Best Customer Support.


Telerik UI Earns TrustRadius' 2021 Top Rated Award

Progress Telerik UI has earned TrustRadius’ Top Rated Award for Software Components and .NET Development.

    .Columns(columns =>
        columns.Select().Width("6%").HtmlAttributes(new { @class = "checkbox-align" }).HeaderHtmlAttributes(new { @class = "checkbox-align" });
        columns.Bound(p => p.ProductName)
                    @"<div class='product-photo'
                        style='background-image: url(" + @Url.Content("~/shared/web/foods/#:data.ProductID#.jpg") + ");'></div><div class='product-name'>#: ProductName #</div>").Width(300);
        columns.Bound(p => p.Discontinued).Title("In Stock").Width("30%")
                            .ClientTemplate("<span id='badge_#=ProductID#' class='badgeTemplate'></span>");        
        columns.Bound(p => p.CustomerRating).Title("Rating").Width("16%").Editable("returnFalse").ClientTemplate(Html.Kendo().Rating()
                .HtmlAttributes(new { data_bind = "value: CustomerRating" })
        columns.Bound(p => p.Country.CountryNameLong).Title("Country").EditorTemplateName("Country").ClientTemplate(
            @"<div class='k-text-center'><img src='" + @Url.Content("~/shared/web/country-flags/#:data.Country.CountryNameShort#.png") + "' alt='#: data.Country.CountryNameLong#' title='#: data.Country.CountryNameLong#' width='30' /></div>").Width("12%");
        columns.Bound(p => p.TargetSales).Editable("returnFalse").Title("Target Sales")
                      .Legend(legend => legend
                      .HtmlAttributes(new { data_series= "[{data: [#=TargetSales#], labels:{visible:true, format:'{0}%', background:'none'}}]"})
                          .ChartArea(chartArea => chartArea.Margin(0).Width(180))
                          .CategoryAxis(axis => axis
                              .MajorGridLines(lines => lines.Visible(false))
                              .MajorTicks(lines => lines.Visible(false))
                          .ValueAxis(axis => axis
                              .Labels(l => l.Visible(false))
                              .MinorTicks(lines => lines.Visible(false))
                              .MajorGridLines(lines => lines.Visible(false))
                          .Tooltip(tooltip => tooltip
    .ToolBar(toolbar =>
    .Reorderable(r => r.Columns(true))
    .Events(events => events.DataBound("onDataBound"))
    .DataSource(dataSource => dataSource
        .Events(events => events.Error("error_handler"))
        .Model(model =>
            model.Id(p => p.ProductID);
            model.Field(p => p.ProductID).Editable(false);
            model.Field(p => p.Discontinued).Editable(false);
            model.Field(p => p.TotalSales).Editable(false);
            model.Field(p => p.Category).DefaultValue(new CategoryViewModel() { CategoryID= 8, CategoryName="Seafood"});
            model.Field(p => p.Country).DefaultValue(new CountryViewModel() { CountryNameLong="Bulgaria", CountryNameShort="bg"});
        .Group(group=>group.Add("Category.CategoryName", typeof(string), ListSortDirection.Descending))
        .Create("DetailProducts_Create", "Grid")
        .Read("DetailProducts_Read", "Grid")
        .Update("DetailProducts_Update", "Grid")
        .Destroy("DetailProducts_Destroy", "Grid")
<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";

    function onDataBound(e) {
        var grid = this;
        grid.table.find("tr").each(function () {
            var dataItem = grid.dataItem(this);
            var type = dataItem.Discontinued ? 'success' : 'error';
            var text = dataItem.Discontinued ? 'available' : 'not available';

            $(this).find('script').each(function () {

                type: type,
                value: text,

            kendo.bind($(this), dataItem);

    function returnFalse() {
        return false;

    .k-grid tr .checkbox-align {
        text-align: center;
        vertical-align: middle;

    .product-photo {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-size: 32px 35px;
        background-position: center center;
        vertical-align: middle;
        line-height: 32px;
        box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
        margin-right: 5px;

      .product-name {
        display: inline-block;
        vertical-align: middle;
        line-height: 32px;
        padding-left: 3px;
        width: 70%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

      .k-grid .checkbox-align {
        text-overflow: clip;

    .k-rating-container .k-rating-item {
        padding: 4px 0;

        .k-rating-container .k-rating-item .k-icon {
            font-size: 16px;

    .dropdown-country-wrap {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        white-space: nowrap;

        .dropdown-country-wrap img {
            margin-right: 10px;

    #grid .k-grid-edit-row > td > .k-rating {
        margin-left: 0;
        width: 100%;

@using Kendo.Mvc.Examples.Models.Gantt;

@(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>()
    .Columns(columns =>
        columns.Bound(c => c.Title).Title("Task").Editable(true).Sortable(true).Width(250);
        columns.Bound(c => c.PercentComplete).Title("% Complete").Editable(true).Width(100);
    .Views(views =>
        views.WeekView(weekView => weekView.Selected(true));
    .DataSource(d => d
        .Model(m =>
            m.Id(f => f.TaskID);
            m.ParentId(f => f.ParentID);
            m.OrderId(f => f.OrderId);
            m.Field(f => f.Expanded).DefaultValue(true);
        .Read("Read_Tasks", "Gantt")
    .DependenciesDataSource(d => d
        .Model(m =>
            m.Id(f => f.DependencyID);
            m.PredecessorId(f => f.PredecessorID);
            m.SuccessorId(f => f.SuccessorID);
            m.Type(f => f.Type);
        .Read("Read_Dependencies", "Gantt")
    .Resources(r => r
        .DataSource(d => d
            .Schema(s => s
                .Model(m => m.Id("ID"))
            .Transport(t =>
                t.Read("Read_Resources", "Gantt");
    .Assignments<ResourceAssignmentViewModel>(a => a
        .DataSource(d => d
            .Model(m =>
                m.Id(f => f.ID);
            .Read("Read_Assignments", "Gantt")

@model List<VisitorConversionViewModel>
    <script id="current" type="text/x-kendo-template">
        <h1>2, 399</h1>
        <div>Active users right now</div>

    <script id="pages-chart-template" type="text/x-kendo-template">
            .Series(s=>s.Column(new double[] { 90000, 60000, 40000, 30000, 10000 }))
            .ValueAxis(v=> v.Numeric()
                .Line(l => l.Width(0))
                c.Categories(new string[] { "Home", "Price", "Sign-up", "Product", "Blog" })
                .MajorGridLines(mg => mg.Visible(false))
                .MajorTicks(mt => mt.Visible(false))
            .HtmlAttributes(new { style = "height:100%;width:100%;" })
    <script id="views-chart-template" type="text/x-kendo-template">
            .Series(s=>s.Line(new dynamic[] {
                    new { Date = new DateTime(2020, 3, 30), Views = 2000 },
                    new { Date = new DateTime(2020, 4, 5), Views = 80000 },
                    new { Date = new DateTime(2020, 4, 10), Views = 130000 },
                    new { Date = new DateTime(2020, 4, 15), Views = 170000 },
                    new { Date = new DateTime(2020, 4, 20), Views = 190000 },
                    new { Date = new DateTime(2020, 4, 25), Views = 150000 },
                    new { Date = new DateTime(2020, 4, 30), Views = 160000 }
                .Markers(m => m.Visible(false))
            .ValueAxis(v=> v.Numeric()
                .Line(l => l.Width(0))
            .CategoryAxis(c=> c.Date()
                .Labels(l=>l.Format("{0:d MMMM}").Rotation("auto"))
                .MajorGridLines(mg => mg.Visible(false))
                .MajorTicks(mt => mt.Visible(false))
            .HtmlAttributes(new { style = "height:100%;width:100%;" })
    <script id="visitors-chart-template" type="text/x-kendo-template">
            .Series(series =>
                series.Donut(new dynamic[] {
                    new {value = 70, type = "New"},
                    new {value = 30, type = "Returning"},
            .Legend(l => l.Position(ChartLegendPosition.Bottom).Visible(true))
            .HtmlAttributes(new { style = "height:100%;width:100%;" })

    <script id="users-grid-template" type="text/x-kendo-template">
            .Columns(col => {
                col.Bound(f => f.Channel).Width(100);
                col.Bound(f => f.Users).Width(80).Format("{0:n0}");
            .Scrollable(s => s.Height("auto"))
            .HtmlAttributes(new { style = "height:100%;" })

        .Containers(c => {
            c.Add().Header(h => h.Text("Page Views")).BodyTemplateId("views-chart-template").ColSpan(2).RowSpan(1);
            c.Add().Header(h => h.Text("Users by Channel")).BodyTemplateId("users-grid-template").ColSpan(2).RowSpan(2);
            c.Add().Header(h => h.Text("Visitors")).BodyTemplateId("visitors-chart-template").ColSpan(1).RowSpan(1);
            c.Add().Header(h => h.Text("Most Visited Pages")).BodyTemplateId("pages-chart-template").ColSpan(2).RowSpan(1);
            c.Add().Header(h => h.Text("Currently")).BodyTemplateId("current").ColSpan(1).RowSpan(1);
@section scripts{
        function onTileResize(e) {
            if (e.container) {

                // for widgets that do not auto resize
                kendo.resize(e.container, true);

        $(window).on("resize", function () {
            kendo.resize($(".k-chart, .k-grid"));

        $(document).on("kendoReady", function () {
            kendo.resize($(".k-grid, .k-chart"));
            $(document).bind("kendo:skinChange", updateTheme);

        function updateTheme() {
            var charts = $(".k-chart");
            $.each(charts, function (i, elem) {
                var theme = kendoTheme;
                if (kendoTheme == "material-v2" || kendoTheme == "default-v2" || kendoTheme == "bootstrap-v4") {
                    theme = "sass";
                $(elem).getKendoChart().setOptions({ theme: theme });
    .k-card-header {
        flex: 0 0 auto;

    .k-card-body {
        overflow: hidden;

        .HtmlAttributes(new { style = "width: 100%; height:566px", aria_label = "editor" })
        .StyleSheets(css => css
        .Tools(tools => tools

                <br />
                <p style="text-align:center;">
                    <span style="font-family:Verdana, Geneva, sans-serif;font-size:large;">
                        <strong>One of the Most Beautiful Islands on Earth - Tenerife</strong>
                    <span style="font-family:Verdana, Geneva, sans-serif;font-size:medium;">
                <p style="font-size: small;">
                    <strong>Tenerife </strong>is the largest and most populated island of the eight <a href="" target="_blank"> Canary Islands</a>. It is also the most populated island of <strong>Spain</strong>, with a land area of 2,034.38 square kilometers(785 sq mi) and 904,713 inhabitants, 43 % of the total population of the <strong>Canary Islands</strong>. The archipelago's beaches, climate and important natural attractions, make it a major tourist destination with over 12 million visitors per year.
                <br />
                <img src="@Url.Content("~/content/web/editor/tenerife.png")" style="float: right;" alt="" width="350" height="206" />

                    <span style="font-family:Verdana, Geneva, sans-serif;font-size:medium;">
                        <strong>Trip Highlights in Tenerife</strong>
                        <strong style="color: rgb(0,80,5);">Trip to Loro Parque </strong> <br /> Out top tip is to visit the famous <em>Loro Parque</em> or 'Loro Park. It is a 13.5-hectare zoo on the outskirts of Puerto de la Cruz on Tenerife, Spain where it houses an extensive and diverse reserve of animal and plant species.
                        <br />
                        <br />
                        <strong><span style="color: rgb(46,125,50);">Whale and Dolphin Watching Tour&nbsp;<br /></span></strong> Another great option is to take boat excursion with almost guaranteed sightings of whales and dolphins. This is a day-long trip that includes lunch, island visits, fishing, and amazing views of ocean sceneries.
                        <br />
                        <br />
                        <strong><span style="color: rgb(96,173,94);">Teide National Park Stargazing</span></strong><br />Last, but not least you can take a stargaze trip to Teide National Park, the 3rd best place in the world to view stars and described by NASA as a window to the universe.
                        <br />
                <br />
                    <span style="font-family:Verdana, Geneva, sans-serif;font-size:medium;"> <strong> Climate </strong> </span>
                <table style="width:100%;height:225px;text-align:center;">
                        <tr style="height:20%;background-color: rgb(96,173,94);">
                            <td style="width:473px;text-align:center; font-size:medium; color: rgb(255,255,255);" colspan="14">
                                <strong> Climate Data for <a href="" target="_blank"> Santa Cruz de Tenerife</a></strong>
                        <tr style="height:9.33333%;">
                            <td style="width:230px;">
                                <span style="font-size:small; color: rgb(46,125,50);"><strong> Month </strong></span>
                            <td><strong><span style="color: rgb(0,80,5);">Jan</span></strong></td>
                            <td><strong><span style="color: rgb(0,80,5);">Feb</span></strong></td>
                            <td><strong><span style="color: rgb(0,80,5);">Mar</span></strong></td>
                            <td><strong><span style="color: rgb(0,80,5);">Apr</span></strong></td>
                            <td><strong><span style="color: rgb(0,80,5);">May</span></strong></td>
                            <td><strong><span style="color: rgb(0,80,5);">Jun</span></strong></td>
                            <td><strong><span style="color: rgb(0,80,5);">Jul</span></strong></td>
                            <td><strong><span style="color: rgb(0,80,5);">Aug</span></strong></td>
                            <td><strong><span style="color: rgb(0,80,5);">Sep</span></strong></td>
                            <td><strong><span style="color: rgb(0,80,5);">Oct</span></strong></td>
                            <td><strong><span style="color: rgb(0,80,5);">Nov</span></strong></td>
                            <td><strong><span style="color: rgb(0,80,5);">Dec</span></strong></td>
                            <td><strong><span style="color: rgb(0,80,5);">Year</span></strong></td>
                        <tr style="height:23%;">
                            <td style="width:230px; color: rgb(46,125,50);">
                                <strong>Daily mean &#176;C (&#176;F)</strong>
                            <td style="">18.2<br />(64.8)<br /></td>
                            <td style="">18.3<br />(64.9)<br /></td>
                            <td style="">19.0<br />(66.2)<br /></td>
                            <td style="">19.7<br />(67.5)<br /></td>
                            <td style="">21.0<br />(69.8)<br /></td>
                            <td style="">22.9<br />(73.2)<br /></td>
                            <td style="">25.0<br />(77.0)<br /></td>
                            <td style="">25.5<br />(77.9)<br /></td>
                            <td style="">24.9<br />(76.8)<br /></td>
                            <td style="">23.4<br />(74.1)<br /></td>
                            <td style="">21.3<br />(70.3)<br /></td>
                            <td style="">19.4<br />(66.9)<br /></td>
                            <td style="">21.5<br />(70.7)<br /></td>
                        <tr style="height:23%;">
                            <td style="width:px; color: rgb(46,125,50);">
                                <strong>Average rainy days (&#8805 1.0 mm)</strong>
                            <td style="">8.0</td>
                            <td style="">7.2</td>
                            <td style="">6.9</td>
                            <td style="">5.5</td>
                            <td style="">2.9</td>
                            <td style="">0.9</td>
                            <td style="">0.2</td>
                            <td style="">0.8</td>
                            <td style="">2.7</td>
                            <td style="">6.1</td>
                            <td style="">8.8</td>
                            <td style="">9.4</td>
                            <td style="">59.4</td>
                        <tr style="height:23%;">
                            <td style="width:230px; color: rgb(46,125,50);">
                                <strong> Mean monthly <a href="" target="_blank"> sunshine hours</a></strong><br />
                            <td style="">178</td>
                            <td style="">186</td>
                            <td style="">221</td>
                            <td style="">237</td>
                            <td style="">282</td>
                            <td style="">306</td>
                            <td style="">337</td>
                            <td style="">319</td>
                            <td style="">253</td>
                            <td style="">222</td>
                            <td style="">178</td>
                            <td style="">168</td>
                            <td style="">2,887</td>
                    <em> *The data used in this demo is taken from <a href="" target="_blank"> </a>.</em> <br />
                    <em> **The displayed photos are sourced from <a href="" target="_blank"> </a> </em>

Key Features

UI Framework for Any App Scenario

Cut development time, while delivering rich, powerful, modern websites and apps. Telerik® UI for ASP.NET MVC offers 90+ jQuery-based components ranging from must-have HTML helpers for every app like Grids, Dropdowns and Menus to advanced line-of-business controls such as Charts, Gantt, Diagram, Scheduler, PivotGrid and Maps.

Despite the variety of built-in functionality the product offers, we continue to release new functionality based on customer feedback three times a year. Feel free to suggest product ideas for the community to vote on in Telerik feedback portal—the more votes your suggestion receives, the higher priority it becomes to introduce into our roadmap.


HTML5 Rendering Powered by Kendo UI

Telerik ASP.NET MVC components are comprised of Telerik award-winning Kendo UI HTML5/JS widgets and their server-side wrappers for ASP.NET MVC. The wrappers generate the JavaScript and HTML required by the Kendo UI widgets enabling you to use C# to configure them.

Telerik UI for ASP.NET MVC ships the same built-in functionality as Kendo UI, but offers MVC-specific features on top, including:

  • Server-side data binding and in some cases server-side rendering
  • Support for unobtrusive validation based on Data Annotation attributes
  • Visual Studio intellisense for the server-side configuration syntax
  • Visual Studio Extensions for automatic creation of new applications
  • Built-in editor templates and more

Mobile Support and Responsiveness

Telerik® UI for ASP.NET MVC saves you time and effort when implementing responsive design practices, because the controls take care of them out-of-the-box or with the change of a single property:

  • All components render larger clickable areas on small screens and scale proportionately to the container in which they are placed
  • All components integrate well with grid-layout frameworks, such as Bootstrap and Zurb Foundation
  • The complex and popular components, such as Grid and Scheduler, serve different rendering on small screens to provide optimal user experience
Learn more about how Telerik controls help you deliver tailored UX to any screen size

Simple Server-Side Data Binding and CRUD

If you are familiar with server-side programming, it can be hard to work with data in HTML5. Telerik UI for ASP.NET MVC makes data binding simple. Use your existing server-side data access technologies to quickly bind data to the UI widgets via our DataSource component.  With it, you can define endpoints for read and data editing operations, as well as mappings for requests between .NET and JavaScript.


Conversational UI - Modern UI for Chatbots

The Conversational UI control (aka RadChat) is a new control intended to be used with various chat bot services. Highlights of the features include:

  • Built-in hero cards
  • Built-in suggested actions
  • Built-in simple message and typing indicator
  • Custom card/attachment templates
  • Easy connectivity to chat bot services (Azure/Microsoft Bot Framework,, Amazon Lex)
conversational UI resized

Document Processing

Take advantage of the RadSpreadProcessing, RadSpreadStreamProcessing, RadWordsProcessing, RadPdfProcessing and libraries, which enable the processing of the most common text, spreadsheet, and PDF file formats without having Microsoft Office or other third-party libraries installed. Now application users can create, load and modify documents in a variety of formats including:

  • DOCX
  • RTF
  • TXT
  • HTML
  • PDF
  • XLSX
  • CSV
  • Tab-delimited

Enable your application to seamlessly export and import documents or convert them from one format to another. In addition, the zip library allows you to create and modify archives with variety of compression mechanisms supported, so you can transfer data faster and secure.


Use Bower and NuGet

Popular package management and task automation solutions such as NuGet, Bower and Gulp are made first class citizens in ASP.NET MVC. That means every web developer can use Bower for client packages, NuGet for server packages and Grunt/Gulp for compilation, minification, etc., when building web apps.

UI for ASP.NET MVC takes advantage of these tools by providing a Bower feed for its client scripts, and a NuGet feed, hosted on our NuGet server, for its server wrappers implementation (see this help topic for details). Furthermore, you can build a custom script from the source using Grunt by following these steps.


Built-In, Yet Customizable Themes

Kendo UI widgets can easily be themed and styled via CSS. The framework includes 11 out-of-the-box themes created by Telerik's professional designers, so you can create sleek modern apps without a designer on-hand.

The themes can also help you style normal HTML elements, like buttons and inputs, so all elements on your page look consistent. Simply use the basic CSS classes included in Kendo UI and apply a professional CSS theme to your entire page.

Transforming the ready-made themes to perfectly match your site is also easy when using the ThemeBuilder tool. With the point-and-click configuration wizard, your new themes are ready in a matter of seconds.

Seamless UX Across Browsers

Although based on HTML5, UI for ASP.NET Core makes sure your sites and apps look and work flawlessly across all browsers, while maximizing performance. It uses HTML5 features when available, adds support for them when necessary and provides fine-tuned graceful degradation for others.

The widgets support all major browsers, including: Edge 20+, Internet Explorer 8+, Firefox, Chrome 21+, Safari 6.2+ (OSX) and Opera 15+.


100+ ASP.NET MVC Controls Powered by Kendo UI

See Them in Action

Launch demos

Upgrade to Telerik DevCraft Complete

Be Ready for Any Project & Technology

Save up to 50% in development time by getting 1,250+ .NET and JavaScript UI components for building web, desktop and mobile apps.

Get the Best Value for Money

Enjoy Telerik UI for ASP.NET MVC along with embedded reporting and mocking tools while saving up to 90% from the upgrade price.

What's New with Telerik UI for
ASP.NET MVC Components Library

Telerik UI for ASP.NET MVC Skeleton

New ASP.NET MVC Component: Skeleton

Improve user experience by creating an accurate representation of how content is going to be displayed even before it’s loaded with the SkeletonContainer of Telerik UI for ASP.NET MVC.

Telerik UI for ASP.NET MVC TaskBoard

New ASP.NET MVC Component: TaskBoard

The Telerik UI for ASP.NET MVC TaskBoard component enables users to track work by organizing tasks in stage-based workflows like “in progress,” “finished” and “upcoming.”

Telerik UI for ASP.NET MVC Grid Range Selection Thumbnail

New ASP.NET MVC Grid Feature: Data Range Selection, Copy and Export

Export a range of cells from the Grid directly to Excel or as chart data

Telerik UI for ASP.NET MVC Support and Learning

Free Whitepaper

The Command Line: Reinvented for Modern Developers

This whitepaper provides insight into how modern development platforms cater to application development through CLI—for web, desktop and mobile channels.

Free Whitepaper

The Anatomy of Responsive ASP.NET Apps

This whitepaper will walk you through the must-know responsive web practices to help you succeed in building apps for any screen size.


Industry-Leading Support for ASP.NET MVC Components

Expert and Timely Response

Telerik UI for ASP.NET MVC customers have the benefit of accessing Telerik premium support forums and getting answers from the engineers who built Telerik UI for ASP.NET MVC. Even during trial.

Contact Telerik support

Need Evaluation Help?

No time to evaluate our ASP.NET MVC framework? Send us your project requirements. We will evaluate your required features for you and let you know how we can help.

Send us your requirements

What our customers are saying on TrustRadius

Read all reviews

Next Steps

Launch demos

See UI for ASP.NET MVC in action and check out how much it can do out-of-the-box.

Compare pricing

Check out the offers. Purchase an individual suite, or treat yourself to one of our bundles.

Download Free Trial

Try UI for ASP.NET MVC with dedicated technical support.