Facing problem while adding new record to grid

Question

I am using json binding for datasource. I am getting list of user in json format from server and I bind it to the datasource.@ViewChild('grid')public grid!: GridComponent;userForm = new User();actionInProgress!: string;rolesMap = new Map();users: IUser[] | undefined;organizations: IOrganization[] | undefined;roleData: IRole[] | undefined;// usersData!: { result: IUser[] | undefined, count: number | undefined };usersData!: IUser[] | undefined;editSettings!: EditSettingsModel;toolbar!: ToolbarItems[];filterOption: FilterSettingsModel = { ignoreAccent: true, type : "Excel"}serverError!: string;testServerError = "TestError";rowOddEvenCounter = 1;public fields: Object = {text: 'name', value: 'id'};editParams = {params: {popupHeight: '300px', allowFiltering: true}};selectedOrg!: number;showPassword = false;selectedRoles!: number[];usernameValidationRules = {required: true, minLength: 3};ngOnInit(): void { this.editSettings = {allowEditing: true, allowAdding: true, mode: "Dialog"}; this.toolbar = ["Add", "Edit", "ColumnChooser", "PdfExport", "ExcelExport", "CsvExport", "Search"]; this._userService.getUsers$.subscribe(response => { if(response.error) { this.errorHandling(response.error); } else { this.users = response.serverData?.dataList; this.usersData = this.users; this._loggingService.debug("Users received from server:" + this.users?.length); } }); this._orgService.getOrgs$.subscribe(response => { if(response.error) { this.errorHandling(response.error); } else { this.organizations = response.serverData?.dataList; this._loggingService.debug("Organisations received from server:" + this.organizations?.length); } }); this._roleService.getRoles$.subscribe(response => { if(response.error) { this.errorHandling(response.error); } else { this.roleData = response.serverData?.dataList; if(this.roleData !== undefined) { this.prepareRoleMap(this.roleData); } this._loggingService.debug("Roles received from server:" + this.roleData?.length); } });}trying to save data:async actionBegin($event: any) { console.log($event); if($event.request === "add") { this._loggingService.debug("Adding User start") this.actionInProgress = "add"; } if($event.requestType === "beginEdit") { this._loggingService.debug("Editing User start") this.actionInProgress = "beginEdit"; } if($event.requestType === "save") { this._loggingService.debug("Saving User start") this.prepareUserForSave(); let serverResponse$ = this._userService.addUse$(this.userForm) let serverResponse = await lastValueFrom(serverResponse$); let responseUser!: IUser; if(serverResponse.error) { this.errorHandling(serverResponse.error); } else { if(serverResponse.serverData?.data !== undefined) { responseUser = serverResponse.serverData?.data; } } this.usersData?.push(responseUser) this.grid.refresh(); }}This is my html file

Error ! {{serverError}}

Locked

Expired

Enabled

There are multiple problems while adding new record:1- New added Row not showing all the fields(value in cells), I have updated the dataSource in TS file by adding the record in usersData array which is bind to grid datasource and then refresh the grid, but updated record not showing in the grid. If I refresh the page then it works fine as data is saving on server as expected.2- I want to stay on save/edit dialog if the server send error, is it possible with this type of datasource binding.3- How to disable the save button until form is valid4- Is there a way where I can prevent showing the edit/add dialog and redirect to another page.5- Is there any way to prevent the newly added record showing in the grid.Looking forward for your response, thanks !

Surabhi Gangwar · Answer

More info: I observe that record has added twice. The record with all data shows on Grid refresh. I used grid refresh as a workaround to insert row in grid only after the successful response.

Pavithra Subramaniyam · Answer

Hi Surabhi Gangwar,Thanks for contacting Syncfusion support.Query#1: New added Row not showing all the fields(value in cells),
I have updated the dataSource in TS file by adding the record in usersData
array which is bind to grid datasource and then refresh the grid, but updated
record not showing in the grid. If I refresh the page then it works fine as
data is saving on server as expected.We have noticed that you are calling the “grid.refresh” method
inside the “actionBegin” event when saving the data which is the cause of the
reported scenario. If you want to modify the dataSource programmatically with
the added values in the dialog, then you can cancel the default add action and call
the “closeEdit” method which cancels the edited state. Then you can modify the
dataSource and call the grid refresh method. Please refer to the below code
example for more information.

async actionBegin($event: any) {
      console.log($event);
      if ($event.requestType === 'save' && $event.action === 'add') {
          $event.cancel = true;
          this.usersData.push($event.data);
          this.grid.closeEdit();
          this.grid.refresh();
      }
  }

https://ej2.syncfusion.com/angular/documentation/api/grid/#closeeditQuery#2: I want to stay on save/edit dialog if the server send
error, is it possible with this type of datasource binding.Our EJ2 Grid has only the client-side validation. If you want to
perform the validation on server side, you can achieve your requirement by
using actionBegin event (requestType as save) of
Grid.In that event, we prevent the save action by setting args.cancel
as true and save the data only when the server side validation becomes
true.

public isValid: boolean = false;

function actionBegin(args) {
         
  if (args.requestType == "save"
  && args.action == "edit") {
             
  if (!this.isValid) {
                 
  args.cancel = true; // prevent the save action to validate the value

//
  perform server side validation for edit action here
                     
  let ajax = new Ajax({
                         
  url: "xxx/EditValidation",
                         
  contentType: "application/json; charset=utf-8",
                         
  data: JSON.stringify(args.data), // send the edited
  data to the server
                         
  type: "POST"
                     
  });
                     
  ajax.send();
                     
  ajax.onSuccess = function (result) {
                         
  if (JSON.parse(result).validationResult) {
                             this.isValid = true; // make the flag variable as true once the
  validation becomes true
                             this.grid.endEdit();// save the data

} else {
                             
  alert(JSON.parse(result).errorMsg);
  // show the error message
                         
  }
    
                   }
             
  } else {
                 this.isValid = false;
             
  }
         
  }
      }

Query#3: How to disable the save button until form
is validBy default, we don’t have any option to disable the save button
until some condition is satisfied. As a workaround, you can disable the button
inside the actionComplete event and add the “validationComplete”
event to the grid edit form. This event will be triggered when the validation
is done after hitting the “Enter” action. Inside this event handler, you can check
your conditions and enable the button again. Please refer to the below code
example for more information.

actionComplete(args: DialogEditEventArgs): void {
      if(args.requestType === 'beginEdit' || args.requestType === 'add') {
      args.dialog.btnObj[0].disabled = true;
      args.form.ej2_instances[0].validationComplete = (e) => {
          // check your condition here
          args.dialog.btnObj[0].disabled = false;
      };
  }
  }

https://ej2.syncfusion.com/documentation/api/button#disabledhttps://ej2.syncfusion.com/documentation/api/form-validator#validationcompleteQuery#4: Is there a way where I can prevent showing
the edit/add dialog and redirect to another page.There is no default support for page redirection while editing/adding. However,
You can cancel the default edit/add actions inside the “actionBegin”
event using the “args.cancel” property and add your implementation for
redirection.

function actionBegin(args): void {
      if (args.requestType === 'beginEdit' || args.requestType === 'add') {
          args.cancel = true;
          // here you can do your requirement
      }
  }

Query#5: Is there any way to prevent the newly added record
showing in the grid.No, the newly added rows will be reflected in the Grid. This is
the default behavior and use case of the Grid “Add” action.Query#6: I observe that record has added twice.Since you are adding the data through the default add action and also
push the dataSource and refresh the Grid inside the “actionBegin” event, the
data is added twice. So Please add the solution provided for “Query#1”
to overcome the issue.Regards,Pavithra S

Surabhi Gangwar · Answer

Hi Pavithra, You guys are awesome, thanks for the replies.You replies are very helpful and solve most of my problems.

Suganya Gopinath · Answer

Hi Surabhi,We are glad to hear it from you. Please get back to us if you have any other queries in future. We are always happy to help you.Regards,Suganya Gopinath.