asking for kendo ui, how to use ajax calling data from another page?

Question

Suppose I have Page A looking like this:

<div class="buttonsarea">
  @*@Html.ButtonWithPrivilege("button", PrivilegeCode.Create, ControllerHelper.GetCurrentControlerName(), @SharedResource.AddButton, new { @class = "button green", @id = "btnCreateGroup", onclick = "onCreateGroup(event)" })
  <button type="button" class="button red" onclick="closeInnerWindow(this);" >@SharedResource.CancelButton</button>
  <button type="button" class="button yellow" onclick="clearInputForm();">@SharedResource.ClearButton</button>*@
</div>
}
</div>
@(Html.Kendo().Grid<Model.Role>()
  .Name("GroupsGrid")
  .ToolBar(toolBar => toolBar.Template(
  @<text>

    <div class="input-group searchButton">
      <input type="text" id="searchKey" class="form-control" autocomplete="off" placeholder="@SharedResource.SearchButton" aria-label="@SharedResource.SearchButton" aria-describedby="basic-addon2">
      <div class="input-group-append">
        <button id="btnSearch" class="btn btn-outline-primary" type="button">@SharedResource.SearchButton</button>
      </div>
    </div>

  </text>))
  .Columns(columns =>
  {

then I use ajax call for another page (below code) to add this code into kendo window, but I got stuck because invalid template, I couldn't use hash escape for this code either because then I couldn't get a result, what should I do to get this thing fixed?

  @{
  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("&nbsp;").Width(columnWidth);
    columns.Bound(o => o.MenuId).HeaderTemplate(@<text>
      @Privilege.Create
    </text>).ClientTemplate("&nbsp;").Width(columnWidth);
    columns.Bound(o => o.MenuId).HeaderTemplate(@<text>
      @Privilege.Update
    </text>).ClientTemplate("&nbsp;").Width(columnWidth);
    columns.Bound(o => o.MenuId).HeaderTemplate(@<text>
      @Privilege.Delete
    </text>).ClientTemplate("&nbsp;").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))

this below is error:

Uncaught Error: Invalid template:'<td data-field="TextEng"class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['TextEng'] ? ' k-dirty-cell' : '' #" role='gridcell'>#= data && data.dirty && data.dirtyFields && data.dirtyFields['TextEng'] ? '' : '' #<//# if ( ParentId == 0 ) { <a id='//#= MenuId //#' href='//#' title='//#= TextThai //#>' //#= TextEng //# }//<td data-field="MenuId"class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['MenuId'] ? ' k-dirty-cell' : '' #" role='gridcell'>#= data && data.dirty && data.dirtyFields && data.dirtyFields['MenuId'] ? '' : '' # <td data-field="MenuId"class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['MenuId'] ? ' k-dirty-cell' : '' #" role='gridcell'>

Answer 1

You have to escape # with \\#. Example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2020.1.406/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2020.1.406/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script></head>
<body>
  
  <script>
    document.write(kendo.template('<a href="\\#">My anchor</a>')({}));
  </script>
</body>
</html>

Reference

Answer 2

After I ran many hours for searching, I got new solution with this, I use myTemplate calling javascript then do if else things inside and return value:

columns.Bound(o => o.TextEng).ClientTemplate("#=myTemplate(data)#").Title(@Privilege.PageName).Width(200);

<script>
function myTemplate(data) {
    if (data.parentId == 0)
    {
        return '<div class="privilege-lvl-0">' + data.TextEng + '</div>';
    }else { ... }