This is a migrated thread and some comments may be shown as answers.

Window Error: Microsoft JScript runtime error: Invalid template

1 Answer 77 Views
Window
This is a migrated thread and some comments may be shown as answers.
Ahmad
Top achievements
Rank 1
Ahmad asked on 22 Dec 2012, 12:20 PM
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.

1 Answer, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 24 Dec 2012, 12:04 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Window
Asked by
Ahmad
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Share this question
or