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. Image for the cookie policy date
  1. Home
  2. Forum
  3. Vue
  4. Built-in and toolbarTemplate in toolbar

Built-in and toolbarTemplate in toolbar

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

7 Replies
TS Thavasianand Sankaranarayanan Syncfusion Team October 1, 2019 03:43 AM

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. 


TD Thin D October 1, 2019 10:20 AM

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

TS Thavasianand Sankaranarayanan Syncfusion Team October 2, 2019 05:34 AM

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. 


TD Thin D October 2, 2019 10:34 AM

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.



SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 3, 2019 09:18 AM

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 


TD Thin D October 3, 2019 07:58 PM

Great, it works.


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 4, 2019 12:37 AM

 
Thanks for your update.  
 
We are happy to hear that your requirement has been achieved. 
 
Regards,  
Seeni Sakthi Kumar S 


Loader.
Live Chat Icon For mobile
Up arrow icon