Vue Custom Dialog Template footer buttons

Question

I have a data grid that show schema list. Edit settings include: allow add, edit, delete, mode: Dialog, using template as vue component.

In my template, i want footer buttons have Move Up, Move Down, Save to File, Save, Cancel ...

How can change or remove footer buttons (Save and Cancel) on Dialog Template.

How can manual control Save, Cancel action .. on Dialog Template.

My idea is use custom items toolbar and handle my custom dialog. This idea is possible?

Thiyagu Subramani · Accepted Answer

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:  

  

API Link : https://ej2.syncfusion.com/vue/documentation/api/grid/#actioncomplete 
               : https://ej2.syncfusion.com/vue/documentation/api/grid/#endedit 
               : https://ej2.syncfusion.com/vue/documentation/api/grid/#closeedit 

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(); 
      } 
    } 
 
 
  
 
Reference link : https://ej2.syncfusion.com/vue/documentation/grid/tool-bar/#custom-toolbar 

API link :  https://ej2.syncfusion.com/vue/documentation/api/grid/#toolbarclick 
               : https://ej2.syncfusion.com/vue/documentation/api/grid/#startedit  
               : https://ej2.syncfusion.com/vue/documentation/api/grid/#selectrow 

Sample link :  https://codesandbox.io/s/vue-template-lsd2f 

Please get back to us, if you need any further assistance. 

Regards, Thiyagu S.

Kha Chan Thanh · Answer

Thanks Thiyagu Subramani

Thiyagu Subramani · Answer

Hi Kha, 

We are glad to assist you. 

Please get back to us, if you need any further assistance. 

Regards, 
Thyagu S