We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid Custom Toolbar CRUD Button with Toolbar Template

Thread ID:

Created:

Updated:

Platform:

Replies:

145307 Jun 17,2019 09:46 AM UTC Jul 10,2019 06:05 AM UTC Vue 10
loading
Tags: Data Grid
Thin D
Asked On June 17, 2019 09:46 AM UTC

Hello there,
I want to create the sample based on the documentation https://ej2.syncfusion.com/vue/documentation/grid/tool-bar/#custom-toolbar.

But it seems your documentation does show the custom 


I have attached the source code.

Thanks,


Attachment: Grid_customtoolbar_d7bd697.zip

Thavasianand Sankaranarayanan [Syncfusion]
Replied On June 18, 2019 09:38 AM UTC

Hi Thin, 

Greetings from Syncfusion support. 

We are able to reproduce the mentioned issue from our end. We have logged a documentation changes for the mentioned topic (custom toolbar) and it will be refreshed online ASAP. 

Until then we suggest you to use the below code example and sample for custom toolbar. 

[App.Vue] 

<ejs-grid 
      ref="grid" 
      :allowGrouping="true" 
      :groupSettings="groupOptions" 
      :dataSource="data" 
      height="400px" 
      :toolbarClick="clickHandler" 
      :toolbar="toolbar" 
   
      <e-columns> 
        <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-column> 
        <e-column field="CustomerID" headerText="Customer ID" width="150"></e-column> 
        <e-column field="ShipCity" headerText="Ship City" width="150"></e-column> 
        <e-column field="ShipName" headerText="Ship Name" width="150"></e-column> 
      </e-columns> 
    </ejs-grid> 


export default { 
  data() { 
    return { 
      data: orderDetails.slice(0), 
      groupOptions: { columns: ["CustomerID", "ShipCity"] }, 
      toolbar: [ 
       
          template: function() { 
            return { 
              template: Vue.component("custom-toolbar", { 
                template: `<ejs-toolbar > 
                        <e-items> 
                            <e-item id='collapse' text='Collapse All' prefixIcon='e-collapse'>thin</e-item> 
                        </e-items> 
                    </ejs-toolbar>`, 
                data: function() { 
                  return {}; 
               
              }) 
            }; 
         
       
     
    }; 
  }, 
  methods: { 
    clickHandler(args) { 
      let target = args.originalEvent.target.closest("button"); //find clicked button 
      if (target.id === "collapse") { 
         //collapse all expanded grouped row 
        this.$refs.grid.ej2Instances.groupModule.collapseAll(); 
     
   
  }, 
  provide: { 
    grid: [Toolbar, Group] 
 
}; 


  

Regards, 
Thavasianand S. 


Thin D
Replied On June 27, 2019 03:20 PM UTC

Hello there,

I tried as your suggest, but the custom toolbar is disappeared in my example.


please  help.
Thanks

Attachment: Grid_customtoolbar_37d55ac7.zip

Thavasianand Sankaranarayanan [Syncfusion]
Replied On June 28, 2019 11:49 AM UTC

Hi Thin, 

In your given custom toolbar template you have mention the template as function but we need to give it as a array. This is the root cause of this issue. 

Please refer the below code example. 


toolbarTemplate:  [ 
        { 
          template: function() { 
            return { 
              template: Vue.component("custom-toolbar", { 
                template: `<ejs-toolbar > 
                        <e-items> 
                            <e-item id='collapse' text='Collapse All' prefixIcon='e-collapse'>thin</e-item> 
                        </e-items> 
                    </ejs-toolbar>`, 
                data: function() { 
                  return {}; 
                } 
              }) 
            }; 
          } 
        } 
      ] 


We have prepared a sample in the below link. 


Regards, 
Thavasianand S 


Thin D
Replied On June 28, 2019 04:14 PM UTC

Hello Thavasianand S.,

I give the template as an array, but it does not show custom toolbar


I saw the error in console


I have attached my example, please help.

Thank you very much.

Attachment: Grid_customtoolbar_06282019_206db276.zip

Thavasianand Sankaranarayanan [Syncfusion]
Replied On July 1, 2019 09:52 AM UTC

Hi Thin, 

We have prepared a sample with your given code example but it is unsuccessful to reproduce the issue from our end. 


Please clear the cache of your browser once you start for run the sample or try to run in incognito/private mode browsing. If possible please try to reproduce the issue in the attached sample. 
   
Regards, 
Thavasianand S. 


Thin D
Replied On July 1, 2019 03:52 PM UTC

Hello Thavasianand S.,

When I removed the property :toolbar="toolbar" the error does not occur, it seems the error happens inside toolbar template





When I add  :toolbar="toolbar" , I got the error but I do not find any keyword "<GridComponent>" in my code



It seems the error occurred when render Toolbar.Component.appendTo

Please help.

Regards




Thin D
Replied On July 7, 2019 09:18 AM UTC

Hello there,

Do you have any idea?  I am stuck at here now, please help.

Regards,

Thavasianand Sankaranarayanan [Syncfusion]
Replied On July 8, 2019 09:49 AM UTC

Hi Thin, 

We have validated your query provided information and we have modified already provided sample with your requirement. Please refer the below code example and sample for more information. 

[App.Vue] 

<template> 
    <div id="app"> 
        <ejs-grid ref='grid' :dataSource='data' height='400px' :toolbar='toolbarTemplate' :toolbarClick="clickHandler
        :allowGrouping="true" :groupSettings="groupOptions"> 
                <e-columns> 
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column> 
                    <e-column field='CustomerID' headerText='Customer ID' width=150></e-column> 
                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column> 
                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column> 
                </e-columns> 
        </ejs-grid> 
    </div> 
</template> 

export default { 
  data() { 
    return { 
      data: orderDetails.slice(0), 
      groupOptions: { columns: ["CustomerID", "ShipCity"] }, 
      toolbarTemplate: [ 
       { 
          template: function() { 
            return { 
           // Custom toolbar template defined here 
              template: Vue.component("custom-toolbar", { 
                template: `<ejs-toolbar > 
                        <e-items> 
                            <e-item id='collapse' text='Collapse All' prefixIcon='e-collapse'>thin</e-item> 
                        </e-items> 
                    </ejs-toolbar>`, 
                data: function() { 
                  return {}; 
                } 
              }) 
            }; 
          } 
        } 
      ] 
    }; 
  }, 
  methods:{ 
      clickHandler(args) { 
      let target = args.originalEvent.target.closest("button"); //find clicked button 
      if (target.id === "collapse") { 
         //collapse all expanded grouped row 
        this.$refs.grid.ej2Instances.groupModule.collapseAll(); 
      } 
    } 
  }, 
  provide: { 
      grid: [Toolbar, Group] 
  } 



Regards, 
Thavasianand S. 


Thin D
Replied On July 9, 2019 04:42 PM UTC

Hello Thavasianand S.,
Thanks for providing the sample file.

Based on your sample, I found the way to bypass the issue I deleted package-lock.json and node-modules.

It works 

Thanks,

Thavasianand Sankaranarayanan [Syncfusion]
Replied On July 10, 2019 06:05 AM UTC

Hi Thin, 
 
Thanks for your update. 
 
We are happy that the problem has been resolved at your end. 
 
Regards, 
Thavasianand S.  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon