Creating AngulaJS directives for Flexgrid cell editing

Creating AngulaJS directives for Flexgrid cell editing

Posted by: grapecity on 20 November 2017, 5:08 pm EST

• 

  grapecity

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 20 November 2017, 5:08 pm EST

  The firm I work for were early adopters of Wijmo FlexGrid back in January 2017.
  
  We have upgraded it a couple of times to a working version: 5.20151.51

  We now wish to upgrrade the Flexgrid to version: 5.20172.359

  We created AngularJS directives as templates to edit cells in the grid.
  
  After upgrading to the Flexgrid to version: 5.20172.359, we are having some issues get the grid to accept values from our directives.

  For example, we have a directive that displays a dropdown with 2 items in it.
  
  When we click on a cell, dropdown appears, but the FlexGrid rowEditEnded event is fired.

  So my question is, How can we write customised AngularJS Directives to customise the editing of cells?

  This used to work in the Flexgrid to version: 5.20151.51
  
  That is the FlexGrid rowEditEnded event is NOT fired, when the Directive is displayed.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 20 November 2017, 6:26 pm EST

  Hi Greg,
  
  Could you please share a demo sample for the same?

  Are using directive within cell in edit mode using wj-flex-grid-cell-template directive to apply cell template in edit mode.

  Any further information would be helpful for investigating.

  ~Manish

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 21 November 2017, 8:07 am EST

  Manish
  
  That is my question.
  
  How do we do it?
  
  Do we put the template inside the wj-flex-grid-cell-template ?
  
  Or does the wj-flex-grid-cell-template need to be part of the template of the directive?

  Or in our case, where we are not using Wijmo HTML tags, but coding the grid to a

  element; How do we create an object OF wj-flex-grid-cell-template

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 21 November 2017, 3:23 pm EST

  Hi Greg,
  
  WjFlexGridCellTemplate can be used within FlexGrid directive.

  Since you are using PureJs method for FlexGrid initialization in your code. You need to compile your directive placed within cell innerHTML using itemFormatter or formatItem.

  ~Manish

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 21 November 2017, 5:38 pm EST

  Manish
  
  I am doing that:

  
  function editorWidgetBuilder($compile, $rootScope) {
  ///init code
  	build: function (grid, hostCell, row, col) {
  		var record = grid.getRowData(row);
  	        var field = grid.getFieldData(row, col);
  		var efd = field.getEntityFieldDefinition();
  		var widgetScope = angular.element(hostCell).scope().$new(true);
                  widgetScope.cellValue = grid.getCellData(row, col, false);
  	            var scopeProps = {};
  	            scopeProps.grid = grid;
  	            scopeProps.record = record;
  	            scopeProps.field = field;
  	            scopeProps.row = row;
  	            scopeProps.col = col;
  	            scopeProps.binding = grid.columns[col].binding;
  	            scopeProps["widget-name"] = efd.inputType.name;
  	            scopeProps["widget-params"] = efd.inputType.params || {};
  	            scopeProps["host-cell"] = angular.element(hostCell);
  	            scopeProps["default-editor"] = scopeProps["host-cell"].children("input:first");
  
  	            var el = angular.element("<div fbt-editor-widget class=\"gridEditorWidget\"></div>");
  	            el.attr(scopeProps["widget-name"], "");
  	            el.attr("tabindex", "1");
  	            el.attr("data-row", scopeProps.row);
  	            el.attr("data-col", scopeProps.col);
                  el.attr("data-binding", scopeProps.binding);
                  el.attr("id", 'gridEditorWidget');
  	            el.attr("ng-keydown", "editorWidget.handleDefaultKey($event)");
  	            for (var i in scopeProps) {
  	                if (scopeProps.hasOwnProperty(i)) {
  	                    el.attr(i, typeof scopeProps[i] == "object" ? $.camelCase(i) : scopeProps[i]);
  	                    widgetScope[$.camelCase(i)] = scopeProps[i];
  	                }
  	            }
  
                  var linkedTemplate = $compile(el)(widgetScope)[0];
                  hostCell.appendChild(linkedTemplate);
  
  	}
  }
  
  

  this gets from the itemFormatter
  
  but the handlers cellEditEnding and roweditEnding for the grid also get fired when I click in the cell on the grid
  
  How can I stop this from happening?
  
  When I look at the callstack I see that the wijmo.grid.js file has fired the Control.prototype._updateFocusState->setTimeout->ctl.onLostFocus() method of the grid.
  
  the ctl is the grid element.

  I have another more simpler example with the latest libraries and I can’t replicate the issue in that project.

  So how can I bind the injected html to the cell so the grid doesn’t lose focus?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 22 November 2017, 11:19 pm EST

  Hi Greg,
  
  I hope you are write code to add custom editor by following fiddle reference.
  
  http://jsfiddle.net/mkgupta911/go2ft50z/

  In this case, the focus may be lost from FlexGrid but cellEditEnding and rowEditEnding event should not be triggered.

  Also, if you would like to use a Custom Control as custom editor, you may add element as following.

  var _ctrl=$compile("<ctrl></ctrl>")($scope)[0];
  cell.innerHTML=_ctrl;
  

  This should work for you. Please let us know if it works for you or not. Please also modify fiddle for investigation if possible.

  ~Manish