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.