Feature Request - Support Vue Named Slot Templates in Grid Toolbar Items

[Chamroeun]

## Feature Request: Support Named Slot Templates for Grid Toolbar Items

It would be great if toolbar items in `EjsGrid` could support rendering Vue named slot templates directly, instead of requiring the `template` option to reference a string.

Example of desired usage:

```vue

<EjsGrid

  :toolbar="[

    { template: 'cTemplate' }

  ]"

>

  <template #cTemplate>

    <UButton>Hello</UButton>

  </template>

</EjsGrid>

[Kishore Muthukrishnan]

Hi Chamroeun,

Greetings from Syncfusion support,

You can render a Vue named slot inside the Grid toolbar by using the toolbarTemplate property instead of defining a template inside the toolbar array. In this approach, you can define the toolbar template name in toolbarTemplate and then provide the corresponding Vue named slot within the <ejs-grid> component. Please refer to the below code snippet and sample for more information.

<ejs-grid ref='grid' id='Grid' :dataSource='data' :allowGrouping='true' :groupSettings='groupOptions' :toolbarTemplate="'cTemplate'">
 

<template v-slot:cTemplate>

        <ejs-button id="btn" cssClass='e-primary'>Hello</ejs-button>

      </template>

Sample : https://stackblitz.com/edit/qwtyncob-hnzud6sz?file=src%2FApp.vue

Documentation: https://ej2.syncfusion.com/vue/documentation/common/template#slot-template

Regards,

Kishore Muthukrishnan

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 

[Chamroeun]

But I want to render as toolbar item template. Here is my current working extend toolbar code.

```ts

export class ToolbarExtend extends (Toolbar as any) {

  getItem(itemObject: any) {

    const grid = (this as any).parent;

    const vueInst = grid?.vueInstance;

    const slots = vueInst?.$slots;

    const tpl = itemObject?.template;

    if (typeof tpl === 'string' && slots && typeof slots[tpl] === 'function') {

      const slotFn = slots[tpl];

      const container = document.createElement('div');

      const vnode = h({ render: () => slotFn({ data: {} }) });

      if (vueInst.$?.appContext) {

        (vnode as any).appContext = vueInst.$.appContext;

      }

      vueRender(vnode, container);

      const rendered = container.firstElementChild as HTMLElement | null;

      if (rendered) {

        itemObject = { ...itemObject, template: rendered };

      }

    }

    return (super.getItem as any)(itemObject);

  }

}
```

[Joseph Christ Nithin Issack]

Hi Chamroeun,

We have confirmed that the reported scenario is an issue from our side and logged it as “Toolbar Item Template Not Rendering (Vue 3 v-slot) — Syncfusion EJ2 Grid”. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technical feasibility and Product Development Life Cycle ) and will include the defect fix in our patch release which will be rolled out on “June 23^rd, 2026”.

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.

Feedback link: https://www.syncfusion.com/feedback/74261/toolbar-item-template-not-rendering-vue-3-v-slot--syncfusion-ej2-grid

Disclaimer: "Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization".

[Kishore Muthukrishnan]

Hi Chamroeun,

 

We are glad to announce that, we have included the fix for the issue “Toolbar Item Template Not Rendering (Vue 3 v-slot) — Syncfusion EJ2 Grid” in our 34.1.30 release. So please upgrade to our latest version of the Syncfusion package to resolve the reported issue.

 

Root Cause: In Vue 3, a slot template defined in the toolbar array causes the root element to be undefined during compilation, so it fails to render toolbar items in the grid toolbar.

 

Solution: Providing the grid instance to the toolbar root property enables the tv-slot template to render in the grid toolbar. As a result, the v-slot template item is rendered in the grid toolbar.

 

Sample: Gebb8upr (duplicated) - StackBlitz

 

Feedback: Toolbar Item Template Not Rendering (Vue 3 v-slot) — Syncfusion EJ2 Grid in Vue | Feedback Portal

 

We thank you for your support and appreciate your patience in waiting for this release. Please get back to us if you need any further assistance.

 

Regards,

Kishore Muthukrishnan

[Chamroeun]

Hi Kishore,

Thank you for the update and for providing the fix.

I have upgraded to version 34.1.30, and it has resolved the issue. The toolbar item template is now rendering correctly as expected.

I appreciate your support and the team’s effort in addressing this issue.

Best regards,
Chamroeun

[Chamroeun]

Hi Syncfusion Team,

After testing the latest fix, I found that the issue still occurs with built-in toolbar items such as Search.

Here is a StackBlitz sample demonstrating the issue:

https://stackblitz.com/edit/xywvna9n-apz68ecc?file=src%2FApp.vue

Could you please take a look and let me know if any additional configuration is required?

Thank you.

[Kishore Muthukrishnan]

Hi Chamroeun,

 

We have confirmed the reported scenario as a bug from our end and logged it as “Search element is not showing when using along with toolbar itemTemplate”. Thank you for taking time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technical feasibility and Product Development Life Cycle ) and will include the defect fix in our upcoming patch release scheduled for August 25th, 2026.

 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through the below link,

 

Feedback: https://www.syncfusion.com/feedback/75203/search-element-is-not-showing-when-using-along-with-toolbar-itemtemplate

 

Disclaimer: "Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization".

 

Regards,

Kishore Muthukrishnan

[Kishore Muthukrishnan]

Hi Chamroeun,

 

Thanks for your patience,

 

We are glad to announce that, we have included the fix for the issue “Search element is not showing when using along with toolbar itemTemplate” in our 34.2.5 release. So please upgrade to our latest version of the Syncfusion package to resolve the reported issue.

 

Root Cause: When the toolbar is refreshed in Vue 3 templates, the toolbar.refresh() method recreates all toolbar DOM elements but the search input wrapper is not being re-initialized with its event bindings.

 

Solution: Now the search input is initialized by calling renderSearchInput() in the toolbarCreated() event handler to set up the search wrapper with proper CSS classes and event bindings when the toolbar is created. Again renderSearchInput() is called immediately after toolbar.refresh() in the render event handler to reinitialize the search input whenever the toolbar is dynamically refreshed.

 

Sample: Built-in toolbar not show (duplicated) - StackBlitz

 

Feedback: https://www.syncfusion.com/feedback/75203/search-element-is-not-showing-when-using-along-with-toolbar-itemtemplate

 

We thank you for your support and appreciate your patience in waiting for this release. Please get back to us if you need any further assistance.

 

Regards,

Kishore Muthukrishnan