Altering the class values or styles of cells in ui-grid

Question

I have several unique cases inside ui-grid where the cells of certain table contents need additional class, or even style rules assigned, so the appearance for these cells stands out compared to others. Looking through the official ui-grid documentation I found that it could be done with cellTemplate, but I couldn't get any consistent results. What is the best approach here?

Below are the code changes I have attempted before, with the intent being to change the class name based on the returned value from a filter call made

//Define Grid Headings
$scope.scheduledPatientAppointments = [
        {
            field: 'appointment_date',
            displayName: 'Appointment Date'
        },
        {
            field: 'doctor_name',
            displayName: 'Doctor Name'
        },
        {
            field: 'procedure_type_eng',
            displayName: 'Medical Procedure Type'
        },
        {
            field: 'appointment_status_eng',
            displayName: 'Appointment Status'
        },
        {
            field: 'docs_received',
            displayName: 'Related Documents',
            cellTemplate: '<div class="ui-grid-cell-contents" ng-click="grid.appScope.loadDocumentsModal(\'{{row.entity.id}}\')">{{grid.getCellValue(row, col) | hasDocuments}}</div>',
            cellFilter: 'hasDocuments',
            cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
                if (grid.getCellValue(row, col).toLowerCase() === 'missing') {
                    return 'missing';
                } else if (grid.getCellValue(row, col).toLowerCase() === 'received') {
                  return 'received';
                } else {
                  return 'undefined';
                }
            }
        }
    ];

// Define Grid Options
$scope.PatientAppointmentsGrid = {
    selectionRowHeaderWidth: 25,
    enableHorizontalScrollbar: false,
    rowHeight: 35,
    enableSorting: true,
    columnDefs: $scope.columnsPatient,
    data: [],
    onRegisterApi: function (gridApi) {
        $scope.gridApi = gridApi;
    }
};    

//Behavior for patient page load
$scope.appointmentsProvider = patientsService.patientFactory.getAppointmentsForPatient($stateParams.id).then(
        function successCallback(response) {
            var preFetchData = response.data.data;
            angular.forEach(preFetchData, function (value, key) {documentsService.documentsFactory.getDocumentsByAppointmentId(value.id).then(
                        function successCallback(response2) {

                            if (response2.data.length >= 1) {
                                //Append value state to the preFetchData object (count size)
                                var totalFiles = response2.data.length;
                                preFetchData[key].docs_received = totalFiles;
                            } else {
                                preFetchData[key].docs_received = 0;
                            }
                        }, function errorCallback(response2) {
                    console.debug("Error", response2);
                });
            });

            $scope.PatientAppointmentsGrid.data = preFetchData;
        },
        function errorCallback(response) {
            console.debug("Error", response);
        });

The contents from the "Related Documents" are initally set to Missing (the original rest call returns nothing, and the filter call sets it to that. However, a later call actually loads associated documents per row, and I believe the inactivity of the grid on this particular call is what is causing no class to get set here.

Thoughts on the best approach here?

Would be good to include sample code of what you've tried so far and explain in a bit more detail what is inconsistent about the current method or what behavior it exhibits that's undesirable. — shaunhusain, Sep 27 '16 at 18:10
Sure, I added some example code and clarified what I aim to do, and how. — Cameron Kilgore, Sep 28 '16 at 18:29

score 0 · Answer 1 · answered Sep 27 '16 at 20:23

adding custom class with cellTemplate:

columnDefs: [
    { 
      name:'firstName', 
      field: 'first-name',
      // adding custom class
      cellTemplate: "<div class=\"ui-grid-cell-contents custom-class\" title=\"TOOLTIP\">{{COL_FIELD CUSTOM_FILTERS}}</div>"
    },
    { name:'1stFriend', field: 'friends[0]' },
    { name:'city', field: 'address.city'},
    { name:'getZip', field: 'getZip()', enableCellEdit:false}
  ],
  .......

there are plenty of predefined customizable templates defined with $templateCache at the bottom of https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.9/ui-grid.js

adding custom style:

.......
onRegisterApi: function(gridApi){
    //set gridApi on scope
    $scope.gridApi = gridApi;
    // adding custom style
    gridApi.grid.registerStyleComputation({
      func: function () {
        return [
          '.custom-class {                           ',
          '  color: red;                             ',
          '  font-weight: bold;                      ',
          '}                                         ',
          '.ui-grid-row:nth-child(1) .custom-class { ',
          '  color: blue;                            ',
          '}                                         '
        ].join('\n');
      }
    });
  }

plunker: http://plnkr.co/edit/YbnYoWLlEYzwmjuKOFa0?p=preview

Altering the class values or styles of cells in ui-grid

1 Answers1