Toolbar custom button

[hai shi tan]

I try to replicate this in this sample not working

https://ej2.syncfusion.com/vue/demos/#/tailwind3/ai-grid/semantic-filtering.html

1.  the "h" function on Smart Search, get error as following

Uncaught (in promise) TypeError: object.template._context is undefined

2. i try on the  Detect button, it shows but click has no response

const toolbar = [

            {
                template: () => {
                    return h('div', [
                        h('TextBoxComponent', {
                            id: 'smart_search_input',
                            placeholder: 'Search here',
                            width: '200',
                        }),
                        h('ButtonComponent', {
                            id: 'toolbarButton',
                            isPrimary: true,
                            onClick: detectfn,
                        }, 'Smart Search')
                    ]);
                },
                text: 'Smart Search',
            },
    {template: "<ButtonComponent id='anomaly' :isPrimary='true' @click='detectfn'>Detect</ButtonComponent>", text: "abc"},
    "<ButtonComponent id='anomaly' :isPrimary='true' @click='detectfn'>Detect</ButtonComponent>",
    'Add', 'Edit', 'Delete', 'Update', 'Cancel'];


        <GridComponent
            ref="grid"
            :dataSource="data"
            allowPaging="true"
            :pageSettings="pageSettings"
            allowSorting="true"
            allowFiltering="true"
            :filterSettings="filterSettings"
            :editSettings="editSettings"
            :toolbar="toolbar"
            :actionComplete="actionComplete"
            :actionBegin="actionBegin"
            :rowDataBound="rowDataBound"
        >

[Aishwarya Rameshbabu]

Hi hai shi tan,

Greetings from Syncfusion support.

Upon examining your inquiry, it has been noted that you are experiencing difficulties with integrating custom components in the toolbar alongside the default items in the Syncfusion Grid.

Template Utilization: Syncfusion components offer three types of templates. For further information, please consult the Syncfusion documentation.

Documentation Link: External-template

External Templates: To fulfill your requirement of displaying the Syncfusion Grid toolbar with both custom templates and default items, external templates can be utilized. Below is an example illustrating how to define these templates as components and incorporate them into the toolbar. Please refer to the below code example, sample and video demonstration for more information.

App.vue

      toolbar: [

        {

          template: function () {

            return {

              template: createApp({}).component('Search', searchTemplate),

            };

          },

        },

        {

          template: function () {

            return {

              template: createApp({}).component('Button', ButtonTemplate),

            };

          },

        },

        'Add',

        'Edit',

        'Delete',

      ],

 

Button.vue

<template>

  <div>

    <ejs-button id='anomaly' :isPrimary='true' @click='detectfn'>Detect</ejs-button>

  </div>

</template>

 

search.vue

<template>

  <div class="wrapper">

    <ejs-textbox

    id='smart_search_input'

    placeholder='Search here'

    width="200px"

    ></ejs-textbox>

    <div class="btn">

    <ejs-button id="toolbarButton" :isPrimary="true" @click='detectfn'>Smart Search</ejs-button>

  </div>

  </div>

</template>

 

Sample: Nvgcxxfa (forked) - StackBlitz

If you need any other assistance or have additional questions, please feel free to contact us.

Regards

Aishwarya R