FlexGrid - Dynamic column cell template and cell editor

FlexGrid - Dynamic column cell template and cell editor

Posted by: joanne on 14 September 2017, 11:28 am EST

• 

  joanne

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 11:28 am EST

  Hi,

  I have an example where I am setting grid properties and column definitions from an angular controller; I need to have a custom cell template for one one the grid columns and this also needs to be set from the angular controller when creating the columns (my HTML template part contains only the directive; all the setting and configurations are done in the controller).

  I also have an HTML template for the custom checkbox part (‘…directives/templates/gridCellCheck.html’) which is a . How can I set this template to the wijmo column object being created ? I tried using “innerHTML” property in itemFormatter function, but it does not get the HTML from the template file, it returns my file path in the grid column…

  I saw the “CellTemplateIntro” sample example, but this sets the “ng-include” property on the flexGridColumn directly on the HTML file; I want to do this on my angular controller file.

  Also, what is the best / more optimized method for creating custom cell templates and/or editors with Angular JS ?

  Thanks & Regards
  
  Joanne

• 

  joanne

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:28 am EST

  Hi,

  I am stuck with how to set a dynamic cell template with angular directives with flex grid? Do you have any examples showing how to achieve this?

  I tried using “formatItem” handler and setting the “innerHTML” content to an HTML template containing some angular binding, but the content is not displayed correctly:

  [js]
  
  flex.formatItem.addHandler(function (s, e) {
  
  if (e.panel == flex.cells && flex.columns[e.col].binding == ‘myCustomColumn’) {
  
  e.cell.innerHTML = ‘

  Test: {{$item.myCustomColumn}}

  ’;
  
  e.cell.appendChild(chk);
  
  }
  
  });
  
  [/js]

  The cell is rendered as “Test: {{$item…” instead of doing the angular binding.

  Is this the way to do it? Are there any examples out there to set a custom angular directive to the cell ?

  Please help, I really need to be able to set custom cell templates and editors directly through code (i.e. not using HTML elements for the columns like all the examples in “CellTemplate” intro)

  Thanks & Regards
  
  Joanne

• 

  manpreet-kaur

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:28 am EST

  Hello,

  I could observe that this issue is already in discussion with the development team on the mail thread. Please let us know in case you need any assistance further.

  Thanks,
  
  Manpreet Kaur

• 

  bragatiago

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:28 am EST

  Are there any updates on this?

• 

  manpreet-kaur

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:28 am EST

  Hello,

  You can’t add wj-flex-grid-cell-template directive if you have no wj-flex-grid-column directive. The only way to apply it is to compile and link the template string manually, and add linked template DOM to the cell in the formatItem event with the code like this:

  [js]
  
  app.controller(‘appCtrl’, function ($scope, $compile) {
  
  var templateLink, template = ‘color:red">’;
  
  $scope.formatItem = function(flex, e) {
  
  var col = flex.columns[e.col],
  
  editRange = flex.editRange;
  
  if (e.panel.cellType === wijmo.grid.CellType.Cell && col.header === ‘Dynamic template’ && !(editRange && editRange.row === e.row && editRange.col === e.col)) {

  // compile only once and store link function for re-use
  
  if (!templateLink) {
  
  templateLink = $compile(‘’ + template + ‘’);
  
  }

  var cellScope = $scope.$new();

  // add $item variable to the scope that references the data item
  
  cellScope.$item = e.panel.rows[e.row].dataItem;
  
  // get the linked template DOM
  
  var templRoot = templateLink(cellScope, function (clonedEl, scope) { })[0];

  // clear cell content
  
  e.cell.textContent = ‘’;

  // add template DOM to the cell
  
  e.cell.appendChild(templRoot);

  // call $apply to force Angular to apply the sample
  
  if (!cellScope.$root.$$phase) {
  
  cellScope.$apply();
  
  }
  
  }
  
  }
  
  }
  
  [/js]

  The problem with this approach is a slowdown of grid scrolling caused by Angular when it links the template (Wijmo directive includes rather sophisticated algorithms to cope with this problem). So, if you have a chance, it’s better to use an ordinary template DOM (that doesn’t require Angular processing) in the formatItem event .

  Hope it helps.

  Thanks,
  
  Manpreet Kaur

• 

  gupta.prakul

  • Post Options:
  • Link
    Copy

  Posted 27 December 2017, 3:44 am EST

  Hi Manpreet,

  Is there any update on better way to add template in a column ? As using formatItem makes the cells to create template every time any event is fired on a grid. Which is making grid slow.

  Regards,
  
  Prakul Gupta