Render other components in toolbar using template in Vue Toolbar component

11 Jun 20247 minutes to read

You can render other components inside Toolbar using Vue template. Through this, we can add content as other components directly with all functionalities to our Toolbar. Follow the below guidelines for using the other components as template in Toolbar.

  • Declare a template in the template section of the “.vue” file. An empty object “data” needs to be initialized in the data option of the default export object in script section.

  • The template function needs to be assigned to the content property of the EJ2 Vue Toolbar Component.

<template>
  <div id="app">
    <ejs-toolbar>
      <e-items>
        <e-item :template='Template1'></e-item>
        <e-item text='Italic'></e-item>
        <e-item text='Underline'></e-item>
        <e-item type='Separator'></e-item>
        <e-item :template='Template2'></e-item>
      </e-items>
    </ejs-toolbar>
  </div>
</template>
<script setup>

import { ToolbarComponent as EjsToolbar, ItemsDirective as EItems, ItemDirective as EItem } from "@syncfusion/ej2-vue-navigations";
import { DatePickerComponent } from '@syncfusion/ej2-vue-calendars';
import { NumericTextBoxComponent } from "@syncfusion/ej2-vue-inputs";
import { createApp } from "vue";

const Template1 = () => {
  return {
    template: createApp().component('NumericTextBoxComponent', {
      components: {
        "ejs-numerictextbox": NumericTextBoxComponent
      },
      template: '<ejs-numerictextbox value="10"></ejs-numerictextbox>',
      data() { return {}; }
    })
  }
};
const Template2 = () => {
  return {

    template: createApp().component('DatePickerComponent', {
      components: {
        "ejs-datepicker": DatePickerComponent
      },
      template: ' <ejs-datepicker :min="minDate" :max="maxDate" :value="dateVal" ></ejs-datepicker>',
      data() {
        return {
          minDate: new Date("05/09/2017"),
          maxDate: new Date("05/15/2017"),
          dateVal: new Date("05/11/2017")
        };
      }
    })
  }
};

</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";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
</style>
<template>
  <div id="app">
    <ejs-toolbar>
      <e-items>
        <e-item :template='Template1'></e-item>
        <e-item text='Italic'></e-item>
        <e-item text='Underline'></e-item>
        <e-item type='Separator'></e-item>
        <e-item :template='Template2'></e-item>
      </e-items>
    </ejs-toolbar>
  </div>
</template>
<script>

import { ToolbarComponent, ItemDirective, ItemsDirective, } from '@syncfusion/ej2-vue-navigations';
import { DatePickerComponent, CalendarComponent } from '@syncfusion/ej2-vue-calendars';
import { NumericTextBoxComponent } from "@syncfusion/ej2-vue-inputs";
import { createApp } from 'vue';

export default {
  name: "App",
  components: {
    "ejs-toolbar": ToolbarComponent,
    "e-items": ItemsDirective,
    "e-item": ItemDirective
  },
  data: function () {
    return {
      Template1: function () {
        return {
          template: createApp().component('NumericTextBoxComponent', {
            components: {
              "ejs-numerictextbox": NumericTextBoxComponent
            },
            template: '<ejs-numerictextbox value="10"></ejs-numerictextbox>',
            data() { return {}; }
          })
        }
      },
      Template2: function () {
        return {
          template: createApp().component('DatePickerComponent', {
            components: {
              "ejs-datepicker": DatePickerComponent
            },
            template: ' <ejs-datepicker :min="minDate" :max="maxDate" :value="dateVal" ></ejs-datepicker>',
            data() {
              return {
                minDate: new Date("05/09/2017"),
                maxDate: new Date("05/15/2017"),
                dateVal: new Date("05/11/2017")
              };
            }
          })
        }
      }
    }
  }
}
</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";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
</style>