Cannot figure out how to capture cancel edit/add events or edit/add complete events

Question

I am trying to implement a child grid inside of an EJS Grid. I am attempting when I add, edit, cancel to return the child grid to its default state. Beneath I have the model instance of the Child Grid I am setting up, but I cannot for the life of me figure out how to capture those cancel events or edit complete, add complete events.

 public childGridInstance: GridModel | GridComponent = {
    queryString: 'taskId',
    toolbar: ['Edit', 'Update', 'Cancel', 'Add'],
    editSettings: {
      allowEditing: false,
      allowAdding: false,
      allowDeleting: false,
      mode: 'Normal',
      showDeleteConfirmDialog: true,
    },
    columns: [
      { field: 'rnumber', headerText: 'R#', allowEditing: true},
      { field: 'reviewType', headerText: 'Review Type', textAlign: 'Left', allowEditing: true, },
      { field: 'disaster', headerText: 'Disaster Type', textAlign: 'Left', allowEditing: true,  },
      { 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},
      { field: 'modifiedDt', headerText: 'Status Date', format: 'MM/dd/yyyy', type: 'date', allowEditing: false, },
      { field: 'statusComment', headerText: 'Comment', allowEditing: true, },
    ],
    load(){
      const reviewId = (this as GridComponent).parentDetails.parentRowData['reviewId'];
      this.editSettings.allowAdding = reviewId === null;
      this.editSettings.allowEditing = reviewId !== null;
    },
    actionBegin: function (args: AddEventArgs) {
      if (args.requestType === 'add') {
        this.setDropDownData();
      }


      if (args.requestType === 'beginEdit') {
        this.setDropDownData('edit');
      }
    }.bind(this),
    dataSourceChanged: function (state: DataSourceChangedEventArgs) {
      // do stuff
    }.bind(this),
    closeEdit: function () {
      // do stuff
    },


  };

Joseph Christ Nithin Issack · Answer

Hi Maxwell, 

  Greetings from Syncfusion support. 

You can capture the add, edit events and add, edit complete events in the grid while performing CRUD action in the grid, you can use the `actionBegin` event  and `actionComplete` event of the EJ2 Grid respectively. 

API Links: https://ej2.syncfusion.com/angular/documentation/api/grid#actionbeginhttps://ej2.syncfusion.com/angular/documentation/api/grid#actioncomplete 

You can cancel the actions setting the `args.cancel` property as true in the `actionBegin` event of the EJ2 Grid. 

API Link: https://ej2.syncfusion.com/angular/documentation/api/grid/addEventArgs/#cancel. 

  If your requirement is to capture the click event of the buttons in the toolbar then you can use the `toolbarClick` event of the EJ2 Grid. 

API Link: https://ej2.syncfusion.com/angular/documentation/api/grid#toolbarclick  

Please get back to us for further details. 

Regards, 
Joseph I.

Maxwell Sands · Answer

Yeah it turned out to be an issue of the order in which the methods were written in the instance of the child model. I am having a new issue.

All functionality is working as expected, however, the arrow to open and close the child grid is not in an empty column, but is pushing the data of the parent grid over. I just want to have the column where the arrow is to show the child to be empty.

public setUpChildGridInstance(): void {
    const that = this;
    const state: any = { skip: 0, take: 5 };
    this.childGridInstance = {
      queryString: 'taskId',
      load(){
        const reviewId = (this as GridComponent).parentDetails.parentRowData['reviewId'];
        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'] = this.parentDetails.parentRowData['rwtLoanNumber'];
          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') {
            const taskId = (this as GridComponent).parentDetails.parentRowData['taskId'];
            args.data['taskId'] = taskId;
            that.addReview(args);
          }
        }
      },
    };
  }

Ajith Govarthan · Answer

Hi Maxwell, 

Thanks for the update. 

Based on your query, we suspect that you want to show some custom element like expand collapse buttons with column in the parent grid component to expand and collapse the rows of the child Grid instead of using the default expand and collapse buttons of the Grid component. 

So, please confirm that you are expecting the same behavior in your Grid application to proceed further on your requirement. If your query is different means, then please share the video demonstration of your requirement with more details to validate further on your requirement. 

Regards, 
Ajith G.

Maxwell Sands · Answer

I would like the default behavior of the parent when there is a child grid, which is an empty column header and then a column of arrows to expand/collapse the child grid.

Rajapandiyan Settu · Answer

Hi Maxwell, 

Thanks for your update. 

We are unclear about your requirement at our end. So, kindly share the below details to proceed further. 


Please explain your requirement in detail with video demo.
Share the pictorial representation of your requirement.
Are you want the first column to be empty and the second column to have with expand/collapse icon.

Regards, 
Rajapandiyan S

Maxwell Sands · Answer

Rajapandiyan,I am trying to accomplish just the default state of the EJS Child Grid, where the parent automatically has an empty slot in the header and underneath that a column of the arrows that are used to open and close the child grid. Functionality I want is below: What is occurring:

As you can see, the empty column header is not being generated.

Rajapandiyan Settu · Answer

Hi Maxwell,  
 
We have created a new ticket under your account for the reported query. Please log in your account using the below link. https://www.syncfusion.com/account/login  
  
Regards,  
Rajapandiyan S