Deliver high-quality apps in the quickest timeframe using the 110+ ASP.NET MVC UI components that cover any use case scenario.
NEW
*Includes access to online technical training to speed-up your onboarding.
Telerik has won Best Feature Set and Best Customer Support.
Progress Telerik UI has earned TrustRadius’ Top Rated Award for Software Components and .NET Development.
@(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 <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 °C (°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 (≥ 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>) )
Responsive and adaptive HTML5 Grid with multiple features like customizable and sortable columns, data editing, selection, filtering, grouping capabilities and much more!
More about GridPlan and schedule project start and end dates, visualize task progress, dependencies, milestones and more!
More about GanttAdd predefined CSS classes or create your own custom tools, buttons, dropdowns, and dialogs with the MS Word-like ASP.NET MVC Editor component!
More about EditorDrag and rearrange your dashboard to fit your specific preferences. Control the rows, columns, and content of your layout, and let your users store their preferred setup.
More about TileLayoutEnjoy 110+ ASP.NET MVC controls for every need: navigation and layout, data management and visualization, editing, interactivity and more.
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.
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.
Take advantage of the detailed documentation, free technical online trainings and live demos for every UI component to achieve meaningful results in no time.
Develop your projects with ease knowing our outstanding technical support team will always have your back.
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.
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.
Telerik UI for ASP.NET MVC now features a new UI component: CircularProgressBar.
Telerik UI for ASP.NET MVC now presents a new UI component: ColorGradient.
New Telerik UI for ASP.NET MVC Component: FlatColorPicker.
This whitepaper provides insight into how modern development platforms cater to application development through CLI—for web, desktop and mobile channels.
This whitepaper will walk you through the must-know responsive web practices to help you succeed in building apps for any screen size.
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 supportNo 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