Kendo Datepicker inside Kendo Grid Tabstrip - Invalid Template

Question

I'm experiencing a problem with the Kendo Datepicker inside the Kendo Tabstrip. Below is my code. At runtime I get a "Error: Invalid template:" error. Any ideas as to how to go about getting this to work?

<script id="EditDevelopmentPlanTemplate" type="text/kendo-tmpl">
@(Html.Kendo().TabStrip()
    .Name("EditDevelopmentPlanTabStrip")
    .SelectedIndex(0)
    .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
    .Items(items =>
    {
        items.Add().Text("Quarterly Meeting Notes").Content(@<text>
            <div class="editor-label">
                @Html.LabelFor(m => m.EDP_Q1MeetingNotes, new { style = "width:470px" })
            </div>
            <div class="editor-field">
                @Html.TextAreaFor(m => m.EDP_Q1MeetingNotes, new { style = "width: 470px" })
            </div>
            <div class="editor-label">
                @Html.LabelFor(m => m.EDP_Q1MeetingDate)
            </div>
            <div class="editor-label">
                @Html.Kendo().DatePickerFor(m => m.EDP_Q1MeetingDate)
            </div>
            <div class="editor-label">
                @Html.LabelFor(m => m.EDP_Q2MeetingNotes, new { style = "width:470px" })
            </div>
            <div class="editor-field">
                @Html.TextAreaFor(m => m.EDP_Q2MeetingNotes, new { style = "width: 470px" })
            </div>
            <div class="editor-label">
                @Html.LabelFor(m => m.EDP_Q2MeetingDate)
            </div>
            <div class="editor-label">
                @Html.LabelFor(m => m.EDP_Q3MeetingNotes, new { style = "width:470px" })
            </div>
            <div class="editor-field">
                @Html.TextAreaFor(m => m.EDP_Q3MeetingNotes, new { style = "width: 470px" })
            </div>
            <div class="editor-label">
                @Html.LabelFor(m => m.EDP_Q3MeetingDate)
            </div>
            <div class="editor-label">
                @Html.LabelFor(m => m.EDP_Q4MeetingNotes, new { style = "width:470px" })
            </div>
            <div class="editor-field">
                @Html.TextAreaFor(m => m.EDP_Q4MeetingNotes, new { style = "width: 470px" })
            </div>
            <div class="editor-label">
                @Html.LabelFor(m => m.EDP_Q4MeetingDate)
            </div>
        </text>);
    }).ToClientTemplate())
</script>                    

Answer 1

Okay, so for anyone out there that may come across this, the }).ToClientTemplate()) at the end of the script doesn't cut it. In order to get the DateTimePicker control to work with the template you have to add .ToClientTemplate() at the end of the DateTimePicker declaration like so:

@Html.Kendo().DatePickerFor(m => m.Date).ToClientTemplate()