ASP.NET MVC Template Overview

The Telerik UI Template HtmlHelper for ASP.NET MVC is an integration component that can be used to customize the default appearance of the other Telerik UI for ASP.NET MVC 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.

• Demo page for the Template HtmlHelper

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() adds HTML code to the template. It accepts a string and delegate parameter arguments.

The delegate overload can only be used with conventional HTML tags and the ASP.NET MVC framework's common HtmlHelpers . To declare Telerik components, use the AddComponent() configuration.

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.

Razor

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

Components Integration

You can use the Template component to incorporate any Telerik UI for ASP.NET MVC 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

  Razor

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

  ShipNameEditor.cshtml

      //~/Views/Shared/EditorTemplates/ShipNameEditor.cshtml
      @model object 
  
      @Html.Kendo().Template().AddComponent(x => x.TextAreaFor(model => model).Rows(3))
  

• Popup editable Grid

  Razor

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

  CustomGridEditor.cshtml

      //~/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>")
      )

The following example demonstrates how to create a Content Security Policy (CSP)-compatible template with a conditional statement in a Grid column.

Razor

    @(Html.Kendo().Grid<OrderViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.IsActive).ClientTemplateHandler("handler");
        })
        // Other configuration
    )

scripts.js

    function handler(data) {
        if (data.IsActive) {
            return '<div><b>Active order</b></div>'
        } else {
            return `<div>${data.ShipName} is already shipped</div>`;
        }
    }

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.

Razor

    @(Html.Kendo().Grid<OrderViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ShipName).ClientTemplate("<span style='color:red;'><strong>#=ShipName#</strong></span>");
        })
        // Other configuration
    )

The next snippet shows the new approach for defining a CSP Grid column template through the Template component with a delegate overload.

Razor

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

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.

Razor

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

card-template

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

Razor

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

See Also

• Basic Usage of the Template (Demo)
• Content Security Policy
• Knowledge Base Section
• Server-Side API