Built-in and toolbarTemplate in toolbar
Hello there,
I want to use both built-in and toolbarTemplate at same time.
My sample code: https://codesandbox.io/s/vue-template-nzn2s
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
SIGN IN To post a reply.
7 Replies
TS
Thavasianand Sankaranarayanan
Syncfusion Team
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>
|
Sample link: https://codesandbox.io/s/vue-template-glb5q
Help Documentation: https://ej2.syncfusion.com/vue/documentation/toolbar/how-to/render-other-components-in-toolbar-using-template/
Please get back to us, if you need further assistance.
Regards,
Thavasianand S.
TD
Thin D
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
TS
Thavasianand Sankaranarayanan
Syncfusion Team
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.
Link: https://ej2.syncfusion.com/vue/documentation/grid/tool-bar/#built-in-and-custom-items-in-toolbar
Regards,
Thavasianand S.
TD
Thin D
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.
SS
Seeni Sakthi Kumar Seeni Raj
Syncfusion Team
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();
}
}
}
})
};
}
}
]
};
|
Sample link: https://codesandbox.io/s/vue-template-q89il
Regards,
Seeni Sakthi Kumar S
TD
Thin D
October 4, 2019 12:58 AM UTC
Great, it works.
SS
Seeni Sakthi Kumar Seeni Raj
Syncfusion Team
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
SIGN IN To post a reply.
- 7 Replies
- 3 Participants
-
TD Thin D
- Sep 30, 2019 02:57 PM UTC
- Oct 4, 2019 05:37 AM UTC
