Window Error: Microsoft JScript runtime error: Invalid template

[Ahmad]

i have a error in window .
my solution:

Person:

@{

    ViewBag.Title = "Index";

}

 

<script src="@Url.Content("~/scripts/models/personModel.js")" type="text/javascript"></script>

<script src="@Url.Content("~/scripts/stores/personStore.js")" type="text/javascript"></script>

<script src="@Url.Content("~/scripts/views/personView.js")" type="text/javascript"></script>

  

<script id="PersonDetail" type="text/x-kendo-template">

    @Html.Partial("PersonDetail")

</script>

 

 <div class="k-rtl">

  

<div id="PersonGrid"></div>

 

</div>

and PersonDetail:

@*

 

@(Html.Kendo().TimePicker()

        .Name("timepicker")

        .Value("10:00 AM")

)

*@

and PersonView.js:

$(function () {

 

 

    $("#PersonGrid").kendoGrid({

        dataSource: personStore,

        height: "600px",

        sortable: {

            mode: "multiple",

            allowUnsort: true

        },

        pageable: true,

         

        //groupable: true,

        scrollable: true,

        selectable: "row",

        filterable: true,

         

 

        columns: [

            { command: [{ name: "edit", text: "edit" }, { name: "destroy", text: "del" }], title: "", width: 150 },

            { field: "FName", title: "First Name", width: 50  },

            { field: "LName", title: "Last Name", width: 100 }

 

        ],

   

        editable: { mode: "popup",confirmation: "Are you sure?", template: kendo.template($("#PersonDetail").html()) },

         

         

        edit: function (e) {

            var title = $(e.container).parent().find(".k-window-title");

            var update = $(e.container).parent().find(".k-grid-update");

            var cancel = $(e.container).parent().find(".k-grid-cancel");

 

            $(title).html('<div>Edit</div>');

            $(update).html('<span class="k-icon k-update"></span>Save');

            $(cancel).html('<span class="k-icon k-cancel"></span>Cancel');

        }, 

        toolbar: [{ name: "create", text: "Add"}]

    });

});

after click edit button in grid, i see this error:

Microsoft JScript runtime error: Invalid template:'

if remove this

@(Html.Kendo().TimePicker()

        .Name("timepicker")

        .Value("10:00 AM")

)

in persiondetail is working!

please help me.

[Alex Gyoshev]

Hello Ahmad,

The issue is most probably caused by the TimePicker server-side helper, which inserts a <script> tag with the timepicker initialization code. This in turn is inserted in the template, and nesting <script> tags is invalid markup.

A way to resolve this is to use the MVVM widget binding, like this:

<script id="PersonDetail" type="text/x-kendo-template">
    <input data-role="timepicker" value="10:00 AM" />
</script>

Kind regards,
Alex Gyoshev
the Telerik team