angular-slickgrid，在选择编辑器更改事件时触发单元格编辑

Question

我使用的是angular-silkgrid和angular 7。我使用的是内联编辑功能。我使用单选编辑器进行内联编辑。目前，我想实现以下功能：

只要用户点击可编辑字段，select下拉列表将是visible.On select any option from select下拉列表。内联模式应该存在，列值应该更新。

目前我需要点击其他字段来退出内联模式(我想在select option select上实现这一点)

​

editor: {
  // display checkmark icon when True
  enableRenderHtml: true,
  // tslint:disable-next-line:max-line-length
  collection: [{
    value: 1,
    label: 'Sucessful'
  }, {
    value: 2,
    label: 'Unsucessful'
  }],
  model: Editors.singleSelect, // CustomSelectEditor
  elementOptions: {
    autoAdjustDropPosition: false,
    onClick: (event, rr) => {
      // here i want to write some code which can trigger to grid to start update
    }
  }
}

​

Answer 1

感谢所有人的回答。我已经解决了我的问题如下：

   editor: {
      enableRenderHtml: true,
      collection: [{ value: CCLStaus.Sucessfull, label: 'Sucessful' }, { value: CCLStaus.UnSucessfull, label: 'Unsucessful' }],
      model: Editors.singleSelect,// CustomSelectEditor
      elementOptions: {
        onClick: (event) => {
          const updateItem = this.angularSilkGrid.gridService.getDataItemByRowIndex(this.rowInEditMode);
          updateItem.status = +event.value;
          this.angularSilkGrid.gridService.updateItem(updateItem, { highlightRow: false });
          this.angularSilkGrid.gridService.renderGrid();
        }
      }
    }

Answer 2

一般来说，

grid.getEditorLock().commitCurrentEdit()

将提交并关闭编辑器。此外，任何

grid.navigateRight()
grid.navigateLeft()
grid.navigateDown()
grid.navigateUp()
grid.navigateNext()
grid.navigatePrev()

将提交并优雅地退出。在select2编辑器中，您会注意到：

    this.init = function () {
      ...

      // Set focus back to select2 element on closing.
      $input.on('select2:close', function (e) {
        if ((e.params.originalSelect2Event && e.params.originalSelect2Event.data) 
        || e.params.key === 9) {
          // item was selected with ENTER or no selection with TAB
          args.grid.navigateNext();
        } else {
          // closed with no selection
          setTimeout(function () {
            $input.select2('focus');
          }, 100);
        }
      });
    };

    this.destroy = function () {
        $input.select2('destroy');
        $input.remove();
    };

注意到args.grid.navigateNext()将提交并关闭编辑器，包括在适当的时候调用destroy()方法。

Answer 3

在Angular-Slickgrid Editor Example中，示例中有一个指向auto commit的复选框，您需要在格网选项中启用该设置

this.gridOptions = {
  autoEdit: true,
  autoCommitEdit: true,
}

库将在内部调用grid.getEditorLock().commitCurrentEdit()，就像本在他的答案中写的那样，在Angular-Slickgrid中，您只需设置我添加的autoCommitEdit标志。