title: Kendo UI Grid : How to conditionally add a 'create' button toolbar dynamically
body: <p>I want to conditionally add a toolbar to my Kendo UI Grid based on the user permissions. Below are my code snippets:</p>
  
  <pre><code>&lt;div kendo-grid="ctrl.kendoGrid" id="myGrid" k-height="450" k-options="ctrl.genevaIndexSwapMappingGridOptions"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Grid toolbar template:</p>
  
  <pre><code>&lt;script type="text/x-kendo-template" id="template"&gt;
      &lt;div class="toolbar"&gt;
          &lt;a class="k-button k-button-icontext k-grid-add" href="\#"&gt;
              &lt;span class="k-icon k-add"&gt;&lt;/span&gt;
              Add Geneva Rate Schedule Ref Index
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>I also tried specifying the toolbar in the grid options and then toggling its visibility using <code>$(".k-grid-toolbar").hide();</code>; but it makes the toolbar appear on the UI and then disappear causing the control to flicker on the UI.</p>
  
  <p>I even tried something like below, but couldn't get it working:</p>
  
  <pre><code>dataBound: function () {
      //var template = kendo.template($("#template").html());
      //var toobar = $("&lt;div class='k-toolbar k-grid-toolbar k-widget'&gt;&lt;/div&gt;").append(template);
      //this.options.toolbar = [{ template: kendo.template($("#template").html()) }];
      //ctrl.genevaIndexSwapMappingGridOptions.toolbar = template;
      },
  </code></pre>
  
  <p>Is there a way I can create and render the toolbar on the grid dynamically based on a particular condition ?</p>
  
  <p>References used: <a href="https://stackoverflow.com/questions/17483823/create-another-toolbar-in-kendo-grid">Create another toolbar in kendo grid</a></p>
  
  <p><strong>EDIT :</strong> 
  I implemented @DontVoteMeDown's solution, but it broke another functionality. I am using custom editors for some fields. When the 'create' popup dialog opens up, it fails to render the custom kendo controls. In the column configuration I am specifying a custom editor template for my fields as below:</p>
  
  <pre><code>{
      field: "RS_RefIndex_GvId", title: "Rate Schedule – Reference Index",
      editor: function (container, options) {
                  $('&lt;input kendo-drop-down-list data-value-primitive="true" required k-on-change="dataItem.dirty=true" k-data-source="ctrl.rateScheduleRefIndexList" ng-model="dataItem.RS_RefIndex_GvId" k-option-label="\'Select...\'" /&gt;').appendTo(container);
              }
  },
  </code></pre>
  
  <p>If I remove my dataBound event which conditionally adds the toolbar to the grid, and specify the toolbar as a property on the grid options, then the controls appear to be rendering correctly.</p>
  
  <pre><code>dataBound: function () {
                  if (!ctrl.isSetOptions) {
                      if (DataSvc.isUserAdmin) {
                          ctrl.isSetOptions = true;
                          ctrl.kendoGrid.setOptions({ toolbar: [{ name: 'create', text: 'Add Geneva Index Swap Mapping', }] });
                      }
                  }
                  if (DataSvc.isUserAdmin) {
                      ctrl.kendoGrid.showColumn("CommandColumn");
                  }
                  else {
                      ctrl.kendoGrid.hideColumn("CommandColumn");
                  }
              },
  </code></pre>
  
  <p>Any help on this please ?</p>