1. Home
  2. Forum
  3. Angular - EJ 2
  4. Child Grid numericEdit not displaying Currency

Child Grid numericEdit not displaying Currency

I have a child grid where I am programattically setting the editType and the edit.params. I want the format for the numericedit to be a currency with a leading dollar sign and two decimal places.


if (data.responseType === 'response_as_decimal' && !isSameAsPrevious) {
  args.cancel = true;
  this.columns[1].edit.params.dataSource = data.responseAsDecimal;
  this.columns[1].editType = 'numericedit';
  this.columns[1].format = 'C';
  this.columns[1].edit.params.validateDecimalOnType = true;
  this.columns[1].edit.params.decimals = 2;
  this.columns[1].edit.params.format = 'C2';
  this.columns[1].validationRules = UtilService.decimalfieldrule;
  this.refreshColumns();
  setTimeout(function (args) {
    const rowDetails: any = +args.row.getAttribute("aria-rowindex");
    this.selectRow(rowDetails);
    this.startEdit();
  }.bind(this), 100, args);
}

the above is the chunk of code setting the editType. When I view the page it looks like the beneath picture. I would like the data to show a $ in the front and two decimal places as well as separating commas between hundred, thousands, etc. 



5 Replies
JC Joseph Christ Nithin Issack Syncfusion Team March 7, 2022 03:38 PM UTC

Hi Maxwell, 

  Greetings from Syncfusion support. 

 Before proceeding to the solution we would like you to share the following details so that we may be able to provide a better solution ASAP. 

  • On inspecting the code example provided we could find that you have used args.cancel, which is usually used inside an event, kindly share the event which you are using.
  • Please share the complete grid rendering code example you are using.
  • Share a screenshot or video of the issue you are facing.
  • Share the screenshot of the script error if any.
  • Share the Syncfusion package version you are using.

Regards, 
Joseph I.     


MS Maxwell Sands March 7, 2022 08:45 PM UTC

Here is the entire event. 


actionBegin(args: EditEventArgs) {
  if (args.requestType === 'save') {
    if(args['data']['response'] === '') {
      args['data']['response'] = null;
    }
  }
  if (args.requestType === 'beginEdit') {
    floodInsuranceSelected = true;
    bulkWired = false;
    const data = args.rowData as TaskAdditionalDetail;
    const isSameAsPrevious = previousEdit === data.taskAdditionalFieldName;

    if (data.isCalculated || !(userRole === Role.ServicingOversightAnalyst || userRole === Role.BusinessAdmin || userRole === Role.ServicingOversightManager)) {
      this.columns[1].allowEditing = false;
      return;
    }

    if(data.taskAdditionalFieldName === 'Flood Zone Detail') {
      this.dataSource.forEach((task) => {
        if(task['taskAdditionalFieldName'] === 'Flood Insurance' && task['response'] !== 'Yes') {
          floodInsuranceSelected = false;
        }
      });
    }

    this.columns[1].allowEditing = true;
    if(!floodInsuranceSelected) {
      this.columns[1].allowEditing = false;
    }


    if(data.taskAdditionalFieldName === 'If Bulk Wire - Amount') {
      this.dataSource.forEach((task) => {
        if(task['taskAdditionalFieldName'] === 'Funds Origination') {
          if (task['response'] === 'Wire - Bulk') {
            this.columns[1].allowEditing = true;
          } else {
            this.columns[1].allowEditing = false;
          }
        }
      });
    }

    previousEdit = data.taskAdditionalFieldName;

    if(data.responseType === 'response_as_lookup_id' && !isSameAsPrevious) {
      args.cancel = true;
      this.columns[1].editType = 'dropdownedit';
      this.columns[1].edit.params.dataSource = data.responseOptions;
      this.columns[1].validationRules = {};
      this.refreshColumns();
      setTimeout(function (args) {
        const rowDetails: any = +args.row.getAttribute("aria-rowindex");
        this.selectRow(rowDetails);
        this.startEdit();
      }.bind(this), 100, args);
    }

    if(data.responseType === 'response_as_dt' && !isSameAsPrevious) {
      args.cancel = true;
      this.columns[1].editType = 'datepickeredit';
      this.columns[1].format = 'MM/dd/yyyy';
      this.columns[1].validationRules = { date: true };
      this.refreshColumns();
      setTimeout(function (args) {
        const rowDetails: any = +args.row.getAttribute("aria-rowindex");
        this.selectRow(rowDetails);
        this.startEdit();
      }.bind(this), 100, args);
    }
    if((data.responseType === 'response_as_integer') && !isSameAsPrevious) {
      args.cancel = true;
      this.columns[1].editType = 'numericedit';
      this.columns[1].edit.params.decimals = 2;
      this.columns[1].edit.params.format = data.responseType === 'response_as_integer' ? 'n' : 'c2';
      this.columns[1].validationRules = UtilService.decimalfieldrule;

      this.refreshColumns();
      setTimeout(function (args) {
        const rowDetails: any = +args.row.getAttribute("aria-rowindex");
        this.selectRow(rowDetails);
        this.startEdit();
      }.bind(this), 100, args);
    }
    if (data.responseType === 'response_as_decimal' && !isSameAsPrevious) {
      args.cancel = true;
      this.columns[1].edit.params.dataSource = data.responseAsDecimal;
      this.columns[1].editType = 'numericedit';
      this.columns[1].format = 'C';
      this.columns[1].edit.params.validateDecimalOnType = true;
      this.columns[1].edit.params.decimals = 2;
      this.columns[1].edit.params.format = 'C2';
      this.columns[1].validationRules = UtilService.decimalfieldrule;
      this.refreshColumns();
      setTimeout(function (args) {
        const rowDetails: any = +args.row.getAttribute("aria-rowindex");
        this.selectRow(rowDetails);
        this.startEdit();
      }.bind(this), 100, args);
    }

    if (data.responseType === 'response_as_string' && !isSameAsPrevious) {
      args.cancel = true;
      this.columns[1].editType = 'defaultEdit';
      this.columns[1].validationRules = {};
      this.refreshColumns();
      setTimeout(function (args) {
        const rowDetails: any = +args.row.getAttribute("aria-rowindex");
        this.selectRow(rowDetails);
        this.startEdit();
      }.bind(this), 100, args);
    }

  }
}

Grid Rendering


public taskAdditionalInfoGridInstance: Grid;

const element2 = args.detailElement.querySelector('.childGrid2');

this.taskAdditionalInfoGridInstance.appendTo(element2);

Syncfusion version 18.4.46


There isn't really a video or screen shot that can be given. The fields I want to display as currency just display as numbers with decio


JC Joseph Christ Nithin Issack Syncfusion Team March 8, 2022 05:20 PM UTC

Hi Maxwell, 

  Thanks for your update. 

  Before proceeding to the solution we still need some more information so that we may be able to provide a better solution ASAP. 

  • Please share the Edit mode you are using.
  • Please share the complete code related to the grid and the child grid you are using or share a simple sample to reproduce the issue.
  • Share a screenshot or video of the grid that describes the issue you are facing.

Kindly share the above details without which we are not able to proceed further and this will help up assist you in a better way. 

Regards, 
Joseph I.  


MS Maxwell Sands March 8, 2022 10:27 PM UTC

here is the complete code

as you can see a lot of stuff is getting set programmatically

the problem is not being able to keep the $ and %

public detailDataBound(args): void {
  const that = this;
  const state: any = {skip: 0, take: 5};
  const taskId = args.data['taskId']
  const element1 = args.detailElement.querySelector('.childGrid1');
  let previousEdit = '';
  let floodInsuranceSelected = true;
  let bulkWired = false;
  const userRole = this.authService.getLoginUserRole


  const child1Data = new DataManager(this.reviewInfo).executeLocal(
    new Query().where('taskId', 'equal', taskId)
  );

  const rwLoanNumber = args.data.rwtLoanNumber;
  const reviewId = child1Data.length > 0 ? child1Data[0]['reviewId'] : null;

  this.reviewInfoGridInstance = new Grid({
    dataSource: child1Data,
    clipMode: 'EllipsisWithTooltip',
    height: 'auto',
    width: 'auto',
    load() {
      this.editSettings.allowAdding = reviewId === null && (userRole === Role.ServicingOversightAnalyst || userRole === Role.BusinessAdmin || userRole === Role.ServicingOversightManager);
      this.editSettings.allowEditing = reviewId !== null && (userRole === Role.ServicingOversightAnalyst || userRole === Role.BusinessAdmin || userRole === Role.ServicingOversightManager);
    },
    toolbar: ['Add', 'Edit', 'Update', 'Cancel'],
    editSettings: {
      allowEditing: false,
      allowAdding: false,
      allowDeleting: false,
      mode: 'Normal',
      showDeleteConfirmDialog: true,
    },
    columns: [
      {field: 'rwtLoannumber', headerText: 'RWT Loan #', allowEditing: false},
      {
        field: 'reviewType', headerText: 'Review Type', editType: 'dropdownedit', textAlign: 'Left', autoFit: true, allowEditing: true, edit: {
          params: {
            allowFiltering: true,
            dataSource: that.reviewTypes,
            fields: {text: 'reviewTypeName', value: 'reviewTypeName'},
            query: new Query(),
            actionComplete: () => false,
          },
        }
      },
      {
        field: 'disaster', headerText: 'Disaster Type', editType: 'dropdownedit', textAlign: 'Left', allowEditing: true, edit: {
          params: {
            allowFiltering: true,
            dataSource: new DataManager(this.disasterType),
            fields: {text: 'disasterName', value: 'disasterName'},
            query: new Query(),
            actionComplete: () => false,
          }
        }
      },
      {
        field: 'createdDt',
        headerText: 'Created Date',
        format: 'MM/dd/yyyy',
        type: 'date',
        allowEditing: false,
        textAlign: 'Left',
        visible: true,
      },
      {field: 'createdBy', headerText: 'Created By', allowEditing: false},
      {
        field: 'status', headerText: 'Review Status', allowEditing: false, editType: 'dropdownedit', edit: {
          params: {
            allowFiltering: true,
            dataSource: new DataManager(this.reviewStatus),
            fields: {text: 'statusName', value: 'statusName'},
            query: new Query(),
            actionComplete: () => false,
          },
        }
      },
      {field: 'modifiedDt', headerText: 'Status Date', format: 'MM/dd/yyyy', type: 'date', allowEditing: false,},
      {field: 'statusComment', headerText: 'Comment', allowEditing: true,},
    ],
    actionBegin(args: AddEventArgs) {
      that.reviewErrorMessage = '';
      if (args.requestType === 'add') {
        (args.data as object)['rwtLoannumber'] = rwLoanNumber;
        that.setDropDownData();
      }

      if (args.requestType === 'beginEdit') {
        that.setDropDownData('edit');
      }
    },
    actionComplete(args) {
      if ("action" in args && args.requestType === 'save') {
        if (args.action === 'edit') {
          that.editReview(args, state);
        }
        if (args.action === 'add') {
          args.data['taskId'] = taskId;
          that.addReview(args);
        }
      }
    },
  });
  this.reviewInfoGridInstance.appendTo(element1);
  const element2 = args.detailElement.querySelector('.childGrid2');
  const child2Data = new DataManager(this.tasks).executeLocal(
    new Query().where('taskId', 'equal', args.data['taskId'])
  );

  this.taskAdditionalInfoGridInstance = new Grid({
    dataSource: child2Data,
    height: 'auto',
    width: 'auto',
    toolbar: ['Edit', 'Update', 'Cancel'],
    clipMode: 'EllipsisWithTooltip',
    editSettings: {
      allowEditing: (userRole === Role.ServicingOversightAnalyst || userRole === Role.BusinessAdmin || userRole === Role.ServicingOversightManager),
      allowAdding: false,
      allowDeleting: false,
      mode: 'Normal',
      showDeleteConfirmDialog: true,
    },
    columns: [
      {field: 'taskAdditionalFieldName', headerText: 'Task Field', allowEditing: false},
      {field: 'response', headerText: 'Response', edit: {
          params: {
            allowFiltering: true,
            query: new Query(),
            actionComplete: () => false,
          },
        }},
    ],
    actionBegin(args: EditEventArgs) {
      if (args.requestType === 'save') {
        if(args['data']['response'] === '') {
          args['data']['response'] = null;
        }
      }
      if (args.requestType === 'beginEdit') {
        floodInsuranceSelected = true;
        bulkWired = false;
        const data = args.rowData as TaskAdditionalDetail;
        const isSameAsPrevious = previousEdit === data.taskAdditionalFieldName;



        if (data.isCalculated || !(userRole === Role.ServicingOversightAnalyst || userRole === Role.BusinessAdmin || userRole === Role.ServicingOversightManager)) {
          this.columns[1] = new Column({field: 'response', headerText: 'Response', allowEditing: false, edit: {
              params: {
                allowFiltering: true,
                query: new Query(),
                actionComplete: () => false,
              },
            }});
          return;
        }


        if(data.taskAdditionalFieldName === 'Flood Zone Detail') {
          this.dataSource.forEach((task) => {
            if(task['taskAdditionalFieldName'] === 'Flood Insurance' && task['response'] !== 'Yes') {
              floodInsuranceSelected = false;
            }
          });
        }

        this.columns[1].allowEditing = true;
        if(!floodInsuranceSelected) {
          this.columns[1].allowEditing = false;
          return;
        }


        if(data.taskAdditionalFieldName === 'If Bulk Wire - Amount') {
          this.dataSource.forEach((task) => {
            if(task['taskAdditionalFieldName'] === 'Funds Origination') {
              if (task['response'] === 'Wire - Bulk') {
                this.columns[1].allowEditing = true;
              } else {
                this.columns[1].allowEditing = false;
                return;
              }
            }
          });
        }

        previousEdit = data.taskAdditionalFieldName;

        if(data.responseType === 'response_as_lookup_id' && !isSameAsPrevious) {
          args.cancel = true;
          this.columns[1].editType = 'dropdownedit';
          this.columns[1].edit.params = {
                          allowFiltering: true,
                          query: new Query(),
                          actionComplete: () => false,
                        };
          this.columns[1].edit.params.dataSource = data.responseOptions;
          this.columns[1].validationRules = {};
          this.refreshColumns();
          setTimeout(function (args) {
            const rowDetails: any = +args.row.getAttribute("aria-rowindex");
            this.selectRow(rowDetails);
            this.startEdit();
          }.bind(this), 100, args);
        }

        if(data.responseType === 'response_as_dt' && !isSameAsPrevious) {
          args.cancel = true;
          this.columns[1].edit.params = {
            allowFiltering: true,
            query: new Query(),
            actionComplete: () => false,
          };
          this.columns[1].editType = 'datepickeredit';
          this.columns[1].format = 'MM/dd/yyyy';
          this.columns[1].validationRules = { date: true, required: 0 };
          this.refreshColumns();
          setTimeout(function (args) {
            const rowDetails: any = +args.row.getAttribute("aria-rowindex");
            this.selectRow(rowDetails);
            this.startEdit();
          }.bind(this), 100, args);
        }
        if((data.responseType === 'response_as_integer') && !isSameAsPrevious) {
          args.cancel = true;
          this.columns[1].edit.params = {
            allowFiltering: true,
            query: new Query(),
            actionComplete: () => false,
            format: 'N',
            decimals: 0,
            validateDecimalOnType: true,
          };
          this.columns[1].editType = 'numericedit';
          this.columns[1].validationRules = UtilService.numericfieldruleLarge;

          this.refreshColumns();
          setTimeout(function (args) {
            const rowDetails: any = +args.row.getAttribute("aria-rowindex");
            this.selectRow(rowDetails);
            this.startEdit();
          }.bind(this), 100, args);
        }
        if (data.responseType === 'response_as_decimal' && !isSameAsPrevious) {
          args.cancel = true;
          this.columns[1].edit.params.dataSource = data.responseAsDecimal;
          this.columns[1].editType = 'numericedit';
          this.columns[1].format = 'C';
          this.columns[1].edit.params = {
            allowFiltering: true,
            query: new Query(),
            actionComplete: () => false,
            format: 'C2',
            decimals: 2,
            validateDecimalOnType: true,
          };
          this.columns[1].validationRules = UtilService.decimalfieldrule;
          this.refreshColumns();
          setTimeout(function (args) {
            const rowDetails: any = +args.row.getAttribute("aria-rowindex");
            this.selectRow(rowDetails);
            this.startEdit();
          }.bind(this), 100, args);
        }

        if (data.responseType === 'response_as_string' && !isSameAsPrevious) {
          args.cancel = true;

          this.columns[1].editType = 'defaultEdit';
          this.columns[1].format = '';
          this.columns[1].validationRules = {};
          this.columns[1].edit.params = {
            allowFiltering: true,
            query: new Query(),
            actionComplete: () => false,
          };
          this.refreshColumns();
          setTimeout(function (args) {
            const rowDetails: any = +args.row.getAttribute("aria-rowindex");
            this.selectRow(rowDetails);
            this.startEdit();
          }.bind(this), 100, args);
        }

      }
    },
    actionComplete(args) {
      if ("action" in args && args.requestType === 'save') {
        if(args.data['isCalculated'] || args.previousData['response'] === args.data['response']) {
          // if(args.data['responseType'] === 'response_as_dt') {
          //   const resetDate = new Date(args.data['response']);
          //   args.data['response'] = resetDate.toLocaleDateString();
          //   this.refreshColumns();
          // }
          return;
        }

        if(args.data['responseType'] === 'response_as_dt' && args.data['response'] !== null) {
          const resetDate = new Date(args.data['response']);
          args.data['response'] = resetDate.toLocaleDateString();
          this.refreshColumns();
        }

        if (args.action === 'edit') {
          if (typeof args.data['response'] === 'number') {
            args.data['response'] = args.data['response'].toString();
          }

          if(args.data['taskAdditionalFieldName'] === 'Flood Insurance' && args.data['response'] !== 'Yes') {
            this.dataSource.forEach((task) => {
              if(task['taskAdditionalFieldName'] === 'Flood Zone Detail' && (task['response'] !== '' || task['response'] !== null)) {
                task['response'] = null;
                that.addOrUpdateResponseInfo(task);
              }
            });
          }

          if(args.data['taskAdditionalFieldName'] === 'Funds Origination' && args.data['response'] !== 'Wire - Bulk') {
            this.dataSource.forEach((task) => {
              if(task['taskAdditionalFieldName'] === 'If Bulk Wire - Amount' && (task['response'] !== '' || task['response'] !== null)) {
                task['response'] = null;
                that.addOrUpdateResponseInfo(task);
              }
            });
          }

          if (args.data['response'] === args.previousData['response']) {
            return;
          }

          // if (typeof args.data['response'] === null) {
          //   return;
          // }

          that.addOrUpdateResponseInfo(args.data as TaskAdditionalDetail);
        }
      }
    }
  });

  this.taskAdditionalInfoGridInstance.appendTo(element2);
}

JC Joseph Christ Nithin Issack Syncfusion Team March 9, 2022 05:24 PM UTC

Hi Maxwell, 

  Thanks for your update. 

  On further validation we could see that you are defining the edit params separately, we suggest you to set the edit params as the below code example. 


actionBegin(args) { 
    if (args.requestType === 'beginEdit') { 
      let isSameAsPrevious = false; 
      debugger; 
      if (!isSameAsPrevious) { 
        args.cancel = true; 
        this.columns[1].editType = 'numericedit'; 
        this.columns[1].format = 'C'; 
        this.columns[1].edit = { params: { decimals: 2, format: 'C2' } }; 
        this.refreshColumns(); 
        setTimeout( 
          function (args) { 
            const rowDetails: any = +args.row.getAttribute('aria-rowindex'); 
            this.selectRow(rowDetails); 
            this.startEdit(); 
          }.bind(this), 
          100, 
          args 
        ); 
      } 
    } 
  } 




Please get back to us for further details. 

Regards, 
Joseph I.  


Loader.
Up arrow icon