ListView EditorTemplates

2 posts, 0 answers
  1. Dekel
    Dekel avatar
    25 posts
    Member since:
    Jan 2015

    Posted 03 May 2015 Link to this post

    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.

     
  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 06 May 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top