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?