Custom search on a toolbar on a Grid

[Alberto Provencio]

Good morning,
I am working on the last version with Vue 3 and I am trying to change the search input from a toolbar on a grid for a custom component.
I followed this part of the documentation:

https://ej2.syncfusion.com/vue/documentation/grid/tool-bar/#custom-toolbar

but in Vue 3 there is no Vue.Component.
I also tryed to combine with this other documentation:

https://ej2.syncfusion.com/vue/documentation/getting-started/vue3-tutorial/#component-inside-template-property

but const app = createApp(); need at least one parameter.

This is how it looks like :

<template>

  <ejs-grid

    ref="grid"

    :dataSource="dataSource"

    :toolbarTemplate="toolbarTemplate"

    height="100%"

  >

  </ejs-grid>

</template>

<script lang="ts">

import { GridComponent } from "@syncfusion/ej2-vue-grids";

import { createApp, defineComponent } from "vue";

export default defineComponent({

  name: "GGrid",

  components: {

    "ejs-grid": GridComponent,

  },

  data() {

    return {

      pageSettings: { pageSize: 10 },

      dataSource: [

        { prop1: "prop1", prop2: "prop2" },

        { prop1: "prop1", prop2: "prop2" },

        { prop1: "prop1", prop2: "prop2" },

      ],

      toolbarTemplate: function () {

        const app = createApp();

        return {

          template: app.component("custom-toolbar", {

            template: `<ejs-toolbar>

                        <e-items>

                            <e-item id='collapse' prefixIcon='e-collapse'></e-item>

                        </e-items>

                    </ejs-toolbar>`,

            data: function () {

              return {};

            },

          }),

        };

      },

    };

  },

});

</script>

<style >

@import "../node_modules/@syncfusion/ej2-base/styles/material.css";

@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";

@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";

</style>

​

I would prefer to have something like:

import {MyCustomComponent} from 'MyCustomComponent.vue'  ...

toolbarTemplate: function () {

        return {

          template: MyCustomComponent }} ...

Thanks in advance.

[Alberto Provencio]

Hello?

[Thiyagu Subramani]

Hi Alberto, 

Sorry for the delay. 

We are also facing some issue “Toolbar rendering with empty items” like below while rendering (ejs-toolbar) toolbar in template way. So currently we are forwarded this requirement to our corresponding team and we will update further details on or before 15^th July until that time we appreciate patience. 

 

Regards, 

Thiyagu S 

[Thiyagu Subramani]

Hi Alberto, 

Thanks for your patience. 

Before using the template in the Vue application, we need to enable the runtime compiler. Create the Vue.config.js file in the root folder if it doesn’t exist and add the following code. 

 

module.exports = { 

runtimeCompiler: true 

  } 

For your reference we have prepared a sample of toolbarTemplate in Vue3. Please refer the below sample for more information. 

<template> 

  <ejs-grid :dataSource='gridData' allowPaging="true" :toolbarTemplate='toolbar' :pageSettings='pageSettings' allowSorting="true"> 

    <e-columns> 

        <e-column field='EmployeeID' headerText='Employee ID' :isPrimaryKey='true' width=100></e-column> 

        <e-column field='FirstName' headerText='First Name'  width=120></e-column> 

        <e-column field='Title' headerText='Title' width=150></e-column> 

        <e-column field='Country' headerText='Country' width=150></e-column> 

    </e-columns> 

</ejs-grid> 

</template> 

<script> 

import { GridComponent, ColumnsDirective, ColumnDirective, Sort, Page, Toolbar  } from '@syncfusion/ej2-vue-grids'; 

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

import { employeeData } from './datasource.js'; 

import { createApp } from "vue"; 

const app = createApp(); 

var colVue = app.component('toolbar', {        

        template: `<ejs-toolbar> 

                        <e-items> 

                            <e-item id='collapse' prefixIcon='e-collapse'></e-item> 

                        </e-items> 

                    </ejs-toolbar>`, 

 

components: { 

    "ejs-toolbar": ToolbarComponent, 

    "e-items": ItemsDirective, 

    "e-item": ItemDirective 

  }, 

 data () {return {}}, 

}); 

   

export default { 

  name: 'App', 

  components: { 

   'ejs-grid' : GridComponent, 

   'e-columns' : ColumnsDirective, 

   'e-column' : ColumnDirective 

  }, 

  provide: {grid: [Sort, Page, Toolbar]}, 

  data() { 

    return { 

    gridData:  employeeData, 

               pageSettings: { pageSize: 5}, 

    toolbar: function() { 

      return { template: colVue }; 

    } 

    } 

  } 

} 

</script> 

<style> 

.e-grid .e-collapse::before { 

        content: "\e345";    

    } 

@import https://cdn.syncfusion.com/ej2/material.css; 

</style> 

Sample: https://www.syncfusion.com/downloads/support/forum/167048/ze/Gird_toolbar-1522835148 

This below article explains how to use Syncfusion Vue components in Vue 3 application. Please refer the below documentation for more information. 

Documentation: https://ej2.syncfusion.com/staging/vue/documentation/getting-started/vue3-tutorial/#template-usage 

                              https://ej2.syncfusion.com/staging/vue/documentation/getting-started/vue3-tutorial/#using-syncfusion-vue-components-inside-template-properties 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S