asking for invalid template

[pat]

Question:

Page A , i'm using kendo grid with hashtag for display output then i use ajax to acquire data from another page which also kendo grid too then load data into kendo window inside Page A, but I stuck with invalid template due to another page also use hash characters to display value too, and if i use escape hash then i can't get value from it , what should i do ?

 

[pat]

This is my code from other pages, as you can see there are many hashtag characters here which display a result and when i import this while ajax.request to insert data in kendo.window of main page, it sure to broken and i keep searching solution

 

@{
       var roleId = ViewData["GroupId"] as String;
       var columnWidth = 50;
       Layout = null;
   }
   @using BackEnd.Helpers
   @Html.Hidden("GroupId", roleId)

   @{Html.Kendo().Grid<Model.Menu>()
                   .Name("GridMenus")
                   .Columns(columns =>
                   {
                       columns.Bound(o => o.TextEng).ClientTemplate("<# if ( ParentId == 0 ) { #>" +
                           "<div class='privilege-lvl-0'><a id='<#= MenuId #>' href='#' title='<#= TextThai #>'><#= TextEng #></a></div>" +
                           "<# } else if( HasChild == 0 && MenuLevel > 0 ) { #>" +
                           "<div class='privilege-lvl-1'><a id='<#= MenuId #>' href='#' title='<#= TextThai #>'><#= TextEng #></a></div>" +
                           "<# } else if( HasChild < 0 && MenuLevel > 1 ) { #>" +
                           "<div class='privilege-lvl-2'><a id='<#= MenuId #>' href='#' title='<#= TextThai #>'><#= TextEng #></a></div>" +
                           "<# } else { #>" +
                           "<div class='privilege-lvl-3'><a id='<#= MenuId #>' href='#' title='<#= TextThai #>'><#= TextEng #></a></div>" +
                           "<# } #>").Title(@Privilege.PageName).Width(200);
                       columns.Bound(o => o.MenuId).HeaderTemplate(@<text>
   @Privilege.View
                       </text>).ClientTemplate(" ").Width(columnWidth);
                  columns.Bound(o => o.MenuId).HeaderTemplate(@<text>
   @Privilege.Create
               </text>).ClientTemplate(" ").Width(columnWidth);
                   columns.Bound(o => o.MenuId).HeaderTemplate(@<text>
   @Privilege.Update
                   </text>).ClientTemplate(" ").Width(columnWidth);
                        columns.Bound(o => o.MenuId).HeaderTemplate(@<text>
   @Privilege.Delete
                       </text>).ClientTemplate(" ").Width(columnWidth);
                         })
              .DataSource(dataBinding =>
              {
                  dataBinding.Ajax().Read("GetMenuList", "UserPrivilegeManagement").PageSize(22);
              })
              .Events(clientEvents => clientEvents
              .DataBound("GridMenus_onRowDataBound")
              //.OnComplete("GridMenus_onComplete")
              )
              .Scrollable(scrolling => scrolling.Height(336))
              .Pageable(paging => paging.PageSizes(BackEnd.Helpers.GridHandler.PageSize))
              .Render();
   }

[Tsvetomir]

Hi,

I have investigated the provided code snippets and I have noticed that there is a mix between the two types of templates. The first one "#script snippet goes here#" and the "#=variable/field#". I suspect that the invalid templates errors might be thrown only because of the href of the anchor tag. Could you try escaping it and let me know if the issue persists?

<a id='<#= MenuId #>' href='\\#' title='<#= TextThai #>'><#= TextEng #></a>

If the issue remains unresolved, share a runnable sample in which the defect could be observed. I would investigate it locally and get back with accurate suggestions.

Looking forward to your reply.

 

Regards,
Tsvetomir
Progress Telerik

[pat]

sadly, it still broken but i just found solution days ago with this , i use myTemplate with javascript function and it work like a charm without any invalid template.

@{
    var roleId = ViewData["GroupId"] as String;
    var columnWidth = 50;
    Layout = null;
}
@using BackEnd.Helpers
@Html.Hidden("GroupId", roleId)

<style>

</style>

            @{Html.Kendo().Grid<Model.Menu>()
                                            .Name("GridMenus")
                                            .Columns(columns =>
                                            {
                                                columns.Bound(o => o.TextEng)
                                                        .ClientTemplate("#=myTemplate(data)#").Title(@Privilege.PageName).Width(200);
                                                columns.Bound(o => o.MenuId).HeaderTemplate(@<text>
                @Privilege.View
                                                </text>).ClientTemplate(" ").Width(columnWidth);
                                 columns.Bound(o => o.MenuId).HeaderTemplate(@<text>
                @Privilege.Create
                                </text>).ClientTemplate(" ").Width(columnWidth);
                       columns.Bound(o => o.MenuId).HeaderTemplate(@<text>
                @Privilege.Update
                    </text>).ClientTemplate(" ").Width(columnWidth);
               columns.Bound(o => o.MenuId).HeaderTemplate(@<text>
                @Privilege.Delete
            </text>).ClientTemplate(" ").Width(columnWidth);
                                            })
            .DataSource(dataBinding =>
            {
                dataBinding.Ajax().Read("GetMenuList", "UserPrivilegeManagement").PageSize(22);
            })
            .Events(clientEvents => clientEvents
            .DataBound("GridMenus_onRowDataBound")
            //.OnComplete("GridMenus_onComplete")
            )
            .Scrollable(scrolling => scrolling.Height(336))
            .Pageable(paging => paging.PageSizes(BackEnd.Helpers.GridHandler.PageSize))
            .Render();
            }
<hr />
<div>
    <button id="btnCreatePrivilege" onclick="onCreatePriv(this)" type="button" class="btn btn-success">@SharedResource.SaveButton</button>
    <button class="btn btn-danger" onclick="closeInnerWindow(this)">@SharedResource.CancelButton</button>
</div>

<div class="t-status">
    <ul>
        <li><img src="@Url.Content("~/Content/icons/status-approve.png")" width="16" height="16" alt="" /><span>@Privilege.ApproveDescription</span></li>
        <li><img src="@Url.Content("~/Content/icons/status-pending.png")" width="16" height="16" alt="" /><span>@Privilege.PendingDescription</span></li>
        <li><img src="@Url.Content("~/Content/icons/status-disabled.png")" width="16" height="16" alt="" /><span>@Privilege.DisabledDescription</span></li>
    </ul>
</div>

<script>

    function myTemplate(data) {
        if (data.ParentId == 0)
        {
            return '<div class="privilege-lvl-0"><a id="' + data.MenuId + '" href="#" title="' + data.textThai + '">' + data.TextEng + '</a></div>';
        }
        else if (data.HasChild == false && data.MenuLevel > 0)
        {
            return '<div class="privilege-lvl-1"><a id="' + data.MenuId + '" href="#" title="' + data.textThai + '">' + data.TextEng + '</a></div>';
        }
        else if (data.HasChild == false && data.MenuLevel > 1)
        {
            return '<div class="privilege-lvl-2"><a id="' + data.MenuId + '" href="#" title="' + data.textThai + '">' + data.TextEng + '</a></div>';
        }
        else {
            return '<div class="privilege-lvl-3"><a id="' + data.MenuId + '" href="#" title="' + data.textThai + '">' + data.TextEng + '</a></div>';
        }
    }

</script>

[Tsvetomir]

Hi Pat,

I am glad to hear that the issue has now been resolved. Indeed, using a JavaScript function and handling the template creation there is a nice approach. It would be accurate if an exception is thrown and will make the code on the page more neat and concise. 

In case any additional questions arise, feel free to contact us. 

 

Regards,
Tsvetomir
Progress Telerik