Hi,
We try to use
Kendo cascading drop down list inside MVC editor template that will be used as
editable template for Kendo list view and we get invalid template error.
1.
MenuLineViewModel use Kendo list view which will go to
MenuLineNestedViewModel.cshtml because of the editable().
2.
MenuLineNestedViewModel.cshtml build our edit template
with the help of TgLinkViewModel.cshtml for @Html.EditorFor(x => newModel,
"TgLinkViewModel").
3.
TgLinkViewModel.cshtml use Kendo cascading drop down
list.
At the end we
are getting the following error:
Uncaught Error: Invalid template:'<div
id="nested-view" class="k-widget">
<input type="hidden" name="ParentId"
class="parentId" value="#:ParentId#"
/> <input type="hidden"
name="SortOrder" class="sortOrder"
value="#:SortOrder#" />
<span> <label
for="Text">Text</label>
<input class="k-textbox" data-val="true"
data-val-maxlength="Name cannot be longer than 30 characters."
data-val-maxlength-max="30" data-val-required="*"
id="Text" name="Text" type="text"
value="" /> <span
class="field-validation-valid" data-valmsg-for="Text"
data-valmsg-replace="true"></span>
</span>
<span> <label
for="IsHighlight">Highlight</label>
<input data-val="true" data-val-required="The Highlight field
is required." id="IsHighlight" name="IsHighlight"
type="checkbox" value="true" /><input
name="IsHighlight" type="hidden" value="false"
/> </span> <label for="EntityTypeId">Link</label>
<span>tttt</span>
<span> <input
data-val="true" data-val-number="The field ComponentId must be a
number." data-val-required="The ComponentId field is required."
id="newModel_ComponentId" name="newModel.ComponentId" type="hidden"
value="0" /><label
for="newModel_EntityTypeId">Link</label><input
data-val="true" data-val-required="The Link field is
required." id="newModel_EntityTypeId" name="newModel.EntityTypeId"
type="text"
/><script>
jQuery(function(){jQuery("\#newModel_EntityTypeId").kendoDropDownList({"dataSource":[{"Text":"Spacing","Value":"1"},{"Text":"Article","Value":"2"},{"Text":"Product","Value":"3"},{"Text":"Categories","Value":"4"}],"dataTextField":"Text","dataValueField":"Value","optionLabel":"Select"});});</script><span
class="field-validation-valid"
data-valmsg-for="newModel.EntityTypeId"
data-valmsg-replace="true"></span><input
data-val="true" data-val-number="The field EntityId must be a
number." disabled="disabled" id="newModel_EntityId" name="newModel.EntityId"
type="text"
/><script>
jQuery(function(){jQuery("\#newModel_EntityId").kendoDropDownList({"dataSource":{"transport":{"read":{"url":"/AjaxGlobal/GetEntitiesForDropDownAsync","data":function()
{ return {entityTypeId: $('#newModel_EntityTypeId').val(), entityId:
''};}},"prefix":""},"serverFiltering":true,"filter":[],"schema":{"errors":"Errors"}},"dataTextField":"Text","autoBind":false,"dataValueField":"Value","optionLabel":"Select...","cascadeFrom":"newModel_EntityTypeId"});});</script><span
class="field-validation-valid"
data-valmsg-for="newModel.EntityId"
data-valmsg-replace="true"></span>
</span> <span
class="edit-buttons">
<a class="k-button k-update-button"
href="\\#"><span class="k-icon k-update"></span></a>
<a class="k-button k-cancel-button"
href="\\#"><span class="k-icon
k-cancel"></span></a>
</span></div>' Generated code:'var $kendoOutput, $kendoHtmlEncode =
kendo.htmlEncode;with(data){$kendoOutput='<div id="nested-view"
class="k-widget"> <input
type="hidden" name="ParentId" class="parentId"
value="'+$kendoHtmlEncode(ParentId)+'" />
<input type="hidden" name="SortOrder" class="sortOrder"
value="'+$kendoHtmlEncode(SortOrder)+'" />
<span> <label
for="Text">Text</label>
<input class="k-textbox" data-val="true"
data-val-maxlength="Name cannot be longer than 30 characters."
data-val-maxlength-max="30" data-val-required="*"
id="Text" name="Text" type="text"
value="" /> <span
class="field-validation-valid" data-valmsg-for="Text"
data-valmsg-replace="true"></span>
</span>
<span> <label
for="IsHighlight">Highlight</label>
<input data-val="true" data-val-required="The Highlight field
is required." id="IsHighlight" name="IsHighlight"
type="checkbox" value="true" /><input
name="IsHighlight" type="hidden" value="false"
/> </span> <label
for="EntityTypeId">Link</label> <span>tttt</span>
<span> <input
data-val="true" data-val-number="The field ComponentId must be a
number." data-val-required="The ComponentId field is required."
id="newModel_ComponentId" name="newModel.ComponentId"
type="hidden" value="0" /><label
for="newModel_EntityTypeId">Link</label><input data-val="true"
data-val-required="The Link field is required." id="newModel_EntityTypeId"
name="newModel.EntityTypeId" type="text"
/><script>\tjQuery(function(){jQuery("#newModel_EntityTypeId").kendoDropDownList({"dataSource":[{"Text":"Spacing","Value":"1"},{"Text":"Article","Value":"2"},{"Text":"Product","Value":"3"},{"Text":"Categories","Value":"4"}],"dataTextField":"Text","dataValueField":"Value","optionLabel":"Select"});});</script><span
class="field-validation-valid" data-valmsg-for="newModel.EntityTypeId"
data-valmsg-replace="true"></span><input
data-val="true" data-val-number="The field EntityId must be a
number." disabled="disabled" id="newModel_EntityId"
name="newModel.EntityId" type="text"
/><script>\tjQuery(function(){jQuery("#newModel_EntityId").kendoDropDownList({"dataSource":{"transport":{"read":{"url":"/AjaxGlobal/GetEntitiesForDropDownAsync","data":function()
{ return {entityTypeId: $(\'';newModel_EntityTypeId').val(), entityId:
''};}},"prefix":""},"serverFiltering":true,"filter":[],"schema":{"errors":"Errors"}},"dataTextField":"Text","autoBind":false,"dataValueField":"Value","optionLabel":"Select...","cascadeFrom":"newModel_EntityTypeId"});});</script><span
class="field-validation-valid"
data-valmsg-for="newModel.EntityId" data-valmsg-replace="true"></span>
</span> <span
class="edit-buttons">
<a class="k-button k-update-button"
href="\#"><span class="k-icon
k-update"></span></a>
<a class="k-button k-cancel-button"
href="\#"><span class="k-icon
k-cancel"></span></a>
</span></div>;$kendoOutput+=;}return $kendoOutput;'E.compile @
kendo.all.min.js:9b.isFunction.i @
jquery.min.js:3n.ui.DataBoundWidget.extend._templates @
kendo.all.min.js:32n.ui.DataBoundWidget.extend.init @
kendo.all.min.js:32(anonymous function) @ kendo.all.min.js:10b.extend.each @
jquery.min.js:3b.fn.b.each @ jquery.min.js:3e.fn.(anonymous function) @
kendo.all.min.js:10(anonymous function) @ VM37854:2c @ jquery.min.js:3p.add @
jquery.min.js:3b.fn.b.ready @ jquery.min.js:3b.fn.b.init @ jquery.min.js:3b @
jquery.min.js:3(anonymous function) @ VM37854:2(anonymous function) @ jquery.min.js:3b.extend.globalEval
@ jquery.min.js:3b.fn.extend.domManip @ jquery.min.js:4b.fn.extend.append @
jquery.min.js:4(anonymous function) @ jquery.min.js:4b.extend.access @
jquery.min.js:3b.fn.extend.html @ jquery.min.js:4$.ajax.success @
layout_mobile.navigation.js:25c @ jquery.min.js:3p.fireWith @ jquery.min.js:3k
@ jquery.min.js:5send.r @ jquery.min.js:5
Our thoughts
are that its related to the jQuery / javascript that Kendo MVC add when
creating Kendo controls.
You can see
that its being added inside the cascading drop down list and maybe this is what
prevent the list view use this template as editable template.
We try to use
Kendo cascading drop down list inside MVC editor template that will be used as
editable template for Kendo list view and we get invalid template error.
1.
MenuLineViewModel use Kendo list view which will go to
MenuLineNestedViewModel.cshtml because of the editable().
2.
MenuLineNestedViewModel.cshtml build our edit template
with the help of TgLinkViewModel.cshtml for @Html.EditorFor(x => newModel,
"TgLinkViewModel").
3.
TgLinkViewModel.cshtml use Kendo cascading drop down
list.
At the end we
are getting the following error:
Uncaught Error: Invalid template:'<div
id="nested-view" class="k-widget">
<input type="hidden" name="ParentId"
class="parentId" value="#:ParentId#"
/> <input type="hidden"
name="SortOrder" class="sortOrder"
value="#:SortOrder#" />
<span> <label
for="Text">Text</label>
<input class="k-textbox" data-val="true"
data-val-maxlength="Name cannot be longer than 30 characters."
data-val-maxlength-max="30" data-val-required="*"
id="Text" name="Text" type="text"
value="" /> <span
class="field-validation-valid" data-valmsg-for="Text"
data-valmsg-replace="true"></span>
</span>
<span> <label
for="IsHighlight">Highlight</label>
<input data-val="true" data-val-required="The Highlight field
is required." id="IsHighlight" name="IsHighlight"
type="checkbox" value="true" /><input
name="IsHighlight" type="hidden" value="false"
/> </span> <label for="EntityTypeId">Link</label>
<span>tttt</span>
<span> <input
data-val="true" data-val-number="The field ComponentId must be a
number." data-val-required="The ComponentId field is required."
id="newModel_ComponentId" name="newModel.ComponentId" type="hidden"
value="0" /><label
for="newModel_EntityTypeId">Link</label><input
data-val="true" data-val-required="The Link field is
required." id="newModel_EntityTypeId" name="newModel.EntityTypeId"
type="text"
/><script>
jQuery(function(){jQuery("\#newModel_EntityTypeId").kendoDropDownList({"dataSource":[{"Text":"Spacing","Value":"1"},{"Text":"Article","Value":"2"},{"Text":"Product","Value":"3"},{"Text":"Categories","Value":"4"}],"dataTextField":"Text","dataValueField":"Value","optionLabel":"Select"});});</script><span
class="field-validation-valid"
data-valmsg-for="newModel.EntityTypeId"
data-valmsg-replace="true"></span><input
data-val="true" data-val-number="The field EntityId must be a
number." disabled="disabled" id="newModel_EntityId" name="newModel.EntityId"
type="text"
/><script>
jQuery(function(){jQuery("\#newModel_EntityId").kendoDropDownList({"dataSource":{"transport":{"read":{"url":"/AjaxGlobal/GetEntitiesForDropDownAsync","data":function()
{ return {entityTypeId: $('#newModel_EntityTypeId').val(), entityId:
''};}},"prefix":""},"serverFiltering":true,"filter":[],"schema":{"errors":"Errors"}},"dataTextField":"Text","autoBind":false,"dataValueField":"Value","optionLabel":"Select...","cascadeFrom":"newModel_EntityTypeId"});});</script><span
class="field-validation-valid"
data-valmsg-for="newModel.EntityId"
data-valmsg-replace="true"></span>
</span> <span
class="edit-buttons">
<a class="k-button k-update-button"
href="\\#"><span class="k-icon k-update"></span></a>
<a class="k-button k-cancel-button"
href="\\#"><span class="k-icon
k-cancel"></span></a>
</span></div>' Generated code:'var $kendoOutput, $kendoHtmlEncode =
kendo.htmlEncode;with(data){$kendoOutput='<div id="nested-view"
class="k-widget"> <input
type="hidden" name="ParentId" class="parentId"
value="'+$kendoHtmlEncode(ParentId)+'" />
<input type="hidden" name="SortOrder" class="sortOrder"
value="'+$kendoHtmlEncode(SortOrder)+'" />
<span> <label
for="Text">Text</label>
<input class="k-textbox" data-val="true"
data-val-maxlength="Name cannot be longer than 30 characters."
data-val-maxlength-max="30" data-val-required="*"
id="Text" name="Text" type="text"
value="" /> <span
class="field-validation-valid" data-valmsg-for="Text"
data-valmsg-replace="true"></span>
</span>
<span> <label
for="IsHighlight">Highlight</label>
<input data-val="true" data-val-required="The Highlight field
is required." id="IsHighlight" name="IsHighlight"
type="checkbox" value="true" /><input
name="IsHighlight" type="hidden" value="false"
/> </span> <label
for="EntityTypeId">Link</label> <span>tttt</span>
<span> <input
data-val="true" data-val-number="The field ComponentId must be a
number." data-val-required="The ComponentId field is required."
id="newModel_ComponentId" name="newModel.ComponentId"
type="hidden" value="0" /><label
for="newModel_EntityTypeId">Link</label><input data-val="true"
data-val-required="The Link field is required." id="newModel_EntityTypeId"
name="newModel.EntityTypeId" type="text"
/><script>\tjQuery(function(){jQuery("#newModel_EntityTypeId").kendoDropDownList({"dataSource":[{"Text":"Spacing","Value":"1"},{"Text":"Article","Value":"2"},{"Text":"Product","Value":"3"},{"Text":"Categories","Value":"4"}],"dataTextField":"Text","dataValueField":"Value","optionLabel":"Select"});});</script><span
class="field-validation-valid" data-valmsg-for="newModel.EntityTypeId"
data-valmsg-replace="true"></span><input
data-val="true" data-val-number="The field EntityId must be a
number." disabled="disabled" id="newModel_EntityId"
name="newModel.EntityId" type="text"
/><script>\tjQuery(function(){jQuery("#newModel_EntityId").kendoDropDownList({"dataSource":{"transport":{"read":{"url":"/AjaxGlobal/GetEntitiesForDropDownAsync","data":function()
{ return {entityTypeId: $(\'';newModel_EntityTypeId').val(), entityId:
''};}},"prefix":""},"serverFiltering":true,"filter":[],"schema":{"errors":"Errors"}},"dataTextField":"Text","autoBind":false,"dataValueField":"Value","optionLabel":"Select...","cascadeFrom":"newModel_EntityTypeId"});});</script><span
class="field-validation-valid"
data-valmsg-for="newModel.EntityId" data-valmsg-replace="true"></span>
</span> <span
class="edit-buttons">
<a class="k-button k-update-button"
href="\#"><span class="k-icon
k-update"></span></a>
<a class="k-button k-cancel-button"
href="\#"><span class="k-icon
k-cancel"></span></a>
</span></div>;$kendoOutput+=;}return $kendoOutput;'E.compile @
kendo.all.min.js:9b.isFunction.i @
jquery.min.js:3n.ui.DataBoundWidget.extend._templates @
kendo.all.min.js:32n.ui.DataBoundWidget.extend.init @
kendo.all.min.js:32(anonymous function) @ kendo.all.min.js:10b.extend.each @
jquery.min.js:3b.fn.b.each @ jquery.min.js:3e.fn.(anonymous function) @
kendo.all.min.js:10(anonymous function) @ VM37854:2c @ jquery.min.js:3p.add @
jquery.min.js:3b.fn.b.ready @ jquery.min.js:3b.fn.b.init @ jquery.min.js:3b @
jquery.min.js:3(anonymous function) @ VM37854:2(anonymous function) @ jquery.min.js:3b.extend.globalEval
@ jquery.min.js:3b.fn.extend.domManip @ jquery.min.js:4b.fn.extend.append @
jquery.min.js:4(anonymous function) @ jquery.min.js:4b.extend.access @
jquery.min.js:3b.fn.extend.html @ jquery.min.js:4$.ajax.success @
layout_mobile.navigation.js:25c @ jquery.min.js:3p.fireWith @ jquery.min.js:3k
@ jquery.min.js:5send.r @ jquery.min.js:5
Our thoughts
are that its related to the jQuery / javascript that Kendo MVC add when
creating Kendo controls.
You can see
that its being added inside the cascading drop down list and maybe this is what
prevent the list view use this template as editable template.
1 Answer, 1 is accepted
0
Hello Dekel,
By looking at the provided information I suspect that the error is caused by having unescaped hash symbols in the editor templates. In the MenuLineNestedViewModel, there are two hidden elements which values has unescaped template expressions and in the nested TgListViewModel there is one hash in the Data function. Escaping them by adding two backslashes ( as already done for the link buttons in the edit template) should fix the error you have described.
Regards,
Rosen
Telerik
By looking at the provided information I suspect that the error is caused by having unescaped hash symbols in the editor templates. In the MenuLineNestedViewModel, there are two hidden elements which values has unescaped template expressions and in the nested TgListViewModel there is one hash in the Data function. Escaping them by adding two backslashes ( as already done for the link buttons in the edit template) should fix the error you have described.
Regards,
Rosen
Telerik
See What's Next in App Development. Register for TelerikNEXT.