Custom Grid Editor

Custom Grid Editor

Posted by: carlo.vecchiato on 27 March 2018, 5:52 am EST

• 

  carlo.vecchiato

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 27 March 2018, 5:52 am EST

  Hi there,

  is it possible to have the latest TypeScript version of CustomGridEditor class used in this example?
  
  http://jsfiddle.net/Wijmo5/1w9hr82h/

  Cheers,
  
  Carlo

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 28 March 2018, 4:12 am EST

  Hi Carlo,

  You can use this class:

  
  // Add wijmo and wijmo grid dependencies here depending upon you app's module loader
  
  export class CustomGridEditor {
  
      private _grid: any;
      private _col: any;
      private _ctl: any;
      private _rng: any;
      private _openDropDown: boolean;
  
      public get control():any {
          return this._ctl;
      }
  
      /**
       * Initializes a new instance of a CustomGridEditor.
       * @param flex Parent FlexGrid instance
       * @param binding Binding properties
       * @param edtClass Editor
       * @param options 
       */
      constructor(flex: any, binding: any, edtClass: any, options: any) {
          let _this = this;
          // save references
          this._grid = flex;
          this._col = flex.columns.getColumn(binding);
          // create editor
          this._ctl = new edtClass(document.createElement('div'), options);
          // connect grid events
          this._grid.beginningEdit.addHandler(this._beginningEdit, this);
          this._grid.scrollPositionChanged.addHandler(this._closeEditor, this);
          // connect editor events
          this._ctl.addEventListener(this._ctl.hostElement, 'keydown', function (e) {
              switch (e.keyCode) {
                  case wijmo.Key.Tab:
                  case wijmo.Key.Enter:
                      e.preventDefault();
                      _this._closeEditor(true);
                      _this._grid.focus();
                      // forward event to the grid so it will move the selection
                      let evt: any = document.createEvent('HTMLEvents');
                      evt.initEvent('keydown', true, true);
                      evt.ctrlKey = e.ctrlKey;
                      evt.shiftKey = e.shiftKey;
                      evt.keyCode = e.keyCode;
                      _this._grid.hostElement.dispatchEvent(evt);
                      break;
                  case wijmo.Key.Escape:
                      _this._closeEditor(false);
                      _this._grid.focus();
                      break;
              }
          });
          this._ctl.lostFocus.addHandler(function () {
              setTimeout(function () {
                  if (!_this._ctl.containsFocus()) {
                      _this._closeEditor(true);
                  }
              });
          });
          // open drop-down on f4/alt-down
          this._grid.addEventListener(this._grid.hostElement, 'keydown', function (e) {
              _this._openDropDown = false;
              if (e.keyCode == wijmo.Key.F4 ||
                  (e.altKey && (e.keyCode == wijmo.Key.Down || e.keyCode == wijmo.Key.Up))) {
                  _this._openDropDown = true;
                  _this._grid.startEditing(true);
                  e.preventDefault();
              }
          }, true);
          // close editor when user resizes the window
          window.addEventListener('resize', function () {
              if (_this._ctl.containsFocus()) {
                  _this._closeEditor(true);
                  _this._grid.focus();
              }
          });
      }
  
      _beginningEdit(grid: any, args: any) {
          var _this = this;
          // check that this is our column
          if (grid.columns[args.col] != this._col) {
              return;
          }
          // check that this is not the Delete key
          // (which is used to clear cells and should not be messed with)
          var evt = args.data;
          if (evt && evt.keyCode == wijmo.Key.Delete) {
              return;
          }
          // cancel built-in editor
          args.cancel = true;
          // save cell being edited
          this._rng = args.range;
          // initialize editor host
          var rc = grid.getCellBoundingRect(args.row, args.col);
          wijmo.setCss(this._ctl.hostElement, {
              position: 'absolute',
              left: rc.left - 1 + pageXOffset,
              top: rc.top - 1 + pageYOffset,
              width: rc.width + 1,
              height: grid.rows[args.row].renderHeight + 1,
              borderRadius: '0px'
          });
          // initialize editor content
          if (!wijmo.isUndefined(this._ctl['text'])) {
              this._ctl['text'] = grid.getCellData(this._rng.row, this._rng.col, true);
          } else {
              throw 'Can\'t set editor value/text...';
          }
          // start editing item
          var ecv = wijmo.tryCast(grid.collectionView, 'IEditableCollectionView'),
              item = grid.rows[args.row].dataItem;
          if (ecv && item) {
              setTimeout(function () {
                  ecv.editItem(item);
              }, 210); // FlexGrid commits edits 200ms after losing focus
          }
          // activate editor
          document.body.appendChild(this._ctl.hostElement);
          this._ctl.focus();
          setTimeout(function () {
              // get the key that triggered the editor
              var key = (evt && evt.charCode > 32) ? String.fromCharCode(evt.charCode) : null;
              // send key to editor
              if (key) {
                  var input = _this._ctl.hostElement.querySelector('input');
                  if (input instanceof HTMLInputElement) {
                      input.value = key;
                      wijmo.setSelectionRange(input, key.length, key.length);
                      var evtInput = document.createEvent('HTMLEvents');
                      evtInput.initEvent('input', true, false);
                      input.dispatchEvent(evtInput);
                  }
              } else {
                  _this._ctl.focus();
              }
              // open drop-down on F4/alt-down
              if (_this._openDropDown && _this._ctl instanceof wijmo.input.DropDown) {
                  _this._ctl.isDroppedDown = true;
              }
          }, 50);
      }
  
      _closeEditor(saveEdits: any) {
          if (this._rng) {
              var grid = this._grid,
                  ctl = this._ctl,
                  host = ctl.hostElement;
              // raise grid's cellEditEnding event
              var e = new wijmo.grid.CellEditEndingEventArgs(grid.cells, this._rng);
              grid.onCellEditEnding(e);
              // save editor value into grid
              if (saveEdits) {
                  if (!wijmo.isUndefined(ctl['value'])) {
                      this._grid.setCellData(this._rng.row, this._rng.col, ctl['value']);
                  } else if (!wijmo.isUndefined(ctl['text'])) {
                      this._grid.setCellData(this._rng.row, this._rng.col, ctl['text']);
                  } else {
                      throw 'Can\'t get editor value/text...';
                  }
                  this._grid.invalidate();
              }
              // close editor and remove it from the DOM
              if (ctl instanceof wijmo.input.DropDown) {
                  ctl.isDroppedDown = false;
              }
              host.parentElement.removeChild(host);
              this._rng = null;
              // raise grid's cellEditEnded event
              grid.onCellEditEnded(e);
          }
      }
  
  }
  

  ~nilay