0

I have an UI Grid that renders a list of records. The input model class looks like :

public class GroupMembershipUploadInput
{

    public string chpt_cd {get;set;}
    public string cnst_mstr_id {get;set;}
    public string cnst_prefix_nm {get;set;}
    public string grp_cd {get;set;}
    public string grp_nm {get;set;}

}

public class ListGroupMembershipUploadInput
{
    public List<GroupMembershipUploadInput> GroupMembershipUploadInputList { get; set; }
}

This ListGroupMembershipUploadInput model list gets rendered on the UI Grid on return of a successful function call.

function getUploadValidationGridLayout(gridOptions, uiGridConstants, results) {
    gridOptions.data = '';
    gridOptions.data.length = 0;
    gridOptions.data = results;

    return gridOptions;
} 

The Angular ColumnDefs and GridOptions look like :

    getUploadValidationResultsColumnDef: function () {


        return [

            {
                field: 'chpt_cd', displayName: 'Chapter Code', width: "*", minWidth: 140, maxWidth: 900
            },
            {
                field: 'cnst_mstr_id', displayName: 'Master ID', enableCellEdit: false,
                cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) {
                    if (grid.columns[0]) {
                        return 'first-col-style';
                    }
                }, width: "*", minWidth: 140, maxWidth: 900
            },
            { field: 'cnst_prefix_nm', headerTooltip: 'Prefix Name', displayName: 'Prefix Name', cellTemplate: '<div class="wordwrap">{{COL_FIELD}}</div>', width: "*", minWidth: 140, maxWidth: 900 },
            { field: 'grp_cd', displayName: 'Group Code', width: "*", minWidth: 140, maxWidth: 900 },
            { field: 'grp_nm', displayName: 'Group Name', width: "*", minWidth: 140, maxWidth: 900 }

        ]
    },

    getUploadValidationGridOptions: function (uiGridConstants, columnDefs) {

        var gridOptions = {
            enableRowSelection: true,
            enableRowHeaderSelection: true,
            enableFiltering: false,
            enableSelectAll: false,
            selectionRowHeaderWidth: 35,
            rowHeight: 45,
            multiSelect: false,

            paginationPageSize: 8,
            enablePagination: true,
            paginationPageSizes: [8],
            enablePaginationControls: false,
            enableVerticalScrollbar: 1,
            enableHorizontalScrollbar: 1,
            enableGridMenu: true,
            showGridFooter: false,
            columnDefs: columnDefs

        };
        gridOptions.data = '';
        return gridOptions;
    }
}

Now Suppose the list that gets rendered contains records like :

chpt_cd  cnst_mstr_id cnst_prefix_nm grp_cd grp_nm
-------  ------------ -------------- ------ ------
07038                 Hait           UVC    UVC_0301
07038                 Monac          SFFS   SFFS_201
06308                 Pom            DLF    DLF

And there are two additional lists of data : that contain valid chpt_cd(07038) and valid grp_cds(DLF).

All the rest of the data in those cells (e.g. 06308 in the chpt_cd cell in the third record) and (UVC and SFFS in the grp_cd cells in the first and second rows) have to be red highlighted. Rest would be normal .

How would I do it ? Using CellTemplate or something else?

StrugglingCoder
  • 4,781
  • 16
  • 69
  • 103
  • Is there some sort of identifier in each row that determines whether or not the color should be red? If so, what is it? – Rani Radcliff Jun 07 '16 at 17:17
  • http://stackoverflow.com/questions/26688746/conditional-cell-template-in-ui-grid-angularjs – Brian Jun 08 '16 at 00:30

0 Answers0