How to set item-wise custom template in Vue Toolbar

03 Sep 20264 minutes to read

The Toolbar supports adding template commands using the template property. The template property can be given as the HTML element that is either a string or a query selector.

As a string

The HTML element tag can be given as a string for the template property. Here, a search input is rendered as an HTML template.

template: "<div><input type='checkbox' id='check1' checked=''>Accept</input></div>"

As a selector

The template property also allows getting template content through query selector. Here, checkbox ‘ID’ attribute is specified in the template.

template: "#Template"
<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:100%;">
      <br>
      <ejs-toolbar>
        <e-items>
          <e-item text='Cut'></e-item>
          <e-item type='Separator'></e-item>
          <e-item text='Paste'></e-item>
          <e-item type='Separator'></e-item>
          <e-item :template='templateEle'></e-item>
          <e-item text='Undo'></e-item>
          <e-item text='Redo'></e-item>
          <e-item :template='templateEleId'></e-item>
        </e-items>
      </ejs-toolbar>
    </div>
  </div>
</template>
<script setup>

import { ToolbarComponent as EjsToolbar, ItemsDirective as EItems, ItemDirective as EItem } from "@syncfusion/ej2-vue-navigations";

const templateEle = '<input placeholder="Search" style="height:27px;"/>';
const templateEleId = '#Template';

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
</style>
<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:100%;">
      <br>
      <ejs-toolbar>
        <e-items>
          <e-item text='Cut'></e-item>
          <e-item type='Separator'></e-item>
          <e-item text='Paste'></e-item>
          <e-item type='Separator'></e-item>
          <e-item :template='templateEle'></e-item>
          <e-item text='Undo'></e-item>
          <e-item text='Redo'></e-item>
          <e-item :template='templateEleId'></e-item>
        </e-items>
      </ejs-toolbar>
    </div>
  </div>
</template>
<script>

import { ToolbarComponent, ItemDirective, ItemsDirective, } from "@syncfusion/ej2-vue-navigations";

export default {
  name: "App",
  components: {
    "ejs-toolbar": ToolbarComponent,
    "e-items": ItemsDirective,
    "e-item": ItemDirective
  },
  data() {
    return {
      templateEle: '<input placeholder="Search" style="height:27px;"/>',
      templateEleId: '#Template'
    }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
</style>