Including custom HTML in Form

[Chris]

Hi

I have a form component, and ideally I'd like to embed some custom HTML within it alongside one of the fields.

For example pseudo code for if this sort of thing was possible :

items.Add()
.Field(f => f.Task.StartDate)
.Label(l => l.Text("Call Date"))
.Editor(e =>
{
	e.DateTimePicker()
	.Size(ComponentSize.Small)
	.Format("{0:dd/MM/yyyy HH:mm}")
	.Min(DateTime.Now)
	.DateInput();
});

items.Add()
.ClientTemplate(<ul><li><a href="test1">A Link</a></li><li><a href="test2">Another Link</a></li></ul>);

How do I achieve injecting my own HTML into the form layout please?

[Mihaela]

Hello Chris,

You can insert custom HTML along with the field's editor as per any of the following approaches:

• Use the EditorTemplateId() option to set the desired editor:

items.Add()
.Field(f => f.Task.StartDate)
.Label(l => l.Text("Call Date"))
.EditorTemplateId("dtpEditor");

<script type="text/x-kendo-template" id="dtpEditor">
  <ul><li><a href="test1">A Link</a></li><li><a href="test2">Another Link</a></li></ul>
  @(Html.Kendo().DateTimePicker()
        .Name("Task.StartDate")
	.Size(ComponentSize.Small)
	.Format("{0:dd/MM/yyyy HH:mm}")
	.Min(DateTime.Now)
	.DateInput();
   )
</script>

• Use the EditorTemplateView() option to insert the editor and the HTML through a Partial View:

items.Add()
.Field(f => f.Task.StartDate)
.Label(l => l.Text("Call Date"))
.EditorTemplateView(Html.Partial("_FormEditor"));

//~Views/Home/_FormEditor.cshtml
@{
    Layout = null;
}
<ul><li><a href="test1">A Link</a></li><li><a href="test2">Another Link</a></li></ul>
@(Html.Kendo().DateTimePicker()
        .Name("Task.StartDate")
        .HtmlAttributes(new { id = "Task_StartDate"})
	.Size(ComponentSize.Small)
	.Format("{0:dd/MM/yyyy HH:mm}")
	.Min(DateTime.Now)
	.DateInput();
)

Regards,
Mihaela
Progress Telerik

[Chris]

Many thanks - I have used the EditorTemplateId option.