Grid column set editType programmatically on actionBegin

[Maxwell Sands]

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');
    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,
      height: 'auto',
      width: 'auto',
      load() {
        this.editSettings.allowAdding = reviewId === null;
        this.editSettings.allowEditing = reviewId !== null;
      },
      toolbar: ['Edit', 'Update', 'Cancel', 'Add'],
      editSettings: {
        allowEditing: false,
        allowAdding: false,
        allowDeleting: false,
        mode: 'Normal',
        showDeleteConfirmDialog: true,
      },
      columns: [
        {field: 'rwtLoannumber', headerText: 'RWT Loan #', allowEditing: false},
        {
          field: 'reviewType', headerText: 'Review Type', textAlign: 'Left', allowEditing: true, edit: {
            params: {
              allowFiltering: true,
              dataSource: new DataManager(this.reviewTypes),
              fields: {text: 'reviewTypeName', value: 'reviewTypeName'},
              query: new Query(),
              actionComplete: () => false,
            },
          }
        },
        {
          field: 'disaster', headerText: 'Disaster Type', 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',
          textAlign: 'Right',
          visible: false,
        },
        {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) {
        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'],
      editSettings: {
        allowEditing: true,
        allowAdding: false,
        allowDeleting: false,
        mode: 'Normal',
        showDeleteConfirmDialog: true,
      },
      columns: [
        {field: 'taskAdditionalFieldName', headerText: 'Task Field'},
        {field: 'response', headerText: 'Response'},
      ],


      actionBegin(args: AddEventArgs) {
        if (args.requestType === 'beginEdit') {
          that.getEditType(args.rowData as TaskAdditionalDetail)
        }
      },


    });
    this.taskAdditionalInfoGridInstance.appendTo(element2);
  }


  private getEditType(taskData: TaskAdditionalDetail): void {


    this.taskAdditionalInfoGridInstance.columns.forEach((col) => {
      if (col.field === 'response') {
        if (taskData.responseType === 'response_as_dt') {
          col.format = 'MM/dd/yyyy';
          col.type = 'date';
          col.allowEditing = true;
          col.editType = 'datepickeredit';
          // col.edit = {
          //   params: {
          //     allowFiltering: true,
          //     //dataSource: new DataManager(taskData as Object),
          //     fields: {text: taskData.response, value: taskData.response},
          //     query: new Query(),
          //     actionComplete: () => false,
          //   },
          // },


        } if (taskData.responseType === 'response_as_lookup_id') {


        } if (taskData.responseType === 'response_as_integer') {


        }if (taskData.responseType === 'response_as_decimal') {


        }if (taskData.responseType === 'response_as_string') {


        }
      }
    });
  }

The above sets up nested grids, one of which I want to be able to programmatically change the editType based on data the Grid is displaying, however it just maintains the text input default even though the column editType is being set.

[Rajapandi Ravi]

Hi Maxwell, 

Greetings from Syncfusion support 

We have checked your shared information and we could see that you are setting the column editType in actionBegin event while editing the record. After setting editType in the Grid columns, we need to call refreshColumns() method to reflect the changes in the Grid. Since you are setting column editType while editing, at this time we cannot call the refreshColumns() method.  

By calling this method the Grid will starts re-render the Grid columns, the editing form was not opened at this time. To achieve your requirement, we need to prevent the default editing actions by setting args.cancel as true. 

Based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information. 

 

this.childGrid = { 

            dataSource: orderDatas, 

            queryString: 'EmployeeID', 

            allowPaging: true, 

            actionBegin: function(args) { 

                if (args.requestType === 'beginEdit') { 

                    if(this.columns[3].editType === undefined) { 

                        args.cancel = true; //prevent the default editing actions 

                        this.columns[3].editType = 'dropdownedit'; 

                        this.refreshColumns(); 

                        setTimeout(function (args) { 

                            const rowDetails: any = +args.row.getAttribute("aria-rowindex"); 

                            this.selectRow(rowDetails); 

                            this.startEdit(); 

                        }.bind(this), 100, args); 

                    } 

                     

         

                } 

            }, 

            pageSettings: {pageSize: 6, pageCount: 5}, 

            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal', newRowPosition: 'Top' }, 

            columns: [ 

                { field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', textAlign: 'Right', width: 120 }, 

                { field: 'ShipCity', headerText: 'Ship City', width: 120 }, 

                { field: 'Freight', headerText: 'Freight', width: 120 }, 

                { field: 'ShipName', headerText: 'Ship Name', width: 150 } 

            ] 

        }; 

    

Sample: https://stackblitz.com/edit/angular-pgj8az?file=app.component.ts 

API: https://ej2.syncfusion.com/angular/documentation/api/grid/#startedit 

        https://ej2.syncfusion.com/angular/documentation/api/grid/#refreshcolumns 

        https://ej2.syncfusion.com/angular/documentation/api/grid/#selectrow 

Regards, 

Rajapandi R