Getting Invalid Template error when trying to load the Kendo Column Responsive Grid.

2 posts, 0 answers
  1. Rahul
    Rahul avatar
    1 posts
    Member since:
    Dec 2019

    Posted 24 Jan 2020 Link to this post

    I am getting "Uncaught Error: Invalid template:" while trying to request the ".cshtml" page which contains the Kendo Grid (Column-Responsive). We used column responsive template in this grid. I am looking for the solution for this error since couple of hours now but I do not able to resolve it. Please have a look at the below response error message along with the HTML Code.

     

    Uncaught Error: Invalid template:'
    <div class="container-fluid" onclick="window.location='http://dev.newsalesbook.abc.com/Account/AccountDetail?AccountID=#=data.AccountID #&BusinessUnitID=#=data.BusinessUnitID #'">
       <div class="row">
          <div class="col-xs">
             <label style="font-size:17px; color:rgb(5,69,126); font-weight:bold">#=nullString(data.Name)#</label>
          </div>
       </div>
       <div class="row">
          <div class="col-xs">
             <label class="label-md-bold">Business Unit:</label>
          </div>
          <div class="col-xs">
             <label class="label-md">#=nullString(data.BusinessUnit)#</label>
          </div>
       </div>
       <div class="row">
          <div class="col-xs">
             <label class="label-md-bold">Account Type:</label>
          </div>
          <div class="col-xs">
             <label class="label-md">#=nullString(data.AccountType)#</label>
          </div>
       </div>
       <div class="row">
          <div class="col-xs">
             <label class="label-md-bold">Account#:</label>
          </div>
          <div class="col-xs">
             <label class="label-md">#=data.AccountNo#</label>
          </div>
       </div>
       <div class="row">
          <div class="col-xs">
             <label class="label-md-bold">Parent Account:</label>
          </div>
          <div class="col-xs">
             <label class="label-md">#=nullString(data.ParentAccount)#</label>
          </div>
       </div>
       <div class="row">
          <div class="col-xs">
             <label class="label-md-bold">OS#:</label>
          </div>
          <div class="col-xs">
             <label class="label-md">#=data.OutsideSalesNo#</label>
          </div>
       </div>
       <div class="row">
          <div class="col-xs">
             <label class="label-md-bold">Outside Sales Name:</label>
          </div>
          <div class="col-xs">
             <label class="label-md">#=nullString(data.OutsideSalesName)#</label>
          </div>
       </div>
       <div class="row">
          <div class="col-xs">
             <label class="label-md-bold">IS#:</label>
          </div>
          <div class="col-xs">
             <label class="label-md">#=data.InsideSalesNo#</label>
          </div>
       </div>
       <div class="row">
          <div class="col-xs">
             <label class="label-md-bold">IS Name:</label>
          </div>
          <div class="col-xs">
             <label class="label-md">#=nullString(data.InsideSalesName)#</label>
          </div>
       </div>
       <div class="row">
          <div class="col-xs">
             <label class="label-md-bold">Date Created:</label>
          </div>
          <div class="col-xs">
             <label class="label-md">#=formatDate(data.DateCreated)#</label>
          </div>
       </div>
       <div class="row">
          <div class="col-xs">
             <label class="label-md-bold">Account Owner:</label>
          </div>
          <div class="col-xs">
             <label class="label-md">#=nullString(data.OwnerName)#</label>
          </div>
       </div>
    </div>
    ' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='\n\n   
    <div class="container-fluid" onclick="window.location=\'http://dev.newsalesbook.wesco.com/Account/AccountDetail?AccountID='+(data.AccountID )+'&BusinessUnitID='+(data.BusinessUnitID )+'\'">
       \n       
       <div class="row">
          \n\n           
          <div class="col-xs">\n                <label style="font-size:17px; color:rgb(5,69,126); font-weight:bold">'+(nullString(data.Name))+'</label>\n            </div>
          \n       
       </div>
       \n\n       
       <div class="row">
          \n           
          <div class="col-xs">\n                <label class="label-md-bold">Business Unit:</label>\n            </div>
          \n           
          <div class="col-xs">\n                <label class="label-md">'+(nullString(data.BusinessUnit))+'</label>\n            </div>
          \n       
       </div>
       \n\n       
       <div class="row">
          \n           
          <div class="col-xs">\n                <label class="label-md-bold">Account Type:</label>\n            </div>
          \n           
          <div class="col-xs">\n                <label class="label-md">'+(nullString(data.AccountType))+'</label>\n            </div>
          \n       
       </div>
       \n\n       
       <div class="row">
          \n           
          <div class="col-xs">\n                <label class="label-md-bold">Account'+$kendoHtmlEncode(</label>
          </div>
          <div class="col-xs">
             <label class="label-md">)+'=data.AccountNo';</label>
          </div>
       </div>
       <div class="row">
          <div class="col-xs">
             <label class="label-md-bold">Parent Account:</label>
          </div>
          <div class="col-xs">
             <label class="label-md">;$kendoOutput+='=nullString(data.ParentAccount)';</label>
          </div>
       </div>
       <div class="row">
          <div class="col-xs">
             <label class="label-md-bold">OS;$kendoOutput+=':</label>\n           
          </div>
          \n           
          <div class="col-xs">\n                <label class="label-md">'+(data.OutsideSalesNo)+'</label>\n            </div>
          \n       
       </div>
       \n\n       
       <div class="row">
          \n           
          <div class="col-xs">\n                <label class="label-md-bold">Outside Sales Name:</label>\n            </div>
          \n           
          <div class="col-xs">\n                <label class="label-md">'+(nullString(data.OutsideSalesName))+'</label>\n            </div>
          \n       
       </div>
       \n\n       
       <div class="row">
          \n           
          <div class="col-xs">\n                <label class="label-md-bold">IS'+$kendoHtmlEncode(</label>
          </div>
          <div class="col-xs">
             <label class="label-md">)+'=data.InsideSalesNo';</label>
          </div>
       </div>
       <div class="row">
          <div class="col-xs">
             <label class="label-md-bold">IS Name:</label>
          </div>
          <div class="col-xs">
             <label class="label-md">;$kendoOutput+='=nullString(data.InsideSalesName)';</label>
          </div>
       </div>
       <div class="row">
          <div class="col-xs">
             <label class="label-md-bold">Date Created:</label>
          </div>
          <div class="col-xs">
             <label class="label-md">;$kendoOutput+='=formatDate(data.DateCreated)';</label>
          </div>
       </div>
       <div class="row">
          <div class="col-xs">
             <label class="label-md-bold">Account Owner:</label>
          </div>
          <div class="col-xs">
             <label class="label-md">;$kendoOutput+='=nullString(data.OwnerName)';</label>
          </div>
       </div>
    </div>
  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1230 posts

    Posted 28 Jan 2020 Link to this post

    Hi Rahul,

    I have noticed that in the template in question you use the hashtag symbol as a part of the text: Account#: OS#: and IS#:. May I ask you to remove those from the template and test again? The hashtag is used by the Kendo Template syntax and it should be avoided or escaped in the actual Template content.

    Regards,
    Veselin Tsvetanov
    Progress Telerik

    Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Back to Top