1. Home
  2. Forum
  3. Angular - EJ 2
  4. Customize buttons in Dialog Edit mode

Customize buttons in Dialog Edit mode

Hi 

Is there a way to change the default action or add buttons to the dialog edit of grid

My use case is to add a button called "Save & New" by which it will add/update the current record and create a new record without closing the dialog.

Also can the dialog editors be navigated using the enter key

Use Case : user can edit each field and navigate to next one using the enter key. When last field is reached  the above save and new button click should fire



1 Reply
MS Madhu Sudhanan P Syncfusion Team February 21, 2019 12:36 PM UTC

Hi Sahal, 

Thanks for contacting Syncfusion support. 

We have analyzed your requirement. We have achieved this requirement by using the “Dialog” mode of editing in Grid and binding the “actionBegin” and “actionComplete” event handlers to Grid. Based on this requirement we have prepared a sample which could be downloaded from the link below, 

Please refer the code example below, 

[html]     
 
   <ejs-grid #gridOrder [dataSource]='orderData' ...(actionBegin)='begin($event)' (actionComplete)='complete($event)'>  
        ... 
   </ejs-grid> 
 

Query 1 : add a button called "Save & New" by which it will add/update the current record and create a new record without closing the dialog. 
We suggest you to refer to the below documentation to customize the add dialog in Grid. 
 
In the below code, we have used the requestTyep as “add” in the “actionComplete” event handler to customize the display text of default “save” button in dialog and also with the requestType as “save” we have programmatically clicked the toolbar button “Add” to open the dialog after save the current entered values in Grid . Please refer the code below, 
 
[ts] 
 
public complete(args:any) { 
   if(args.requestType == "save"){ 
      (document.getElementsByClassName("e-tbar-btn")[0] as any).click();       //Get the toolbar add button and perform click 
   } 
   if (args.requestType === 'add') { 
      let dialog = args.dialog; 
      dialog.element.querySelectorAll(".e-primary")[0].innerHTML = "Save & New";  //Customize the default “save” button text 
      ... 
   } 
} 
 
 
Query 2 : dialog editors be navigated using the enter key 
We suggest you to bind the “keydown” event to the dialog in the “actionComplete” event handler by checking for the “requestType” as “add”. And with the keydown handler we can set the focus for the corresponding fields in the form when pressing the “Enter” key. And also we need to prevent the save action in the “actionBegin” event handler by checking for the requestType as “save” and other flag variables to cancel the save action. Please refer the code below, 

[ts] 
 
   public begin(args:any){ 
      if(args.requestType == "save" && this.code == 13 && !this.savecall){ 
        args.cancel = true;                 //Cancel the save action 
        this.code = null; 
      } else { 
        this.savecall = false; 
      } 
   } 
   public complete(args:any){ 
     ... 
     if (args.requestType === 'add') { 
      ... 
      dialog.element.addEventListener('keydown', function (e) { 
        this.code = e.keyCode; 
        if (e.keyCode == 13) { 
          (this.grid as any).keyConfigs.enter = "";     //Clear the config of “enter” key 
          (e.target as any).parentElement.classList.remove('e-input-focus'); 
          let currentEle: any = parentsUntil(e.target as any, 'e-rowcell');     //Get the current focus element 
          let currentIdx: any = (currentEle.parentElement as any).rowIndex;     //Get the current field index in form 
          let gForm: any = parentsUntil(currentEle as any, 'e-gridform');          //Get the form element in the Dialog 
          if(currentEle.parentElement.parentElement.querySelectorAll("tr").length-1 == currentIdx){ //Check for the last field in form is reached 
            this.savecall = true; 
          } else {   //Here we can set focus for the next field in form 
            let nextInput: any = gForm.querySelectorAll('input')[currentIdx + 1]; 
            nextInput.focus(); 
            nextInput.parentElement.classList.add('e-input-focus'); 
          } 
        } 
      }.bind(this)) 
    } 
   } 
 

Documentations :  
 
Please get back to us if you need further assistance. 

Regards, 
Madhu Sudhanan P 


Loader.
Up arrow icon