specific ng cell dimension

Question

That's the question i have table in ng-grid like that:

var templateImage = '<div class="ngCellText" ng-class="col.colIndex()"><img  src="images/{{row.getProperty(\'faseXD[0].fase\')}}.png"></div>';
var templateText = '<div  class="ngCellText"  ng-class="col.colIndex()"><p id="gridField" ng-cell-text>{{row.getProperty(col.field)}}</p></div>';
$scope.gridOptions= {
    data:'request',
    multiSelect:false,
    headerCellTemplate:'<div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{\'cursor\': col.cursor}" ng-class="{ \'ngSorted\': !noSortVisible }"><div ng-click="col.sort($event)" ng-class="\'colt\' + col.index" class="ngHeaderText">{{col.displayName}}</div><div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div><div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div><div class="ngSortPriority">{{col.sortPriority}}</div><div ng-class="{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }" ng-click="togglePin(col)" ng-show="col.pinnable"></div></div><div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>',
    columnDefs: [{ field: 'product', displayName: 'product',cellTemplate: templateTesto},
        {field:'ticket', visible:false},
        { field:'subject', displayName:'subject', cellTemplate: templateTesto},
        { field: 'date', displayName: 'date',cellTemplate: templateTesto} ,
        { field: 'faseXD', displayName: 'faseXD',cellTemplate: templateImmgaini,cellClass:'cellImage' },
        { displayName: 'Report', cellTemplate:'<div ><button ng-diasbled="pdfenabled" ng-click="reportpdf(row.getProperty(\'ticket\'),row.getProperty(\'faseXD[0].fase\'))"><i class="glyphicon glyphicon-file"></i></button></div>', cellClass:'gridCell' }
         ]
}

i need to make the templateImage different from the other columns, to be precise i need to change the width.I have found some samples around the web to change the color or other little things, but not the dimensions of the cells, is it possible?

Answer 1

You can simply set a width in your columnDefs.

  var templateImage = '<div class="ngCellText" ng-class="col.colIndex()"><img  src="images/{{row.getProperty(\'faseXD[0].fase\')}}.png"></div>';
  var templateText = '<div  class="ngCellText"  ng-class="col.colIndex()"><p id="gridField" ng-cell-text>{{row.getProperty(col.field)}}</p></div>';
  $scope.gridOptions = {
    data: 'myData',
    headerCellTemplate: '<div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{\'cursor\': col.cursor}" ng-class="{ \'ngSorted\': !noSortVisible }"><div ng-click="col.sort($event)" ng-class="\'colt\' + col.index" class="ngHeaderText">{{col.displayName}}</div><div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div><div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div><div class="ngSortPriority">{{col.sortPriority}}</div><div ng-class="{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }" ng-click="togglePin(col)" ng-show="col.pinnable"></div></div><div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>',
    columnDefs: [{
      field: 'name',
      width: '50px',
      displayName: 'product',
      cellTemplate: templateImage
    }, {
      field: 'age',
      visible: true
    }]
  };

Example