CODEWITHSUNDEEP
angularjsng-gridangular-ui-gridcelltemplatecell-formatting
Mammadj
Mammadj

Reputation: 153

ngGrid cellFilter and cellTemplate do not work together

I use ngGrid to display my data. I would like to use cellFilter and cellTemplate together for the specific column, but seems they do not work together. when I use cellFilter or cellTemplate seperately they work perfect. Basically, I would like to format the value of the cells in this way (e.g 500000 --> 500,000; 1000000 --> 1,000,000) and also I would like to make negative values in a red colour. How can I solve this? Thanks!

$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>'
            }]
        }

Upvotes: 4

Views: 3947

Answers (3)

Xann009
Xann009

Reputation: 126

As ng-grid is now UI-Grid v3.x, referencing 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 the cellTemplate in the updated UI-Grid should be the following:

$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 also use the cellClass property instead, and leave the cell template default. However, this applies the class to the .ui-grid-cell. The cell template would apply the class to the child of .ui-grid-cell, which in my example above is .ui-grid-cell-contents. Whichever works 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' : '';
            }
        }]
}

Upvotes: 2

domih
domih

Reputation: 1578

Based on Mammadj's answer I could work out my own cellTemplate combined with cellFilter. Here is my solution for reference, where executionStatus is the value of the cell which was previously used as cellFilter: 'emJobStateLabel'. Here the executionStatus is piped to emJobStateLabel in a 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 property cellFilter.

Upvotes: 0

Mammadj
Mammadj

Reputation: 153

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>'
            }]
        }

Upvotes: 8

Related Questions