title: Load External Template into Toolbar Kendo UI
body: <p>The goal is to have an external template loaded into a toolbar of a Kendo UI grid. I would prefer not to have any script directly in a the view itself (as seen in the example on the Kendo site). I've been messing around with $.get but have not been completely successful. What would be the best way to assign the template to the toolbar below?</p>
  
  <p>Kendo Version 2012.3.1114, Visual Studio 2012</p>
  
  <p>Function call in a script that sets the grid settings:</p>
  
  <pre><code>    var configureGrid = function() {
          var grid = $('#allItemsGrid').kendoGrid({
              dataSource: {
                  type: 'json',
                  transport: {
                      read: {
                          url: "api/GridApi/GetAll",
                          dataType: 'json',
                          type: 'GET',
                          contentType: "application/json; charset=utf-8"
                      }
                  },
                  schema: {
                      model: {
                          fields { {
                              MusicItemId: { type: "integer" },
                              Artist: { type: "string" },
                              Title: { type: "string" },
                              Genre: { type: "string" },
                              Format: { type: "string" },
                              Notes: { type: "string" },
                              Country: { type: "string" }
                          }
                      }
                  },
                  pageSize: 5
              },
              toolbar: // load external template????
              sortable: true,
              pageable: { pageSizes: [5, 10, 15] },
              columns: gridCols.GridColumns
          });
  </code></pre>
  
  <p>And this is a template I have in a Tmpl folder right off the root of the MVC project:</p>
  
  <pre><code>    &lt;script type="text/x-kendo-template" id="tmplTarget"&gt;
          &lt;div class="toolbar"&gt;
              &lt;label class="category-label" for="category"&gt;Show By Genre:&lt;/label&gt;
              &lt;input type="search" id="category"&gt;&lt;/input&gt;
          &lt;/div&gt;
          &lt;div class="toolbar"&gt;
              &lt;label class="category-label" for="category"&gt;Show By Format:&lt;/label&gt;
              &lt;input type="search" id="category2"&gt;&lt;/input&gt;
          &lt;/div&gt;
          &lt;a class="k-button" id="searchCriteria" href="\\\#" onclick="test_fn()"&gt;Search&lt;/a&gt;
      &lt;/script&gt;
  </code></pre>
  
  <p>Per Ryan's request. This code below is a re-work, just to see if I could get things working based off the kendo documentation. The code:</p>
  
  <pre><code>    &lt;!DOCTYPE html/&gt;
      &lt;html&gt;
          &lt;head&gt;
              &lt;title&gt;The Grid&lt;/title&gt;
              &lt;script src="~/Scripts/jquery-1.8.3.min.js"&gt;&lt;/script&gt;
              &lt;script src="~/Scripts/kendo.web.min.js"&gt;&lt;/script&gt;
              &lt;script src="~/Scripts/templateLoader.js"&gt;&lt;/script&gt;
              &lt;link href="~/Content/kendo/2012.3.1114/kendo.common.min.css" rel="stylesheet" /&gt;
              &lt;link href="~/Content/kendo/2012.3.1114/kendo.default.min.css" rel="stylesheet" /&gt;
          &lt;/head&gt;
          &lt;script type="text/javascript"&gt;
              templateLoader.loadExtTemplate("@Url.Content("~/Tmpl/Test.tmpl.html")");
  
              $(document).ready(function () {
                  var _itemTemplate;
                  $(document).bind("TEMPLATE_LOADED", function (e, path) {
                      console.log('Templates loaded');
  
                      _itemTemplate = kendo.template($('#template').html(), { useWithBlock: false });
  
              });
              $('#allItemsGrid').kendoGrid({
                  dataSource: {
                      type: 'json',
                      transport: {
                          read: {
                              url: "", // left blank, not concerned with pulling data back for now
                              dataType: 'json',
                              type: 'GET',
                              contentType: "application/json; charset=utf-8"
                          }
                      },
                      schema: {
                          model: {
                              fields: {
                                  MusicItemId: { type: "integer" },
                                  Artist: { type: "string" },
                                  Title: { type: "string" },
                                  Genre: { type: "string" },
                                  Format: { type: "string" },
                                  Notes: { type: "string" },
                                  Country: { type: "string" }
                              }
                          }
                      },
                      pageSize: 5
                  },
                  toolbar: [{ name: 'customTemplate', template: _itemTemplate }],
                  sortable: true,
                  pageable: { pageSizes: [5, 10, 15] },  // page size using pager
                  columns: [
                  { field: "Artist", title: "Aritst" },
                  { field: "Title", title: "Title" },
                  { field: "Genre", title: "Genre" },
                  { field: "Format", title: "Format" },
                  { field: "Notes", title: "Notes" },
                  { field: "Country", title: "Country" }
                  ]
              });
          });
      &lt;/script&gt;
  
      &lt;style scoped="scoped"&gt;
          #grid .k-toolbar {
              min-height: 27px;
          }
          .category-label {
              vertical-align: middle;
              padding-right: .5em;
              float: left;
          }
          #category {
              vertical-align: middle;
          }
          .toolbar {
              float: right;
              margin-right: .8em;
          }
      &lt;/style&gt;
      &lt;body&gt;
          &lt;div id="allContainer"&gt;
              &lt;div id="allItemsGrid"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the templateLoader.js file:</p>
  
  <pre><code>    var templateLoader = (function($, host) {
          return {
              loadExtTemplate: function(path) {
                  var tmplLoader = $.get(path)
                      .success(function(result) {
                          $('body').append(result);
                      })
                      .error(function(result) {
                          alert("Error loading template...");
                  });
  
                  tmplLoader.complete(function() {
                      $(host).trigger("TEMPLATE_LOADED", [path]);
                  });
              }
          };
      })(jQuery, document);
  </code></pre>
  
  <p>The template is the same as posted above. Obviously this won't work because it is appending the results to the body of the document. What I need is the results appended to the template in the grid toolbar. It is successful in pulling down the template as verified by watching the network traffic.</p>