Invalid template when adding edit command

[H2e]

Hi.  I have a kendo grid and am adding a detail template.  This all works fine until I add an edit command to the template.  I then get a 
Uncaught Error: Invalid template:'
Error.

I've put in BOLD the line which is causing the error to occur
I've also included the error underneath (apologies for the length)

Any help would be greatly appreciated!!

UPDATE:  Removing 

columns.Bound(Function(p) p.DeviceRuleID)

columns.Bound(Function(p) p.RulePriority)

from the template (these two fields are int32's) causes the error to disappear.  But i need these fields so this isn't fixed..just hopefully narrowed down

@* Kendo Grid control*@

@(Html.Kendo().Grid(Of Models.Device) _

    .Name("Devices") _

    .HtmlAttributes(New With {.style = "width: 100%", .align = "center"}) _

    .Columns(Function(columns)

                     columns.Bound(Function(p) p.deviceTag).Groupable(True).Width(200)

                     columns.Bound(Function(p) p.DeviceEnabled).Groupable(True).Width(200)

                     columns.Bound(Function(p) p.DeviceDescription).Groupable(True).Width(200)

                     columns.Bound(Function(p) p.ViewSuffix).Groupable(True).Width(200)

                     columns.Command(Function(command)

                                             command.Edit()

                                     End Function).Width(200)

             End Function) _

   .ClientDetailTemplateId("DeviceRuleTemplate") _

    .Editable(Function(editable) editable.Mode(GridEditMode.InLine)) _

    .ToolBar(Function(toolbar) toolbar.Create()) _

    .DataSource(Function(dataSource)

               dataSource.Ajax.Events(Function(events) events.Error("error_handler"))

               dataSource.Ajax.Model(Sub(model)

                              model.Id(Function(p) p.ViewSuffix)

                              model.Field(Function(p)   p.ViewSuffix).Editable(False)

                                 End Sub)

               dataSource.Ajax.Create(Function(create) create.Action("Device_Create", "Device"))

               dataSource.Ajax.Read(Function(read) read.Action("Device_Read", "Device"))

               dataSource.Ajax.Update(Function(update) update.Action("Device_Update", "Device"))

               dataSource.Ajax.Destroy(Function(delete) delete.Action("Device_Delete", "Device"))

                End Function)

    )

     

<script id="DeviceRuleTemplate" type="text/kendo-tmpl">

    @(Html.Kendo().Grid(Of Models.DeviceRule) _

    .Name("Rules_#=deviceTag#") _

    .Pageable() _

    .Columns(Function(columns)

                     columns.Bound(Function(p) p.DeviceRuleID)

                     columns.Bound(Function(p) p.ViewSuffix)

                     columns.Bound(Function(p) p.RuleName)

                     columns.Bound(Function(p) p.RulePriority)

                     columns.Bound(Function(p) p.Active)

                     columns.Command(Function(command)

                                         command.Edit()

                                     End Function).Width(200)

             End Function) _

              .DataSource(Function(dataSource)

                           dataSource.Ajax.Read(Function(read) read.Action("DeviceRules_GetForDevice", "Device", New With {.ViewSuffix = "#=ViewSuffix#"}))

                           dataSource.Ajax.Model(Sub(model)

                                      model.Id(Function(p) p.DeviceRuleID)

                                        End Sub)

                           dataSource.Ajax.Create(Function(create) create.Action("DeviceRule_Create", "Device"))

                           dataSource.Ajax.Update(Function(update) update.Action("DeviceRule_Update", "Device"))

                           dataSource.Ajax.Destroy(Function(delete) delete.Action("DeviceRule_Delete", "Device"))

                      End Function) _

 .ToClientTemplate())

</script>

 

 

@*Script for the error handler of the grid*@

<script type="text/javascript">

    function error_handler(e) {

        if (e.errors) {

            var message = "Errors:\n";

            $.each(e.errors, function (key, value) {

                if ('errors' in value) {

                    $.each(value.errors, function () {

                        message += this + "\n";

                    });

                }

            });

            alert(message);

        }

    }

  

</script>

Error

Uncaught Error: Invalid template:'

    <div class="k-widget k-grid" id="Rules_#=deviceTag#"><table cellspacing="0"><colgroup><col /><col /><col /><col /><col /><col style="width:200px" /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="DeviceRuleID" data-title="Device Rule ID" scope="col"><span class="k-link">Device Rule ID</span></th><th class="k-header" data-field="ViewSuffix" data-title="View Suffix" scope="col"><span class="k-link">View Suffix</span></th><th class="k-header" data-field="RuleName" data-title="Rule Name" scope="col"><span class="k-link">Rule Name</span></th><th class="k-header" data-field="RulePriority" data-title="Rule Priority" scope="col"><span class="k-link">Rule Priority</span></th><th class="k-header" data-field="Active" data-title="Active" scope="col"><span class="k-link">Active</span></th><th class="k-header" scope="col"><span class="k-link"> </span></th></tr></thead><tbody><tr class="t-no-data"><td colspan="6"></td></tr></tbody></table><div class="k-pager-wrap k-grid-pager"><a class="k-link k-state-disabled" data-page="1" href="\#" title="Go to the first page"><span class="k-icon k-i-seek-w">seek-w</span></a><a class="k-link k-state-disabled" data-page="0" href="\#" title="Go to the previous page"><span class="k-icon k-i-arrow-w">arrow-w</span></a><ul class="k-pager-numbers k-reset"><li><span class="k-state-selected" data-page="1">1</span></li></ul><a class="k-link k-state-disabled" data-page="2" href="\#" title="Go to the next page"><span class="k-icon k-i-arrow-e">arrow-e</span></a><a class="k-link k-state-disabled" data-page="1" href="\#" title="Go to the last page"><span class="k-icon k-i-seek-e">seek-e</span></a><span class="k-pager-info k-label">No items to display</span></div></div><script>

    jQuery(function(){jQuery("\#Rules_#=deviceTag#").kendoGrid({"columns":[{"title":"Device Rule ID","field":"DeviceRuleID","filterable":{},"encoded":true,"editor":"\u003cdiv class=\"t-widget t-numerictextbox\"\u003e\u003cinput class=\"t-input\" data-val=\"true\" data-val-number=\"The field DeviceRuleID must be a number.\" data-val-required=\"The DeviceRuleID field is required.\" id=\"DeviceRuleID\" name=\"DeviceRuleID\" style=\"width:50%\" type=\"text\" value=\"0\" /\u003e\u003ca class=\"t-link t-icon t-arrow-up\" href=\"#\" tabindex=\"-1\" title=\"Increase value\"\u003eIncrement\u003c/a\u003e\u003ca class=\"t-link t-icon t-arrow-down\" href=\"#\" tabindex=\"-1\" title=\"Decrease value\"\u003eDecrement\u003c/a\u003e\u003c/div\u003e\u003cscript type=\"text/javascript\"\u003e\tjQuery(\u0027#DeviceRuleID\u0027).tTextBox({val:0, step:1, minValue:-2147483648, maxValue:2147483647, digits:0, groupSize:3, negative:1, text:\u0027Enter value\u0027, type:\u0027numeric\u0027});\u003c\\/script\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"DeviceRuleID\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"View Suffix","field":"ViewSuffix","filterable":{},"encoded":true,"editor":"\u003cinput class=\"text-box single-line\" id=\"ViewSuffix\" name=\"ViewSuffix\" type=\"text\" value=\"\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"ViewSuffix\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Rule Name","field":"RuleName","filterable":{},"encoded":true,"editor":"\u003cinput class=\"text-box single-line\" id=\"RuleName\" name=\"RuleName\" type=\"text\" value=\"\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"RuleName\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Rule Priority","field":"RulePriority","filterable":{},"encoded":true,"editor":"\u003cdiv class=\"t-widget t-numerictextbox\"\u003e\u003cinput class=\"t-input\" data-val=\"true\" data-val-number=\"The field RulePriority must be a number.\" data-val-required=\"The RulePriority field is required.\" id=\"RulePriority\" name=\"RulePriority\" style=\"width:50%\" type=\"text\" value=\"0\" /\u003e\u003ca class=\"t-link t-icon t-arrow-up\" href=\"#\" tabindex=\"-1\" title=\"Increase value\"\u003eIncrement\u003c/a\u003e\u003ca class=\"t-link t-icon t-arrow-down\" href=\"#\" tabindex=\"-1\" title=\"Decrease value\"\u003eDecrement\u003c/a\u003e\u003c/div\u003e\u003cscript type=\"text/javascript\"\u003e\tjQuery(\u0027#RulePriority\u0027).tTextBox({val:0, step:1, minValue:-2147483648, maxValue:2147483647, digits:0, groupSize:3, negative:1, text:\u0027Enter value\u0027, type:\u0027numeric\u0027});\u003c\\/script\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"RulePriority\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Active","field":"Active","filterable":{},"encoded":true,"editor":"\u003cinput class=\"check-box\" data-val=\"true\" data-val-required=\"The Active field is required.\" id=\"Active\" name=\"Active\" type=\"checkbox\" value=\"true\" /\u003e\u003cinput name=\"Active\" type=\"hidden\" value=\"false\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Active\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"width":"200px","command":[{"name":"Details","buttonType":"ImageAndText","text":"Details","click":error_handler},{"name":"edit","buttonType":"ImageAndText","text":"Edit"}]}],"pageable":{"buttonCount":10},"scrollable":false,"editable":{"confirmation":"Are you sure you want to delete this item?","mode":"inline","create":true,"update":true,"destroy":true},"dataSource":{"transport":{"prefix":"","read":{"url":"/Manage/Device/DeviceRules_GetForDevice?ViewSuffix=#=ViewSuffix#"},"update":{"url":"/Manage/Device/Device1_Update"},"create":{"url":"/Manage/Device/Device1_Create"},"destroy":{"url":"/Manage/Device/Device1_Delete"}},"pageSize":10,"page":1,"total":0,"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"type":"aspnetmvc-ajax","filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"DeviceRuleID","fields":{"ViewSuffix":{"type":"string"},"DeviceRuleID":{"type":"number"},"RuleName":{"type":"string"},"RulePriority":{"type":"number"},"Active":{"type":"boolean"},"Conditions":{"type":"object"},"deviceTag":{"type":"string"}}}}}});});

<\/script>

' Generated code:'var o,e=kendo.htmlEncode;with(data){o='\n    <div class="k-widget k-grid" id="Rules_'+(deviceTag)+'"><table cellspacing="0"><colgroup><col /><col /><col /><col /><col /><col style="width:200px" /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="DeviceRuleID" data-title="Device Rule ID" scope="col"><span class="k-link">Device Rule ID</span></th><th class="k-header" data-field="ViewSuffix" data-title="View Suffix" scope="col"><span class="k-link">View Suffix</span></th><th class="k-header" data-field="RuleName" data-title="Rule Name" scope="col"><span class="k-link">Rule Name</span></th><th class="k-header" data-field="RulePriority" data-title="Rule Priority" scope="col"><span class="k-link">Rule Priority</span></th><th class="k-header" data-field="Active" data-title="Active" scope="col"><span class="k-link">Active</span></th><th class="k-header" scope="col"><span class="k-link"> </span></th></tr></thead><tbody><tr class="t-no-data"><td colspan="6"></td></tr></tbody></table><div class="k-pager-wrap k-grid-pager"><a class="k-link k-state-disabled" data-page="1" href="#" title="Go to the first page"><span class="k-icon k-i-seek-w">seek-w</span></a><a class="k-link k-state-disabled" data-page="0" href="#" title="Go to the previous page"><span class="k-icon k-i-arrow-w">arrow-w</span></a><ul class="k-pager-numbers k-reset"><li><span class="k-state-selected" data-page="1">1</span></li></ul><a class="k-link k-state-disabled" data-page="2" href="#" title="Go to the next page"><span class="k-icon k-i-arrow-e">arrow-e</span></a><a class="k-link k-state-disabled" data-page="1" href="#" title="Go to the last page"><span class="k-icon k-i-seek-e">seek-e</span></a><span class="k-pager-info k-label">No items to display</span></div></div><script>\n\tjQuery(function(){jQuery("#Rules_'+(deviceTag)+'").kendoGrid({"columns":[{"title":"Device Rule ID","field":"DeviceRuleID","filterable":{},"encoded":true,"editor":"\u003cdiv class=\\\"t-widget t-numerictextbox\\\"\u003e\u003cinput class=\\\"t-input\\\" data-val=\\\"true\\\" data-val-number=\\\"The field DeviceRuleID must be a number.\\\" data-val-required=\\\"The DeviceRuleID field is required.\\\" id=\\\"DeviceRuleID\\\" name=\\\"DeviceRuleID\\\" style=\\\"width:50%\\\" type=\\\"text\\\" value=\\\"0\\\" /\u003e\u003ca class=\\\"t-link t-icon t-arrow-up\\\" href=\\\"';\" tabindex=\"-1\" title=\"Increase value\"\u003eIncrement\u003c/a\u003e\u003ca class=\"t-link t-icon t-arrow-down\" href=\";o+='\\\" tabindex=\\\"-1\\\" title=\\\"Decrease value\\\"\u003eDecrement\u003c/a\u003e\u003c/div\u003e\u003cscript type=\\\"text/javascript\\\"\u003e\tjQuery(\u0027';DeviceRuleID\u0027).tTextBox({val:0, step:1, minValue:-2147483648, maxValue:2147483647, digits:0, groupSize:3, negative:1, text:\u0027Enter value\u0027, type:\u0027numeric\u0027});\u003c\\/script\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"DeviceRuleID\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"View Suffix","field":"ViewSuffix","filterable":{},"encoded":true,"editor":"\u003cinput class=\"text-box single-line\" id=\"ViewSuffix\" name=\"ViewSuffix\" type=\"text\" value=\"\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"ViewSuffix\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Rule Name","field":"RuleName","filterable":{},"encoded":true,"editor":"\u003cinput class=\"text-box single-line\" id=\"RuleName\" name=\"RuleName\" type=\"text\" value=\"\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"RuleName\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Rule Priority","field":"RulePriority","filterable":{},"encoded":true,"editor":"\u003cdiv class=\"t-widget t-numerictextbox\"\u003e\u003cinput class=\"t-input\" data-val=\"true\" data-val-number=\"The field RulePriority must be a number.\" data-val-required=\"The RulePriority field is required.\" id=\"RulePriority\" name=\"RulePriority\" style=\"width:50%\" type=\"text\" value=\"0\" /\u003e\u003ca class=\"t-link t-icon t-arrow-up\" href=\";o+='\\\" tabindex=\\\"-1\\\" title=\\\"Increase value\\\"\u003eIncrement\u003c/a\u003e\u003ca class=\\\"t-link t-icon t-arrow-down\\\" href=\\\"';\" tabindex=\"-1\" title=\"Decrease value\"\u003eDecrement\u003c/a\u003e\u003c/div\u003e\u003cscript type=\"text/javascript\"\u003e\tjQuery(\u0027;o+='RulePriority\u0027).tTextBox({val:0, step:1, minValue:-2147483648, maxValue:2147483647, digits:0, groupSize:3, negative:1, text:\u0027Enter value\u0027, type:\u0027numeric\u0027});\u003c\\/script\u003e\u003cspan class=\\\"field-validation-valid\\\" data-valmsg-for=\\\"RulePriority\\\" data-valmsg-replace=\\\"true\\\"\u003e\u003c/span\u003e"},{"title":"Active","field":"Active","filterable":{},"encoded":true,"editor":"\u003cinput class=\\\"check-box\\\" data-val=\\\"true\\\" data-val-required=\\\"The Active field is required.\\\" id=\\\"Active\\\" name=\\\"Active\\\" type=\\\"checkbox\\\" value=\\\"true\\\" /\u003e\u003cinput name=\\\"Active\\\" type=\\\"hidden\\\" value=\\\"false\\\" /\u003e\u003cspan class=\\\"field-validation-valid\\\" data-valmsg-for=\\\"Active\\\" data-valmsg-replace=\\\"true\\\"\u003e\u003c/span\u003e"},{"width":"200px","command":[{"name":"Details","buttonType":"ImageAndText","text":"Details","click":error_handler},{"name":"edit","buttonType":"ImageAndText","text":"Edit"}]}],"pageable":{"buttonCount":10},"scrollable":false,"editable":{"confirmation":"Are you sure you want to delete this item?","mode":"inline","create":true,"update":true,"destroy":true},"dataSource":{"transport":{"prefix":"","read":{"url":"/Manage/Device/DeviceRules_GetForDevice?ViewSuffix='+(ViewSuffix)+'"},"update":{"url":"/Manage/Device/Device1_Update"},"create":{"url":"/Manage/Device/Device1_Create"},"destroy":{"url":"/Manage/Device/Device1_Delete"}},"pageSize":10,"page":1,"total":0,"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"type":"aspnetmvc-ajax","filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"DeviceRuleID","fields":{"ViewSuffix":{"type":"string"},"DeviceRuleID":{"type":"number"},"RuleName":{"type":"string"},"RulePriority":{"type":"number"},"Active":{"type":"boolean"},"Conditions":{"type":"object"},"deviceTag":{"type":"string"}}}}}});});\n<\/script>\n';}return o;'

[H2e]

I can also mention that I don't have 

<httpRuntime targetFramework="4.5" encoderType="System.Web.Security.AntiXss.AntiXssEncoder, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />

in my web.config file. As some forums claim removing this fixes it.

This issue seems to be related to the javascript files for some reason and I could really do with a solution as it's preventing me from demo-ing it to my superiors.

[Petur Subev]

Hello Tony,

The problem seems to be that the editor templates (numeric textboxes) are not properly escaped. I tried your case on my side but I was unable to reproduce the encoding problem. 
What version do you use? If the latest one, could you share a sample project so we can troubleshoot the issue on our side?

Kind Regards,
Petur Subev
the Telerik team

[H2e]

Thanks for your reply.

Based on your comment I refined my search to look at Editor Templates (this isn't my app as I'm picking it up off my predecessor) and I found an Int32 editor template.  the code in here is 

@ModelType Int32

     

@Imports Telerik.Web.Mvc.UI

 

 @Html.Telerik().IntegerTextBox().Name(ViewData.TemplateInfo.GetFullHtmlFieldName(String.Empty)).InputHtmlAttributes(New With { _

    .style = "width:50%" _

}).MinValue(Integer.MinValue).MaxValue(Integer.MaxValue).Value(Model)

I assume this is messing up the edit field in the grid as removing it fixes the issue.  Is there a way to keep the Editor template without messing up the kendo grid?

Many thanks again

Tony

[Petur Subev]

Hello again Tony,

Could you try and replace these old MVC Extensions editor templates with the new one that ship with Kendo (Kendo equivalent widgets are used inside of them)?

Kind Regards,
Petur Subev
the Telerik team

[H2e]

Brilliant..that did the trick..thanks ever so much!