Vue Custom Dialog Template footer buttons
3 Replies
Hi Kha,
Thanks for contacting Syncfusion forum.
Based on your reported information, we can achieve your requirement using adding buttons to dialog footer element in actionComplete event and bind separate click events to perform its actions manually. Please refer to the below code and screenshot.
|
actionComplete(args) {
// Set initail Focus
if (args.requestType === "beginEdit") {
args.form.elements.namedItem("CustomerID").focus();
}
if (args.requestType === "beginEdit" || args.requestType === "add") {
// set buttons here....
args.dialog.buttons = [
{
buttonModel: {
isPrimary: true,
content: "Save",
iconCss: "e-icons e-ok-icon"
},
click: this.saveBtnClick
},
{
buttonModel: {
isPrimary: true,
content: "Cancel",
iconCss: "e-icons e-close-icon"
},
click: this.cancelBtnClick
},
{
buttonModel: {
isPrimary: true,
content: "Save To file",
iconCss: "e-icons e-close-icon"
},
click: this.saveToFileBtnClick
},
{
buttonModel: {
isPrimary: true,
content: "Move Up",
iconCss: "e-icons e-close-icon"
},
click: this.moveUpBtnClick
},
{
buttonModel: {
isPrimary: true,
content: "Move Down",
iconCss: "e-icons e-close-icon"
},
click: this.moveDownBtnClick
}
];
}
},
saveBtnClick(args) {
this.$refs.gridObj.endEdit(); // perform actions here.
},
cancelBtnClick(args) {
this.$refs.gridObj.closeEdit(); // perform actions here.
},
saveToFileBtnClick(args) {
console.log("file saved"); // perform actions here.
},
moveUpBtnClick(args) {
console.log("move up"); // perform actions here.
},
moveDownBtnClick(args) {
console.log("move down"); // perform actions here.
} |
Screenshot:
Query : Custom items toolbar and handle my custom dialog. This idea is possible?
Based on your reported information we suspect your requirement is “ Need to handle custom dialog using custom toolbar”. For this case using custom toolbar item we have created custom button (dialog) and using toolbarClick we have opened dialog for row index of 0. Using this you can achieve your requirement. Please refer to the below code.
|
<ejs-grid
ref="gridObj"
. . . . . . .
:toolbar="toolbar"
:toolbarClick="clickHandler"
height="273px"
>
toolbar: [ "Add", "Edit","Delete","Update", "Cancel", {
text: "Dialog",
tooltipText: "Custom Dialog",
prefixIcon: "e-expand",
id: "dialog"
}
]
clickHandler(args) {
if (args.item.id === "dialog") {
this.$refs.gridObj.selectRow(0);
this.$refs.gridObj.startEdit();
}
} |
Sample link : https://codesandbox.io/s/vue-template-lsd2f
Please get back to us, if you need any further assistance.
Regards,
Thiyagu S.
SIGN IN To post a reply.
