@(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) {
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>)
)
