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

Built-in and toolbarTemplate in toolbar

Thread ID:

Created:

Updated:

Platform:

Replies:

147979 Sep 30,2019 02:57 PM UTC Oct 4,2019 05:37 AM UTC Vue 7
loading
Tags: Data Grid
Thin D
Asked On September 30, 2019 02:57 PM UTC

Hello there,

I want to use both built-in and toolbarTemplate at same time.


In my sample, the first grid with Add, Print, Excel export, PDF export, CSV export are built0in toolbar items and the second grid, I use toolbarTemplate and group Excel export, PDF export and CSV export into combobox but I don't know how to add built-in toolbar items into toolbarTemplate.

Please help.

Regards,
TD

Thavasianand Sankaranarayanan [Syncfusion]
Replied On October 1, 2019 08:43 AM UTC

Hi Thin, 

Greetings from the Syncfusion support, 

As per your query, we have created a sample with binding the EJ2 ComboBox component using toolBarTemplate in the EJ2 Grid. We are able to bind the Grid exporting options in the ComboBox and we have achieved the definition code of every exporting in the select event of ComboBox in the Vue platform. Please refer the below code example and sample for more information   

[App.Vue] 
<template> 
  <div id="app"> 
    .    .      .      . 
    <div>Grid 2</div> 
    <ejs-grid 
      ref="grid2" 
      :dataSource="data" 
      height="400px" 
      :toolbar="toolbarTemplate" 
      :toolbarClick="clickHandler" 
      :allowExcelExport="true" 
      :allowPdfExport="true" 
      :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> 
<script> 
import Vue from "vue"; 
import { PdfExport,ExcelExport,parentsUntil} from "@syncfusion/ej2-vue-grids"; 
import { ToolbarPlugin } from "@syncfusion/ej2-vue-navigations"; 
import { ComboBoxPlugin } from "@syncfusion/ej2-vue-dropdowns"; 
 
Vue.use(GridPlugin); 
Vue.use(ToolbarPlugin); 
Vue.use(ComboBoxPlugin); 
 
}); 
 
export default { 
  data() { 
    return { 
      data: orderDetails.slice(0), 
      groupOptions: { columns: ["CustomerID", "ShipCity"] }, 
      editSettings: { 
        showDeleteConfirmDialog: true, 
        allowEditing: true, 
        allowAdding: true, 
        allowDeleting: true, 
        mode: "Dialog" 
      }, 
      toolbar: [ 
        "Add", 
        "Print", 
        "Search", 
        "ExcelExport", 
        "PdfExport", 
        "CsvExport" 
      ], 
      toolbarTemplate: [ 
        { 
          template: function() { 
            return { 
              template: Vue.component("custom-toolbar", { 
                template: `<ejs-toolbar > 
                        <e-items> 
                            <e-item id='collapse' text='Collapse All' prefixIcon='e-collapse'></e-item> 
                            <e-item id='collapse1' text='Collapse Out' prefixIcon='e-collapse'></e-item> 
                            <e-item id="comboboxTemp" :template='vueTemplate'></e-item> 
                        </e-items> 
                    </ejs-toolbar>`, 
                data: function() { 
                  return { 
                    vueTemplate: function() { 
                      return { 
                        template: Vue.component("columnTemplate", { 
                          template: `<div class= 'content'><ejs-combobox id='cTemplate' :dataSource='CBData'          :placeholder='waterMark' :select='CBSelectAction'></ejs-combobox></div>`, 
                          data: function() { 
                            return { 
                              data: {}, 
                              waterMark: "Select Export option", 
                              CBData: [ 
                                "Excel Export", 
                                "PDF Export", 
                                "CSV Export" 
                              ] 
                            }; 
                          }, 
                          methods: { 
                            CBSelectAction(args) { 
                              var gridInstance = parentsUntil( 
                                this.$el, 
                                "e-grid" 
                              ).ej2_instances[0]; 
                              if (args.itemData.value === "Excel Export") { 
                                gridInstance.excelExport(); 
                              } else if (args.itemData.value === "PDF Export") { 
                                gridInstance.pdfExport(); 
                              } else if (args.itemData.value === "CSV Export") { 
                                gridInstance.csvExport(); 
                              } 
                            } 
                          } 
                        }) 
                      }; 
                    } 
                  }; 
                } 
              }) 
            }; 
          } 
        } 
      ] 
    }; 
  }, 
  methods: { 
     .    .    .   . 
  }, 
  provide: { 
    .     .      .   . 
  } 
}; 
</script> 
 
<style> 
</style> 
 

 

                                              https://ej2.syncfusion.com/vue/documentation/api/combo-box/#select 

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

Regards, 
Thavasianand S. 


Thin D
Replied On October 1, 2019 03:20 PM UTC

Thanks for your help.

I also need built-in toolbar items ( Add, Print) including toolbar of Grid2 component.




In the ComboBox, I do not see icon of Grid exporting options, how can I achieve them

thanks,

TD

Thavasianand Sankaranarayanan [Syncfusion]
Replied On October 2, 2019 10:34 AM UTC

Hi Thi, 

Thanks for your update. 

Based on your query we suspect that you want to have built in toolbar with your template toolbar in your Grid. We can achieve your requirement using the below code example. 

[App.Vue] 

<ejs-grid ref="grid2" 
              :dataSource="data" 
              height="400px" 
              :editSettings="editSettings" 
              :toolbar="toolbarTemplate" 
              :toolbarClick="clickHandler" 
              :allowExcelExport="true" 
              :allowPdfExport="true" 
              :allowGrouping="true" 
              :groupSettings="groupOptions"> 
        <e-columns> 
             
             . . . . 
 
        </e-columns> 
    </ejs-grid> 

        .  .  . .  
  
         
    toolbarTemplate: ["Add", 
        "Print", 
        "Search", 
        { 
            template: function () { 
                return { 
                    template: Vue.component("custom-toolbar", { 
                        template: `<ejs-toolbar > 
                        <e-items> 
                            <e-item id='collapse' text='Collapse All' prefixIcon='e-collapse'></e-item> 
                            <e-item id='collapse1' text='Collapse Out' prefixIcon='e-collapse'></e-item> 
                            <e-item id="comboboxTemp" :template='vueTemplate'></e-item> 
                        </e-items> 
                    </ejs-toolbar>`, 
            } 
        } 
 
          . . . . 
 
    ] 
  
        .  .  .   . 


We have prepared a sample in the following link. 


Refer the help documentation. 


Regards, 
Thavasianand S. 


Thin D
Replied On October 2, 2019 03:34 PM UTC

Hello 

Thanks for your help.

It works perfectly well.

But there is an problem when I changed the size of browser, please see the screen shot below



Please review and advise.

Thanks,
TD.



Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On October 3, 2019 02:18 PM UTC

Hi Thin,  

We could see the problem “toolbar inserting the item navigation (left,right arrows) twice while resizing the window”. We suggest to use following way to resolve the reported problem in the toolbarTemplate in Vue platform. Please refer the below code example for more information. 
 
[App.vue] 
<ejs-grid 
      ref="grid2" 
      :dataSource="data" 
      height="400px" 
      :editSettings="editSettings" 
      :toolbar="toolbarTemplate" 
      :toolbarClick="clickHandler" 
      :allowExcelExport="true" 
      :allowPdfExport="true" 
      :allowGrouping="true" 
      :groupSettings="groupOptions" 
    > 
.    .    .     . 
    </ejs-grid> 
  </div> 
</template> 
toolbarTemplate: ["Add", 
        "Print", 
        "Search", 
        "PdfExpoprt", 
        "CsvExpoprt", 
        { 
          template: function() { 
            return { 
              template: Vue.component("custom-toolbar", { 
                template: `                 
                   <div class= 'content'><ejs-combobox id='cTemplate' :dataSource='CBData' :placeholder='waterMark' :select='CBSelectAction'></ejs-combobox></div> 
        `, 
                data: function() { 
                  return { 
                     waterMark: "Select Export option", 
                              CBData: [ 
                                "Excel Export", 
                                "PDF Export", 
                                "CSV Export" 
                              ],                 
                  }; 
                }, 
                methods: { 
                            CBSelectAction(args) { 
                              var gridInstance = parentsUntil( 
                                this.$el, 
                                "e-grid" 
                              ).ej2_instances[0]; 
                              if (args.itemData.value === "Excel Export") { 
                                gridInstance.excelExport(); 
                              } else if (args.itemData.value === "PDF Export") { 
                                gridInstance.pdfExport(); 
                              } else if (args.itemData.value === "CSV Export") { 
                                gridInstance.csvExport(); 
                              } 
                            } 
                          } 
              }) 
            }; 
          } 
        } 
      ] 
    }; 



Regards, 
Seeni Sakthi Kumar S 


Thin D
Replied On October 4, 2019 12:58 AM UTC

Great, it works.


Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On October 4, 2019 05:37 AM UTC

 
Thanks for your update.  
 
We are happy to hear that your requirement has been achieved. 
 
Regards,  
Seeni Sakthi Kumar 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