Click the
Share icon
Copy the URL of the snippet and paste it wherever you need
Or choose a social network from the list to share the snippet directly there
Share code snippets from Visual Studio & Visual Studio Code
We are using Microsoft's Monaco Editor (https://microsoft.github.io/monaco-editor/). It is the code editor that powers VS Code. You can access its Command Palette by focusing on the editor and clicking the F1 button on your keyboard. You will see the list of all available commands. You can use the commands' shortcuts too.
Some of the most commonly used commands are:
If you want to dig a little deeper into Monaco Editor's features, you can do so here (https://code.visualstudio.com/docs/editor/editingevolved).
Simple example showing simple HTML button:
<button>Hello World</button>
@{ var quote = "The future depends on what you do today. - Mahatma Gandhi"; }
<p>@quote</p>
@{ quote = "Hate cannot drive out hate, only love can do that. - Martin Luther King, Jr."; }
<p>@quote</p>
@{
void RenderName(string name)
{
<p>Name: <strong>@name</strong></p>
}
RenderName("Mahatma Gandhi");
RenderName("Martin Luther King, Jr.");
}
@using Microsoft.AspNetCore.Html @functions { public class Pet { public string Name { get; set; } } public static IHtmlContent Repeat(IEnumerable<dynamic> items, int times, Func<dynamic, IHtmlContent> template) { var html = new HtmlContentBuilder(); foreach (var item in items) { for (var i = 0; i < times; i++) { html.AppendHtml(template(item)); } } return html; } } @{ var pets = new List<Pet> { new Pet { Name = "Rin Tin Tin" }, new Pet { Name = "Mr. Bigglesworth" }, new Pet { Name = "K-9" } }; }
<ul> @Repeat(pets, 3, @<li>@item.Name</li>) </ul>
@(Html.Kendo().Grid<ProductViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice).Width(100);
columns.Bound(p => p.UnitsInStock).Width(100);
columns.Bound(p => p.Discontinued).Width(100);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(model => model.Id(p => p.ProductID))
.Create(update => update.Action("EditingInline_Create", "Home"))
.Read(read => read.Action("EditingInline_Read", "Home"))
.Update(update => update.Action("EditingInline_Update", "Home"))
.Destroy(update => update.Action("EditingInline_Destroy", "Home"))
)
)
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(e => e.FirstName).Width(110);
columns.Bound(e => e.LastName).Width(110);
columns.Bound(e => e.Country).Width(110);
})
.Sortable()
.Pageable()
.Scrollable()
.HtmlAttributes(new { style = "height:350px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(7)
.Read(read => read.Action("HierarchyBinding_Employees", "Grid"))
)
)
@(Html.Kendo().Editor()
.Name("editor")
.HtmlAttributes(new { style = "width: 100%; height:300px"})
.Tools(tools => tools
.Clear()
.Bold().Italic().Underline().Strikethrough()
.JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
.InsertUnorderedList().InsertOrderedList().InsertUpperRomanList().InsertLowerRomanList()
.Outdent().Indent()
.CreateLink().Unlink()
.InsertImage()
.InsertFile()
.SubScript()
.SuperScript()
.TableEditing()
.ViewHtml()
.Formatting()
.CleanFormatting()
.FormatPainter()
.FontName()
.FontSize()
.ForeColor().BackColor()
.Print()
)
)
@addTagHelper *, Kendo.Mvc
<kendo-datasource name="dataSource1" type="DataSourceTagHelperType.Ajax" server-operation="false" page-size="10">
<schema>
<model id="ProductID">
<fields>
<field name="ProductID" type="number"></field>
<field name="ProductName" type="string"></field>
<field name="LastSupply" type="date"></field>
<field name="UnitPrice" type="number"></field>
<field name="UnitsInStock" type="number"></field>
<field name="Discontinued" type="bool"></field>
<field name="UnitsOnOrder" type="number"></field>
</fields>
</model>
</schema>
<transport>
<read url="@Url.Action("TagHelper_Products_Read", "DataSource")" />
</transport>
</kendo-datasource>
@(Html.Kendo().DropDownList()
.Name("products")
.HtmlAttributes(new { style = "width:100%" })
.OptionLabel("Select product...")
.DataTextField("ProductName")
.DataValueField("ProductID")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("RemoteDataSource_GetProducts", "DropDownList");
});
})
.Events(ev => ev.Change("onProductSelect"))
)
@using Kendo.Mvc
@functions {
public class UserViewModel {
public int ID { get; set; }
public string Name { get; set; }
public string Address { get; set; }
public string Phone { get; set; }
}
}
@{
UserViewModel user = new UserViewModel()
{
ID = 100,
Name = "John Smith",
Address = "4836 Lake Forest Drive, NY",
Phone = "1254 125 458"
};
}
@functions {
public class UserViewModel {
public string ID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string BackgroundColor { get; set; }
}
}
@{
var attendees = new List<UserViewModel>
{
new UserViewModel(){ ID = "1", FirstName = "Steven", LastName = "White", BackgroundColor = "#1EBEDC" },
new UserViewModel(){ ID = "2", FirstName = "Nancy", LastName = "King", BackgroundColor = "#1EDCA1" },
new UserViewModel(){ ID = "3", FirstName = "Nancy", LastName = "Davolio", BackgroundColor = "#2ADC1E" },
new UserViewModel(){ ID = "4", FirstName = "Michael", LastName = "Leverling", BackgroundColor = "#E4EA08" },
new UserViewModel(){ ID = "5", FirstName = "Andrew", LastName = "Callahan", BackgroundColor = "#EA8608" },
new UserViewModel(){ ID = "6", FirstName = "Michael", LastName = "Suyama", BackgroundColor = "#EF8CE4" }
};
}
@(Html.Kendo().ComboBox()
.Name("chartType")
.DataTextField("Text")
.DataValueField("Value")
.SelectedIndex(0)
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "Column", Value = "1"
},
new SelectListItem() {
Text = "Line", Value = "2"
},
new SelectListItem() {
Text = "Bar", Value = "3"
}
})
.Events(ev => ev.Change("onChangeType"))
)
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice);
columns.Bound(p => p.UnitsInStock)
.ClientTemplate("<span class='units-container'>#=UnitsInStock#</span>");
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(model => model.Id(p => p.ProductID))
.Read(read => read.Action("EditingInline_Read", "Grid"))
.Update(update => update.Action("EditingInline_Update", "Grid"))
.Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
)
)
Telerik UI for ASP.NET Core helps you deliver high-quality projects faster while enhancing and growing your business. Benefit from over а 110+ full-featured ASP.NET Core UI components and tons of customization options to ensure high-performance and sleek UI that covers any app scenario. Hit the ground running with our extensive demos, documentation, online technical training and outstanding support.