state.endEdit hanging in dataSourceChanged

Question

Hello. I'm following the example which CRUD using Service class. CRUD works well, except processing state.endEdit and state.cancelEdit.The grid hanged after Ajax call though call both endEdit and cancelEdit. I also tried call via $refs.[gridRef].ej2Instances.endEdit, but no effected.What's the problem? How can I avoid this situation?

/**
 * 
 * @param {DataStateChangeEventArgs} state
 */
dataStateChange (state) {
  state.data.opcgCd = this.item.opcgCd
  this.psbItemService.execute(state).then(gridData => this.psbItems = gridData)
},
/**
 * Problem here.
 * @param {DataSourceChangedEventArgs} state
 */
dataSourceChanged (state) {
  const _successfulFunc = (data) => {
    console.log('Successful', data, state)
    if (data.code === 0) {
      console.log('Do endEdit') // logging well.
      // state.endEdit() // 1. hanging
      this.$refs.psbItemGrid.ej2Instances.endEdit() // 2. also hanging.
    } else {
      this.$toasted.error(data.msg)
        console.log('Do cancelEdit')
        state.cancelEdit()
    }
  }
  const _errFunc = (err) => {
    this.$toasted.error('요청 중 오류가 발생했습니다.')
    console.error(err)
    // action === 'add' 또는 'delete' 일 경우, cancelEdit가 적용되지 않는 문제가 있으므로 endEdit 으로 작성을 아예 취소해버린다.
    if (state.action === 'edit') {
      state.cancelEdit()
    } else {
      state.endEdit()
    }
  }
  console.log('DataSource changed', state, state.action)
  // state.rowIndex 이용
  if (state.action === 'add') {
    this.psbItemService.add(state).then(_successfulFunc).catch (_errFunc)
    // this.psbItemService.add(state).then(() => state.endEdit())
  } else if (state.action === 'edit') {
    this.psbItemService.edit(state).then(_successfulFunc).catch (_errFunc)
  } else if (state.requestType === 'delete') {
    this.psbItemService.delete(state).then(_successfulFunc).catch (_errFunc)
  } else {
    console.log('on else')
  }
},

// eslint-disable-next-line no-unused-vars
import { DataResult, DataStateChangeEventArgs, DataSourceChangedEventArgs } from '@syncfusion/ej2-vue-grids'
import format from 'string-format'
import axios from '../../axios'

format.extend(String.prototype, {})

/**
 * Service config
 * @typedef {Object} PsbItemService.Config
 * @property {String} baseUri
 * @property {String} createUri
 * @property {String} updateUri
 * @property {String} deleteUri
 * @property {String} initUri
 * @property {String} bulkUpdateUri
 */

class PsbItemService {
  /**
   *
   * @param {Config} options
   * @constructor
   */
  constructor (options = {}) {
    this.baseUri = options.baseUri
    this.createUri = options.createUri
    this.editUri = options.editUri
    this.deleteUri = options.deleteUri
    this.initUri = options.initUri
    this.bulkUpdateUri = options.bulkUpdateUri
  }

  /**
   *
   * @param {String} keyString
   * @param {*} keyValue
   */
  setPk (keyString, keyValue) {
    this.keyString = keyString
    this.keyValue = keyValue
  }

  /**
   *
   * @param {DataStateChangeEventArgs} state
   * @returns {Promise<DataResult>}
   */
  execute (state) {
    return this.getData(state)
  }

  /**
   *
   * @param {DataStateChangeEventArgs} state 페이지 정보는 where 속성의 pageNo, pageSize 로 정의한다
   * @returns {Promise<DataResult>}
   */
  getData (state) {
    let url = this.baseUri.format(state.data)

    return axios.get(url, {
      params: state.where
    }).then(({data}) => {
      console.log(data)

      return data
    })
  }

  /**
   *
   * @param {DataSourceChangedEventArgs} state
   * @returns {Promise<DataResult>}
   */
  add (state) {
    let url = this.createUri

    if (this.keyString && !state.data[this.keyString]) {
      state.data[this.keyString] = this.keyValue
    }

    return axios.post(url, state.data).then(({ data }) => {
      // console.log(data)
      return data
    })
  }

  /**
   *
   * @param {DataSourceChangedEventArgs} state
   * @returns {Promise<DataResult>}
   */
  edit (state) {
    let url = this.editUri
    return axios.post(url, state.data).then(({ data }) => {
      return data
    })
  }

  /**
   * 단건 데이터 삭제
   * @param {DataSourceChangedEventArgs} state
   * @returns {Promise<DataResult>}
   */
  delete (state) {
    if (this.keyString && !state.data[0][this.keyString]) {
      state.data[this.keyString] = this.keyValue
    }
    let url = this.deleteUri.format(state.data[0])
    return axios.post(url)
      .then(({ data }) => {
        return data
      })
  }

  /**
   * 데이터 초기설정
   * @param {DataSourceChangedEventArgs} state
   * @returns {Promise<DataResult>}
   */
  init (state) {
    let url = this.initUri.format(state.data)
    return axios.post(url)
      .then(({ data }) => {
        return data
      })
  }

  /**
   *
   * @param {DataSourceChangedEventArgs} state
   * @returns {Promise<DataResult>}
   */
  // bulkUpdate (state) {
  //   let url = '/priceLists/{prcListCd}/commodities/edit'.format(state.query)
  //
  //   console.log(url)
  //   // return axios.post(url, state.changes)
  //   //   .then(({ data }) => {
  //   //     return data
  //   //   })
  // }
}

export { PsbItemService }

Balaji Sekar · Accepted Answer

HI Minkyu, Greetings from the Syncfusion support. We have validated your query(custom binding) with the information provided, and we cannot reproduce the problem reported. Using Vue framework, we created a sample with custom binding in DataGrid. For more information please refer to the example and sample code below. [Vue] CRUD Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/apollo_grapghql_ej2-1556536365 If you have the same problem , please replicate the problem in the above sample and share it with us to help further validate. Regards, Balaji Sekar