Cell templates based on the cell value

Question

I have an angular grid with a first column row has to be shown as an anchor link or a label based on a javascript condition of that cell value doesnt starts with the character 'M'. If cell value of column 1 starts with character 'M' the column shpuld be an label otherwise it should be an hyeprlink. I do beleive that i have to use two different cell templates, but not sure how to call those on the row databind event of uigrid. Below is the code.

Templates for anchor and label:

var linkCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">' +
               '  <a  class="text-blue-color text-underline" href="' + getURL() + '/ClaimDetail/Index?TagNumber={{row.entity.TagNumber}}&from=linkcomfort&Style=' + Style + '" target="_blank";">{{row.entity.TagNumber}}</a>' +
               '</div>';
var labelCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">' +
              '  <label>{{row.entity.TagNumber}}</label>' +
              '</div>';

Below is the grid

        $scope.ComfortPlanGrid = {
        enableGridMenu: true,
        exporterMenuCsv: true,
        exporterMenuPdf: false,
        gridMenuShowHideColumns: true,
        enableRowSelection: false,
        enableColumnMenus: false,
        enableFiltering: false,
        enablePaging: false         

    };
    $scope.ComfortPlanGrid.columnDefs = config.headers.comfortPlansHeadersGrid;

Below is the grid headers

   var headers = {
    comfortPlansHeadersGrid: [
        { field: 'TagNumber', width: 130, displayName: 'Claim Tag Nbr', cellTemplate: linkCellTemplate },
        { field: 'CustomerNumber', width: 200, displayName: 'Customer/Dealer' },
        { field: 'Status', width: 80, cellTooltip: true },
        { field: 'StatusDate', width: 175, displayName: 'Status Date' },
        { field: 'Description', displayName: 'Description', width: 270, cellTemplate: claimDetailTemplate },
        { field: 'ContractNumber', width: 200, displayName: 'Contract Number', headerTooltip: 'Contract Number' },
        { field: 'ServiceDate', width: 175, displayName: 'Service Date', headerTooltip: 'Service Date' }
    ]};

Any help on how to achieve this is appreciated.

Am able to acheive the validation using the below cell template but i would like to call some other javascript function for validation also inside the celltemplate .Any ideas how to call a javascript function too in the ng-if is appreciated. — sam, Oct 23 '16 at 19:49
Updated cell template code: var linkCellTemplate = '
' + '
{{row.entity.TagNumber}}
' + '
{{row.entity.TagNumber}}
' + '
'; — sam, Oct 23 '16 at 19:50

score 0 · Answer 1 · answered Nov 05 '16 at 04:17

Try the below code:

Add the celltemplate in the coldef on the relevant column

cellTemplate: DisplayConditionalTemplate(value)


function DisplayConditionalTemplate(value){
var linkCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">' +'  <a  class="text-blue-color text-underline" href="' + getURL() + '/ClaimDetail/Index?TagNumber={{row.entity.TagNumber}}&from=linkcomfort&Style=' + Style + '" target="_blank";">{{row.entity.TagNumber}}</a>' +                  '</div>';
var labelCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">'+'  <label>{{row.entity.TagNumber}}</label>' +                  '</div>';

if(value.charAt(0) === 'M')
   return labelCellTemplate;
else
  return linkCellTemplate;
}

Cell templates based on the cell value

1 Answers1