title: Kendo UI Template: Invalid Template Error
body: <p>I'm trying to make a Kendo UI grid template.  When I run the following Chrome gives me the error message.  I've left out most of the rest of the message because it is just printing out all the generated HTML and javascript to the console.</p>
  
  <p><code>Uncaught Error: Invalid template:'&lt;div class="k-widget&amp;#32;k-grid" id="l...</code></p>
  
  <p>I'm trying to follow the "detailtemplate.cshtml" example on the page
  <a href="http://demos.kendoui.com/web/grid/detailtemplate.html" rel="nofollow">http://demos.kendoui.com/web/grid/detailtemplate.html</a></p>
  
  <p>I'm having a hard time figuring out what I'm doing wrong.  If I erase everything between the template's script tags and just put in some dumb HTML it all works fine so I'm sure the problem has something to do with the way I'm putting the kendo grid in.</p>
  
  <p>This is the code I have in my HTML page.  The problem is somewhere inside the <code>&lt;script&gt;</code> with the id "GridDetailsTemplate".</p>
  
  <pre><code>&lt;div id="pendingApproval-tab"&gt;
      @(Html.Kendo().Grid&lt;Moly.BusinessLogic.Entities.MolyAssayEntity&gt;()
          .Name("pending-approval-grid")
          .HtmlAttributes(new { style = "overflow: auto; height: 600px"})
          .Columns(columns =&gt;
          {
              columns.Bound(x =&gt; x.MolyLotID).HtmlAttributes(new {@class = "moly-lot-id"}).Hidden();
              columns.Template(@&lt;div&gt;&lt;/div&gt;).ClientTemplate("&lt;input class='ready-checkbox' type='checkbox'/&gt;").Title("Ready");
              columns.Bound(x =&gt; x.LotNo).Title("Lot").Groupable(false);
              columns.Bound(x =&gt; x.DateProduced).Format("{0:MM/dd/yy}").Title("Date");
              columns.Bound(x =&gt; x.NetWetWeight).Title("Net Wet Weight");
              columns.Bound(x =&gt; x.TareWeight).Title("Tare Weight");
              columns.Bound(x =&gt; x.NetDryWeight).Title("Dry Weight");
              columns.Bound(x =&gt; x.GrossWeight).Title("Gross Weight");
              columns.Bound(x =&gt; x.MolyWeight).Title("Lbs Mo");
              columns.Bound(x =&gt; x.MoisturePercent).Title("% H20");
              columns.Bound(x =&gt; x.MolyPercent).Title("Mo");
              columns.Bound(x =&gt; x.CopperPercent).Title("Cu");
              columns.Bound(x =&gt; x.LeadPercent).Title("Pb");
              columns.Bound(x =&gt; x.InsolublesPercent).Title("Insol");
              columns.Bound(x =&gt; x.ArsenicPercent).Title("As");
              columns.Bound(x =&gt; x.CalciumOxidePercent).Title("CaO");
              columns.Bound(x =&gt; x.IronPercent).Title("Fe");
              columns.Bound(x =&gt; x.MagnesiumOxidePercent).Title("MgO");
              columns.Bound(x =&gt; x.SodiumPercent).Title("Na");
              columns.Bound(x =&gt; x.BatchID).Title("Batch ID");
              columns.Bound(x =&gt; x.DunnageWt).Title("Dunnage Wt.");
              columns.Bound(x =&gt; x.Comment).Title("Comments");
          })
          .ToolBar(toolbar =&gt;
          {
              toolbar.Save();
          })
          .Editable(editable =&gt; editable.Mode(GridEditMode.InCell))
          .ClientDetailTemplateId("GridDetailsTemplate")
          .DataSource(ds =&gt; ds
              .Ajax()
              .Batch(true)
              .Model(model =&gt; 
              {
                  model.Id(m =&gt; m.MolyLotID);       
              })
              .Update(update =&gt; update.Action("UpdateMoly", "MolyLot"))
              .Read(read =&gt; read
                  .Action("PendingApproval", "MolyLot")
                  .Type(HttpVerbs.Post)
              )
          )
          .Events(events =&gt; events.DataBound("dataBound"))
      )
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      function dataBound() {
          this.expandRow(this.tbody.find("tr.k-master-row").first());
      }
  &lt;/script&gt;
  
  &lt;script id="GridDetailsTemplate" type="text/kendo-tmpl"&gt;
      @(Html.Kendo().Grid&lt;Moly.BusinessLogic.Entities.UnroastedContainerEntity&gt;()
          .Name("lot-details-grid")
          .Columns(columns =&gt;
          {
              columns.Bound(x =&gt; x.ContainerNumber).Title("Number");
              columns.Bound(x =&gt; x.Type).Title("Type");
              columns.Bound(x =&gt; x.GrossWeight).Title("Gross Weight");
              columns.Bound(x =&gt; x.TareWeight).Title("Tare Weight");
          })
          .DataSource(DataSource =&gt; DataSource
              .Ajax()
              .Read(read =&gt; read.Action("GetBags", "MolyLot"))
          )
          .ToClientTemplate()
      )
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the "real" template that is generated with my template code:</p>
  
  <pre><code>&lt;div class="k-widget&amp;#32;k-grid" id="lot-details-grid"&gt;
      &lt;table cellspacing="0"&gt;
          &lt;colgroup&gt;
              &lt;col /&gt;
              &lt;col /&gt;
              &lt;col /&gt;
              &lt;col /&gt;
          &lt;/colgroup&gt;
          &lt;thead class="k-grid-header"&gt;
              &lt;tr&gt;
                  &lt;th class="k-header" data-field="ContainerNumber" data-title="Number"
                  scope="col"&gt;&lt;span class="k-link"&gt;Number&lt;/span&gt;
                  &lt;/th&gt;
                  &lt;th class="k-header" data-field="Type" data-title="Type" scope="col"&gt;&lt;span class="k-link"&gt;Type&lt;/span&gt;
                  &lt;/th&gt;
                  &lt;th class="k-header" data-field="GrossWeight" data-title="Gross&amp;#32;Weight"
                  scope="col"&gt;&lt;span class="k-link"&gt;Gross Weight&lt;/span&gt;
                  &lt;/th&gt;
                  &lt;th class="k-header" data-field="TareWeight" data-title="Tare&amp;#32;Weight"
                  scope="col"&gt;&lt;span class="k-link"&gt;Tare Weight&lt;/span&gt;
                  &lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr class="t-no-data"&gt;
                  &lt;td colspan="4"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;script&gt;
      jQuery(function () {
          jQuery("\#lot-details-grid").kendoGrid({
              "columns": [{
                  "title": "Number",
                  "field": "ContainerNumber",
                  "encoded": true
              }, {
                  "title": "Type",
                  "field": "Type",
                  "encoded": true
              }, {
                  "title": "Gross Weight",
                  "field": "GrossWeight",
                  "encoded": true
              }, {
                  "title": "Tare Weight",
                  "field": "TareWeight",
                  "encoded": true
              }],
              "scrollable": false,
              "dataSource": {
                  "transport": {
                      "read": {
                          "url": "/Moly.Web/controller/action"
                      }
                  },
                  "serverPaging": true,
                  "serverSorting": true,
                  "serverFiltering": true,
                  "serverGrouping": true,
                  "serverAggregates": true,
                  "type": "aspnetmvc-ajax",
                  "filter": [],
                  "schema": {
                      "data": "Data",
                      "total": "Total",
                      "errors": "Errors",
                      "model": {
                          "fields": {
                              "UnroastedContainerID": {
                                  "type": "number"
                              },
                              "MolyLotID": {
                                  "type": "number"
                              },
                              "GrossWeight": {
                                  "type": "number"
                              },
                              "Type": {
                                  "type": "string"
                              },
                              "TareWeight": {
                                  "type": "number"
                              },
                              "ContainerNumber": {
                                  "type": "string"
                              },
                              "Units": {
                                  "type": "string"
                              },
                              "MolyLot": {
                                  "type": "object"
                              }
                          }
                      }
                  }
              },
              "detailTemplate": kendo.template($('\#GridDetailsTemplate').html())
          });
      }); &lt; \ / script &gt;
          ' Generated code:'
      var o, e = kendo.htmlEncode;
      with(data) {
          o = '\n        &lt;div class="k-widget&amp;';
          32;
          k - grid " id="
          lot - details - grid "&gt;&lt;table cellspacing="
          0 "&gt;&lt;colgroup&gt;&lt;col /&gt;&lt;col /&gt;&lt;col /&gt;&lt;col /&gt;&lt;/colgroup&gt;&lt;thead class="
          k - grid - header "&gt;&lt;tr&gt;&lt;th class="
          k - header " data-field="
          ContainerNumber " data-title="
          Number " scope="
          col "&gt;&lt;span class="
          k - link "&gt;Number&lt;/span&gt;&lt;/th&gt;&lt;th class="
          k - header " data-field="
          Type " data-title="
          Type " scope="
          col "&gt;&lt;span class="
          k - link "&gt;Type&lt;/span&gt;&lt;/th&gt;&lt;th class="
          k - header " data-field="
          GrossWeight " data-title="
          Gross &amp; ;
          o += '32;Weight" scope="col"&gt;&lt;span class="k-link"&gt;Gross Weight&lt;/span&gt;&lt;/th&gt;&lt;th class="k-header" data-field="TareWeight" data-title="Tare&amp;';
          32;
          Weight " scope="
          col "&gt;&lt;span class="
          k - link "&gt;Tare Weight&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr class="
          t - no - data "&gt;&lt;td colspan="
          4 "&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;script&gt;
      jQuery(function(){jQuery("#lot - details - grid ").kendoGrid({"
          columns ":[{"
          title ":"
          Number ","
          field ":"
          ContainerNumber ","
          encoded ":true},{"
          title ":"
          Type ","
          field ":"
          Type ","
          encoded ":true},{"
          title ":"
          Gross Weight ","
          field ":"
          GrossWeight ","
          encoded ":true},{"
          title ":"
          Tare Weight ","
          field ":"
          TareWeight ","
          encoded ":true}],"
          scrollable ":false,"
          dataSource ":{"
          transport ":{"
          read ":{"
          url ":" / Moly.Web / controller / action "}},"
          serverPaging ":true,"
          serverSorting ":true,"
          serverFiltering ":true,"
          serverGrouping ":true,"
          serverAggregates ":true,"
          type ":"
          aspnetmvc - ajax ","
          filter ":[],"
          schema ":{"
          data ":"
          Data ","
          total ":"
          Total ","
          errors ":"
          Errors ","
          model ":{"
          fields ":{"
          UnroastedContainerID ":{"
          type ":"
          number "},"
          MolyLotID ":{"
          type ":"
          number "},"
          GrossWeight ":{"
          type ":"
          number "},"
          Type ":{"
          type ":"
          string "},"
          TareWeight ":{"
          type ":"
          number "},"
          ContainerNumber ":{"
          type ":"
          string "},"
          Units ":{"
          type ":"
          string "},"
          MolyLot ":{"
          type ":"
          object "}}}}},"
          detailTemplate ":kendo.template($('#GridDetailsTemplate').html())});});
  &lt;\/script&gt;
      ;o+=;}return o;'
  </code></pre>