Visual Studio 2022 Support

Telerik UI for ASP.NET MVC Components

Deliver high-quality apps in the quickest timeframe using the 110+ ASP.NET MVC UI components that cover any use case scenario.

Download Free Trial

NEW

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

trust-radius-badge

Telerik Earns Multiple TrustRadius Best of Development 2021 awards

Telerik has won Best Feature Set and Best Customer Support.

trust-radius-badge

Telerik UI Earns TrustRadius' 2021 Top Rated Award

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

big-wave-dblue-hero-fluiddark-wave-small-hero
ninja-peeking
Demo Code Full List of Controls 
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.DetailProductViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Select().Width("6%").HtmlAttributes(new { @class = "checkbox-align" }).HeaderHtmlAttributes(new { @class = "checkbox-align" });
        columns.Bound(p => p.ProductName)
                .ClientTemplate(
                    @"<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()
                .Name("rating_#=ProductID#")
                .Min(1)
                .Max(5)
                .Label(false)
                .HtmlAttributes(new { data_bind = "value: CustomerRating" })
                .Selection("continuous")
                .ToClientTemplate().Value
            );
        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")
                      .ClientTemplate(Html.Kendo().Sparkline()
                      .Name("chart_#=ProductID#")
                      .Legend(legend => legend
                          .Visible(false)
                      )
                      .Type(SparklineType.Bar)
                      .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))
                          )
                          .ChartArea(c=>c.Background("transparent"))
                          .ValueAxis(axis => axis
                              .Numeric()
                              .Min(0)
                              .Max(130)
                              .Visible(false)
                              .Labels(l => l.Visible(false))
                              .MinorTicks(lines => lines.Visible(false))
                              .MajorGridLines(lines => lines.Visible(false))
                          )
                          .Tooltip(tooltip => tooltip
                              .Visible(false)
                          ).ToClientTemplate().Value
                     );
    })
    .ToolBar(toolbar =>
    {
        toolbar.Search();
        toolbar.Excel();
        toolbar.Pdf();
    })
    .ColumnMenu(col=>col.Filterable(false))
    .Height(700)
    .Pageable()
    .Sortable()
    .Navigatable()
    .Resizable(r=>r.Columns(true))
    .Reorderable(r => r.Columns(true))
    .Filterable()
    .Scrollable()
    .Events(events => events.DataBound("onDataBound"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .PageSize(20)
        .AutoSync(true)
        .ServerOperation(false)
        .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))
        .Aggregates(agg=>agg.Add(field=>field.TotalSales).Sum())
        .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";
                    });
                }
            });
            alert(message);
        }
    }

    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 () {
                eval($(this).html());
            });

            $(this).find(".badgeTemplate").kendoBadge({
                type: type,
                value: text,
            });
           

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

    function returnFalse() {
        return false;
    }
</script>

<style>
    .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%;
    }
</style>

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

@(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>()
    .Name("gantt")
    .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.DayView();
        views.WeekView(weekView => weekView.Selected(true));
        views.MonthView();
    })
    .ListWidth("35%")
    .Height(566)
    .ShowWorkHours(false)
    .ShowWorkDays(false)
    .Snap(false)
    .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
        .Field("resources")
        .DataColorField("Color")
        .DataTextField("Name")
        .DataSource(d => d
            .Custom()
            .Schema(s => s
                .Model(m => m.Id("ID"))
                .Data("Data")
            )
            .Transport(t =>
            {
                t.Read("Read_Resources", "Gantt");
            })
        )
    )
    .Assignments<ResourceAssignmentViewModel>(a => a
        .DataTaskIdField("TaskID")
        .DataResourceIdField("ResourceID")
        .DataValueField("Units")
        .DataSource(d => d
            .Model(m =>
            {
                m.Id(f => f.ID);
            })
            .Read("Read_Assignments", "Gantt")
        )
    )
    .Editable(false)
)


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

    <script id="pages-chart-template" type="text/x-kendo-template">
        @(Html.Kendo().Chart()
            .Name("pages-chart")
            .Legend(l=>l.Visible(false))
            .Series(s=>s.Column(new double[] { 90000, 60000, 40000, 30000, 10000 }))
            .ValueAxis(v=> v.Numeric()
                .Line(l => l.Width(0))
                .Labels(l=>l.Step(5)
               )
               .MajorUnit(10000)
               .Min(0)
               .Max(100000)
            )
            .CategoryAxis(c=>
                c.Categories(new string[] { "Home", "Price", "Sign-up", "Product", "Blog" })
                .Labels(l=>l.Rotation("auto"))
                .MajorGridLines(mg => mg.Visible(false))
                .MajorTicks(mt => mt.Visible(false))
            )
            .HtmlAttributes(new { style = "height:100%;width:100%;" })
            .ToClientTemplate()
        )
    </script>
    <script id="views-chart-template" type="text/x-kendo-template">
        @(Html.Kendo().Chart()
            .Name("views-chart")
            .Legend(l=>l.Visible(false))
            .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 }
                })
                .CategoryField("Date").Field("Views")
                .Style(ChartLineStyle.Smooth)
                .Markers(m => m.Visible(false))
            )
            .ValueAxis(v=> v.Numeric()
                .Line(l => l.Width(0))
                .Labels(l=>l.Step(2)
               )
               .Min(0)
               .Max(200000)
            )
            .CategoryAxis(c=> c.Date()
                .BaseUnit(ChartAxisBaseUnit.Fit)
                .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%;" })
            .ToClientTemplate()
        )
    </script>
    <script id="visitors-chart-template" type="text/x-kendo-template">
        @(Html.Kendo().Chart()
            .Name("visitors-chart")
            .Series(series =>
            {
                series.Donut(new dynamic[] {
                    new {value = 70, type = "New"},
                    new {value = 30, type = "Returning"},
                }).StartAngle(70).CategoryField("type");
            })
            .Legend(l => l.Position(ChartLegendPosition.Bottom).Visible(true))
            .HtmlAttributes(new { style = "height:100%;width:100%;" })
            .ToClientTemplate()
        )
    </script>

    <script id="users-grid-template" type="text/x-kendo-template">
        @(Html.Kendo().Grid(Model)
            .Name("users-grid")
            .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%;" })
            .ToClientTemplate()
        )
    </script>

    @(Html.Kendo().TileLayout()
        .Name("tilelayout")
        .Columns(5)
        .RowsHeight("240px")
        .ColumnsWidth("200px")
        .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);
        })
        .Reorderable(true)
        .Resizable(true)
        .Events(e=>e.Resize("onTileResize"))
    )
@section scripts{
    <script>
        function onTileResize(e) {
            if (e.container) {

                // for widgets that do not auto resize
                // https://docs.telerik.com/kendo-ui/styles-and-layout/using-kendo-in-responsive-web-pages
                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 });
            });
        }
    </script>
}
<style>
    .k-card-header {
        flex: 0 0 auto;
    }

    .k-card-body {
        overflow: hidden;
    }
</style>


@(Html.Kendo().Editor()
        .Name("editor")
        .HtmlAttributes(new { style = "width: 100%; height:566px", aria_label = "editor" })
        .StyleSheets(css => css
        .Add(Url.Content("~/Content/web/Editor/editorStyles.css"))
        )
        .Tools(tools => tools
        .Clear()
        .Bold().Italic().Underline()
        .JustifyLeft().JustifyCenter().JustifyRight()
        .InsertUnorderedList().InsertOrderedList()
        .Outdent().Indent()
        .TableEditing()
        .FontName()
        .FontSize()
        .FontColor().BackColor()
        )

                        
        .Value(@<text>
                <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>
                </p>
                <p>
                    <span style="font-family:Verdana, Geneva, sans-serif;font-size:medium;">
                        <strong>Overview</strong>
                    </span>
                </p>
                <p style="font-size: small;">
                    <strong>Tenerife </strong>is the largest and most populated island of the eight <a href="https://en.wikipedia.org/wiki/Canary_Islands" 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.
                </p>
                <br />
                <img src="@Url.Content("~/content/web/editor/tenerife.png")" style="float: right;" alt="" width="350" height="206" />

                <p>
                    <span style="font-family:Verdana, Geneva, sans-serif;font-size:medium;">
                        <strong>Trip Highlights in Tenerife</strong>
                    </span>
                </p>
                <ul>
                    <li>
                        <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 />
                    </li>
                    <li>
                        <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 />
                    </li>
                    <li>
                        <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 />
                    </li>
                </ul>
                <br />
                <p>
                    <span style="font-family:Verdana, Geneva, sans-serif;font-size:medium;"> <strong> Climate </strong> </span>
                </p>
                <table style="width:100%;height:225px;text-align:center;">
                    <tbody>
                        <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="https://en.wikipedia.org/wiki/Santa_Cruz_de_Tenerife" target="_blank"> Santa Cruz de Tenerife</a></strong>
                            </td>
                        </tr>
                        <tr style="height:9.33333%;">
                            <td style="width:230px;">
                                <span style="font-size:small; color: rgb(46,125,50);"><strong> Month </strong></span>
                            </td>
                            <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>
                        <tr style="height:23%;">
                            <td style="width:230px; color: rgb(46,125,50);">
                                <strong>Daily mean &#176;C (&#176;F)</strong>
                            </td>
                            <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>
                        <tr style="height:23%;">
                            <td style="width:px; color: rgb(46,125,50);">
                                <strong>Average rainy days (&#8805 1.0 mm)</strong>
                            </td>
                            <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>
                        <tr style="height:23%;">
                            <td style="width:230px; color: rgb(46,125,50);">
                                <strong> Mean monthly <a href="https://en.wikipedia.org/wiki/Sunshine_duration" target="_blank"> sunshine hours</a></strong><br />
                            </td>
                            <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>
                        </tr>
                    </tbody>
                </table>
                <p>
                    <em> *The data used in this demo is taken from <a href="https://wikipedia.com" target="_blank"> wikipedia.com </a>.</em> <br />
                    <em> **The displayed photos are sourced from <a href="https://pixabay.com" target="_blank"> pixabay.com </a> </em>
                </p>
    </text>)
)

Key Features

Performance optimized ASP.NET MVC components for any scenario

Enjoy 110+ ASP.NET MVC controls for every need: navigation and layout, data management and visualization, editing, interactivity and more.

Feature rich components for powerful and responsive apps

Develop data-driven web applications using our full-featured UI components such as MVC Grid, Editor, Scheduler and many more. Simple, yet powerful data binding and CRUD operations with multitude of options – EF Core, OData, Web API and SignalR.

Built-In & Customizable Theming  

Apply one of 20+ professionally designed built-in themes or use the Telerik SAAS Theme Builder or Figma Kits to customize and deliver sophisticated applications in no time.

Detailed Documentation, Code Samples & Technical Trainings

Take advantage of the detailed documentation, free technical online trainings and live demos for every UI component to achieve meaningful results in no time.

Award-winning Support from the Minds Behind the Product

Develop your projects with ease knowing our outstanding technical support team will always have your back.

Web Apps Available to Any User Anywhere

Enjoy full support for accessibility standards, RTL support and keyboard navigation for the tech-savvy users & respond to the user's culture to correctly format numbers, dates and helper texts.

m_wave_dblue_downsctn_space_for_btn

110+ ASP.NET MVC Components

Data Management

Scheduling

Editors

Data Visualization

File Upload & Management

Interactivity & UX

Navigation

Layout

Diagramming

Geo Visualization

Document Processing

Media

Forms & Dialogs

See Them in Action

Launch demos

Working with Designers? We Got You Covered!

It's easy to collaborate with your designers using Telerik UI for ASP.NET MVC and the Telerik UI kits for Figma. The highly-customizable, identical components on both sides set you off to a running start to craft your own design system.

“Hi Telerik team working on Kendo UI, we wish to thank you for this awesome superset of products. Out of the box, work great, require tweaking for Web standards. Support is helpful, technically works as advertised.”

Mohammed Al-Mosawi

Manager, Opus

“I very much enjoy using Telerik UI for ASP.NET MVC. It is a huge time saver to not have to code commonly used widgets and write code to support various browsers/devices. Kendo support, documentation and demos have improved greatly over the years.”

Neil Sowers

Programmer, Progresive Intellegence Technologies

“We delivered our first version in nine months—which is unheard of in this industry—because we hired 25 of the best people in the industry and gave them really good tools. Then, we converted 1,900 screens to a new UI in just two weeks. I don’t think we could have met our deadlines if we didn’t have easy to use HTML-based UI toolsets to work with. Telerik was a key component in our success.”

Carl Gideon

Enterprise Architect, AgWorks

“We standardized our development tools using Telerik ASP.NET MVC. The Telerik controls are lightweight and have responsive capabilities, enabling us to easily build apps across multiple devices. They also look awesome across different browsers and the built-in customizable theme feature is the icing on the cake!”

Larry Lindain

Enterprise Architect, Harris School Solutions

“For our recent release of software we implemented Telerik reporting and it has met and exceeded expectations. We started using Telerik because of the reporting but have found an additional major benefit to be the other Telerik tools available.”

Blair Wilkinson

Development Project Lead, CVT (Global) Pty Ltd

“It is a pleasure to work with ASP.NET MVC controls where we receive excellent support and get that sense of an extra member in our team that are able to resolve our most complex issues and questions. I would definitely continue to recommend Telerik to all my colleagues and customers.”

Anton Swanevelder

Managing Director, eSite

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 Avatar Component

New ASP.NET MVC Component: Avatar

Perfect for displaying entities with small photos, custom icons, avatars, or initials in your MVC apps.

Telerik UI for ASP.NET MVC Grid Drag and Drop

Multiple New Data Grid Enhancements

The MVC Grid now supports multi-column sorting, rows drag & drop, non-string fields in Grid’s search panel, and more!

Telerik UI for ASP.NET MVC Editor Undo and Redo Options

New Editor Enhancement: Undo and Redo

The already robust Editor component has been expanded with two new handy built-in commands: Undo & Redo.

More new and planned features

Telerik UI for ASP.NET MVC Support and Learning

command-line
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.

anatomy
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.

Services

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
get-started-waves

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.