Consider the following snippet of angularJs code:
var myHeaderCellTemplate = '<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}} <img src="PLUS-ICON.png" /></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>';
$scope.gridOptions = {
data: self.myData,
columnDefs: [
{ field: 'firstField', displayName: 'First Column', headerCellTemplate: myHeaderCellTemplate },
{ field: 'secondField', displayName: 'Second Column', headerCellTemplate: myHeaderCellTemplate },
{ field: 'lastField', displayName: 'Last Column', headerCellTemplate: myHeaderCellTemplate }
]
};
I am trying to display an excel in browser using ng-grid. I need a headerCellTemplate common for all my fields. Since the fields are coming from an excel, they can be random, dynamic and any number.
How to set a default headerCellTemplate to all the fields, so that I do not have to mention fields in the columnDefs
section of gridOptions? (Since fields are uncontrolled)
P.S. Refer to this question asked by me as well. This is the reason I can't use template on a row, because I want fields to be individually draggable.
Did something like this in Java(backend):
Controller:
App.js:
where
$scope.colDefs
contains the output ofgenerateHeaderCellTemplate()
List<String> excelFields
has all the column names groupped together