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
