How to apply custom Fliter formatter in a Slick grid custom cell formatter

问题

How to apply custom angular filter formatter in slick-grid custom cell formatter

Suppose I have an angular customer filter formatter that convert the date from one format to another format.

var dateFilter = this.$filter('myDateFilterFormatter')('2006-04-07');

It returns as 4/7/06.

How can I use myDateFilterFormatter in slick-grid custom cell formatter

I have tried this way

this.dateFommatter = function(row, cell, value, columnDef, dataContext){
            return "<p>"+ value | myDateFilterFormatter +"</p>";
        };

and also try

this.dateFommatter = function(row, cell, value, columnDef, dataContext){
                return "<p>"+ this.$filter('myDateFilterFormatter')(value) +"</p>";
            };

Both the way ends with error. I am unable to apply custom filter in slick-grid row formatter. Can you please suggest, How can I use custom filter in slick-grid.

回答1:

this inside the dateFormatter function refers to the function itself.

It's usual to use something like

var self = this;

... code ...

this.dateFommatter = function(row, cell, value, columnDef, dataContext){
    return "<p>"+ self.$filter('myDateFilterFormatter')(value) +"</p>";
};

To answer your second query, the code that calls the formatter is, for example

function updateCell(row, cell) {
  var cellNode = getCellNode(row, cell);
  if (!cellNode) {
    return;
  }

  var m = columns[cell], d = getDataItem(row);
  if (currentEditor && activeRow === row && activeCell === cell) {
    currentEditor.loadValue(d);
  } else {
    cellNode.innerHTML = d ? getFormatter(row, m)(row, cell, getDataItemValueForColumn(d, m), m, d) : "";
    invalidatePostProcessingResults(row);
  }
}

I think you are asking about getting access to cellNode. You can add

var cellNode = grid.getCellNode(row, cell);

to your formatter if you like.

In the long run, if you find it useful to have access to the cell node, you could modify the formatter function, and all calls to it, to add the cellNode to the end of the parameter list. This would be a modification to the slickgrid code, however.

EDIT: actually I just tested this and it doesn't work because on cell creation the formatter is called before the cell is created. I have modified the formatter in the latest release of SlickGrid so that instead of returning a string you can optionally return an object { text: 'displayText', removeClasses: 'class1 class2', addClasses: 'class1' } and the classes will be removed and added to the cell when the formatter is applied. Removing a range of classes allows previous formatting classes to be cleared before applying the correct new class.

来源：https://stackoverflow.com/questions/42761100/how-to-apply-custom-fliter-formatter-in-a-slick-grid-custom-cell-formatter

标签

angularjs

ecmascript-6

slickgrid