ASP.NET Core Template Overview
The Template is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI Template TagHelper and HtmlHelper for ASP.NET Core is an integration component that can be used to customize the default appearance of the other Telerik UI for ASP.NET Core components.
The Template allows you to incorporate multiple helper components into the templating options of components like Data Grid, ListView, TreeList, and others that often require complex layout templates. The created templates are CSP-compatible. Also, each component that is defined within the Template configuration will have all the functionalities and options available in the stand-alone nested component.
Basic Configuration
The Template HtmlHelper provides the following configuration options:
-
AddComponent()specifies the declaration of the Telerik UI helper that will be integrated into the specified component. -
AddHtml()addsHTMLcode to the template. It accepts astringanddelegateparameter arguments.
The delegate overload can only be used with conventional HTML tags and the ASP.NET Core framework's common HtmlHelpers or TagHelpers . To declare Telerik components, use the
AddComponent()configuration.
When using the TagHelper mode of the Template component, you can insert the component declaration and any HTML code within the <{parentTagName}-{templateOption}> tag.
Since the Template is an integration component and cannot be used independently, the following example demonstrates a basic configuration of the Template inside a Grid column template option.
@(Html.Kendo().Grid<OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.OrderID);
columns.Bound(p => p.ShipName)
.ClientTemplate(Html.Kendo().Template()
.AddHtml("<div class='ship-details'>")
.AddComponent(btn => btn
.Button()
.Name("details_${data.OrderID}")
.Content("Details")
.ThemeColor(ThemeColor.Primary)
)
.AddHtml("</div")
);
})
// Other configuration
)
@addTagHelper *, Kendo.Mvc
<kendo-grid name="grid">
<columns>
<column field="OrderID"/>
<column field="ShipName">
<column-template>
<div class="ship-details">
<kendo-button name="details_${data.OrderID}" theme-color="ThemeColor.Primary">
Details
</kendo-button>
</div>
</column-template>
</column>
</columns>
<!--Other configuration-->
</kendo-grid>
Components Integration
You can use the Template component to incorporate any Telerik UI for ASP.NET Core component into the templating options of the following components:
| Component |
|---|
| Grid |
| ListView |
| TaskBoard |
| TreeList |
| Notification |
| Popover |
| TileLayout |
| Tooltip |
| Timeline |
| Gantt |
| Scheduler |
For runnable examples, refer to the demos:
- Integration with Grid
- Integration with ListView
- Integration with TileLayout
- Integration with Scheduler
The components that support editing provide options for custom editors and editing templates. By using the Template component, you can include the desired editors and specify the editor template name through the EditorTemplateName() method.
The examples below show how to use the Template component to create custom editors for Inline and Popup editable Grids.
-
Inline editable Grid
@(Html.Kendo().Grid<OrderViewModel>() .Name("grid") .Columns(columns => { columns.Bound(p => p.ShipName).EditorTemplateComponentName("ShipNameEditor"); columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200); }) .ToolBar(tool => tool.Create()) .Editable(editable => editable.Mode(GridEditMode.InLine)) // Other configuration )//~/Views/Shared/EditorTemplates/ShipNameEditor.cshtml @model object @Html.Kendo().Template().AddComponent(x => x.TextAreaFor(model => model).Rows(3))@addTagHelper *, Kendo.Mvc <kendo-grid name="grid"> <columns> <column field="ShipName"> <column-editor-template> <kendo-textarea name="ShipName" rows="3"> </kendo-textarea> </column-editor-template> </column> <column width="200"> <commands> <column-command text="Edit" name="edit"></column-command> <column-command text="Delete" name="destroy"></column-command> </commands> </column> </columns> <toolbar> <toolbar-button name="create"></toolbar-button> </toolbar> <editable mode="inline"/> <!--Other configuration--> </kendo-grid> -
Popup editable Grid
@(Html.Kendo().Grid<OrderViewModel>() .Name("grid") .Columns(columns => { columns.Bound(p => p.ShipName); columns.Bound(p => p.Freight); columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200); }) .ToolBar(tool => tool.Create()) .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateComponentName("CustomGridEditor")) // Other configuration )//~/Views/Shared/EditorTemplates/CustomGridEditor.cshtml @model OrderViewModel @(Html.Kendo().Template() .AddHtml("<div class=\"k-edit-field\">") .AddComponent(tbox => tbox .TextAreaFor(model => model.ShipName) .Rows(3) .Label(l => l.Content("Ship name: ")) ) .AddHtml("</div>") .AddHtml("<div class=\"k-edit-field\">") .AddComponent(tbox => tbox .NumericTextBoxFor(model => model.Freight).Min(0).Max(100) ) .AddHtml("</div>") )@addTagHelper *, Kendo.Mvc <kendo-grid name="grid"> <columns> <column field="ShipName"></column> <column field="Freight"></column> <column width="200"> <commands> <column-command text="Edit" name="edit"></column-command> <column-command text="Delete" name="destroy"></column-command> </commands> </column> </columns> <toolbar> <toolbar-button name="create"></toolbar-button> </toolbar> <editable mode="popup"> <editable-template> <kendo-textarea name="ShipName" rows="3"> </kendo-textarea> <br/><br/> <kendo-numerictextbox name="Freight" min="0" max="100"> </kendo-numerictextbox> </editable-template> </editable> <!--Other configuration--> </kendo-grid>
Converting Existing Templates to CSP-Compatible Templates
With the help of the Template, you can convert the existing components templates (inline, external, and partial) into CSP-compatible ones.
The following snippet demonstrates defining a template for a Grid column by using an inline client template.
@(Html.Kendo().Grid<OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.ShipName).ClientTemplate("<span style='color:red;'><strong>#=ShipName#</strong></span>");
})
// Other configuration
)
@addTagHelper *, Kendo.Mvc
<kendo-grid name="grid">
<columns>
<column field="ShipName" template="<span style='color:red;'><strong>#=ShipName#</strong></span>">
</column>
</columns>
<!--Other configuration-->
</kendo-grid>
The next snippet shows the new approach for defining a CSP Grid column template through the Template component with a delegate overload.
@(Html.Kendo().Grid<OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.ShipName).ClientTemplate(Html.Kendo()
.Template()
.AddHtml(@<text>
<span style='color:red;'>
<strong>${data.ShipName}</strong>
</span>
</text>)
);
})
// Other configuration
)
@addTagHelper *, Kendo.Mvc
<kendo-grid name="grid">
<columns>
<column field="ShipName">
<column-template>
<span style="color:red;">
<strong>${data.ShipName}</strong>
</span>
</column-template>
</column>
</columns>
<!--Other configuration-->
</kendo-grid>
The examples that follow illustrate another scenario—converting the TaskBoard templates into CSP-compatible templates.
The following snippet demonstrates the previously used approach for defining the templates in the specific scenario.
@(Html.Kendo().TaskBoard<CardViewModel, Resource>()
.Name("taskBoard")
.TemplateId("card-template")
.Editable(editable => editable
.HeaderTemplate("<span style='color: green;'>Custom Task editor template</span>")
)
//Other configuration
)
@addTagHelper *, Kendo.Mvc
<kendo-taskboard name="taskBoard" template-id="card-template">
<editable>
<editable-header-template>
<span style='color: green;'>Custom Task editor template</span>
</editable-header-template>
</editable>
<!--Other configuration-->
</kendo-taskboard>
<script id="card-template" type="text/x-kendo-template">
<div class="template-container">
<div class="template-header" id="#= ID #" >
<span class="template-title">#: Title #</span>
<span class="template-menu">#=cardMenuButton#</span>
</div>
<p>#=Description#</p>
<p>#:kendo.toString(new Date(Start + "Z"), "MMMM dd")# - #:kendo.toString(new Date(End + "Z"), "MMMM dd")#</p>
</div>
</script>
The next snippet shows how to replace the inline client TaskBoard templating options with CSP-compatible templates.
@(Html.Kendo().TaskBoard<CardViewModel, Resource>()
.Name("taskBoard")
.Template(Html.Kendo().Template()
.AddHtml(@<text>
<div class="template-container">
<div class="template-header" id='${data.ID}'>
<span class="template-title">${data.Title}</span>
<span class="template-menu">
${data.cardMenuButton}
</span>
</div>
<p>${data.Description}</p>
<p>
${kendo.toString( new Date(data.Start + "Z"), "MMMM dd")} - ${kendo.toString(new Date(data.End + "Z") , "MMMM dd")}
</p>
</div>
</text>)
)
.Editable(editable => editable
.HeaderTemplate(Html.Kendo().Template()
.AddHtml("<span style='color: green;'>Custom Task editor template</span>")
)
)
// Other configuration
)
@addTagHelper *, Kendo.Mvc
<kendo-taskboard name="taskBoard">
<taskboard-template>
<div class="template-container">
<div class="template-header" id="${data.ID}" >
<span class="template-title">${data.Title}</span>
<span class="template-menu">${data.cardMenuButton}</span>
</div>
<p>${data.Description}</p>
<p>${kendo.toString( new Date(data.Start + "Z"), "MMMM dd")} - ${kendo.toString(new Date(data.End + "Z") , "MMMM dd")}</p>
</div>
</taskboard-template>
<editable>
<editable-header-template>
<span style='color: green;'>Custom Task editor template</span>
</editable-header-template>
</editable>
<!--Other configuration-->
</kendo-taskboard>