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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Customize buttons in Dialog Edit mode

Thread ID:

Created:

Updated:

Platform:

Replies:

142800 Feb 20,2019 10:37 AM UTC Feb 21,2019 12:36 PM UTC Angular - EJ 2 1
loading
Tags: Grid
Sahal
Asked On February 20, 2019 10:37 AM UTC

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



Madhu Sudhanan P [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;