Clever Geek Handbook

NgGrid cellFilter and cellTemplate not working together

I am using ngGrid to display my data. I would like to use cellFilter and cellTemplate together for a specific column, but they don't seem to work together. when i use cellFilter or cellTemplate separately they work perfect. Basically, I would like to format the value of the cells in this way (for example, 500000 -> 500000, 1000000 -> 1,000,000) and also I would like to render negative values ​​in red. How can I solve this? Thank!

$scope.gridOptions = {
        data: 'data',
        columnDefs: [
            {
                field: 'Settled',
                cellFilter: 'number',
                cellTemplate: '<div ng-class="{red: row.getProperty(col.field) < 0}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div>'
            }]
        }
+3


source to share


3 answers


I found the answer myself: p

It is so simple.



$scope.gridOptions = {
        data: 'data',
        columnDefs: [
            {
                field: 'Settled',
                cellTemplate: '<div ng-class="{red: row.getProperty(col.field) < 0}"><div class="ngCellText">{{row.getProperty(col.field) | number }}</div></div>'
            }]
        }
+7


source


Since ng-grid is now UI-Grid v3.x, referring to the default template for ui-grid / uiGridCell

$templateCache.put('ui-grid/uiGridCell',
  "<div class=\"ui-grid-cell-contents\" title=\"TOOLTIP\">{{COL_FIELD CUSTOM_FILTERS}}</div>"
);

I would say that the cellTemplate in the updated UI-Grid should be as follows:



$scope.gridOptions = {
        data: 'data',
        columnDefs: [
            {
                field: 'Settled',
                cellFilter: 'number',
                cellTemplate: '<div class="ui-grid-cell-contents" ng-class="{red: COL_FIELD < 0}">{{COL_FIELD CUSTOM_FILTERS}}</div>'
            }]
        }

You can use the property instead cellClass

and leave the default cell template. However, this belongs to the class .ui-grid-cell

. The cell template would apply the class to the child .ui-grid-cell

, which is in my example above .ui-grid-cell-contents

. Whatever the way for your situation, I suppose.

$scope.gridOptions = {
    data: 'data',
    columnDefs: [
        {
            field: 'Settled',
            cellFilter: 'number',
            cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) {
                var cellVal = grid.getCellValue(row, col);
                return (cellVal < 0) ? 'red' : '';
            }
        }]
}
+2


source


Based on Mammaj's answer, I could develop my own cellTemplate in conjunction with a cellFilter. Here is my solution for reference where executeStatus is the cell value that was previously used as cellFilter: 'emJobStateLabel'

. Here's the progress status is sent to emJobStateLabel in the cell template:

cellTemplate: '<div class="em-row">{{row.entity.executionStatus | emJobStateLabel}} {{row.entity["previewStatus"]==\'New\'?\'\':\'(\'+row.entity.previewStatus+\')\'}}</div>'

Don't forget to remove the cellFilter property.

0


source






More articles:


All Articles