I was trying angular's ui-grid for a project but finding it difficult to built a custom template for my grid . When I checked the source code , I got the below html template I saved it to a file , header-template.html and referenced it while configuring the grid.
<div class="ui-grid-header">
<div class="ui-grid-top-panel">
<div ui-grid-group-panel="" ng-show="grid.options.showGroupPanel" class="">
<div class="ui-grid-group-panel ng-scope">
<div ui-t="groupPanel.description" class="description " ng-show="groupings.length == 0">
Drag a column header here and drop it to group by that column.</div>
<ul ng-show="groupings.length > 0" class="ngGroupList ">
<!-- ngRepeat: group in configGroups -->
</ul>
</div>
</div>
<div class="ui-grid-header-viewport">
<div class="ui-grid-header-canvas">
<!--ngRepeat: col in colContainer.renderedColumns track by col.colDef.name -->
<div class="ui-grid-header-cell clearfix" ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" ui-grid-header-cell="" col="col" render-index="$index" ng-style="$index === 0 && colContainer.columnStyle($index)">
<div ng-class="{ 'sortable': sortable }" class="sortable">
<div class="ui-grid-vertical-bar"> </div>
<div class="ui-grid-cell-contents" col-index="renderIndex">
<span class="">{{col.colDef.name}}</span>
<span ui-grid-visible="col.sort.direction" ng-class="{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }" class="ui-grid-invisible ui-grid-icon-blank"> </span>
</div>
<!-- ngIf: grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false -->
<!-- ngRepeat: colFilter in col.filters -->
<!-- ngIf: filterable -->
<div ng-if="filterable" class="ui-grid-filter-container" ng-repeat="colFilter in col.filters">
{{colFilter}}
<input type="text" class="ui-grid-filter-input" ng-model="colFilter.term" ng-click="$event.stopPropagation()" ng-attr-placeholder="{{colFilter.placeholder || ''}}" placeholder="">
<div class="ui-grid-filter-button" ng-click="colFilter.term = null">
<i class="ui-grid-icon-cancel right" ng-show="!!colFilter.term"> </i>
<!-- use !! because angular interprets 'f' as false -->
</div>
</div>
<!-- end ngIf: filterable --><!-- end ngRepeat: colFilter in col.filters -->
</div>
</div>
<!-- end ngRepeat: col in colContainer.renderedColumns track by col.colDef.name -->
</div>
</div>
<div ui-grid-menu="" class=""><!-- ngIf: shown -->
</div>
</div>
</div>
I have specified the gridOptions by
$scope.gridOptions = {
data: 'gridData',
enableRowHeaderSelection: false,
multiSelect: false,
enableFiltering: true,
columnDefs: $scope.columnDef,
enableColumnMenus: false,
headerTemplate:'views/header-template.html'
};
But for some reason , I dont know why , I m getting this , as shown in the image . The template gets printed once again , below the template that I try to build
Please help ..
To obtain what I was trying to achieve I had to specify a headerCellTemplate(Not headerTemplate) within the columnDefs of the grid as given below :
{
field: key, displayName: key
, headerCellTemplate: '<div ng-class="{ \'sortable\': sortable }">' +
'<div class="ui-grid-vertical-bar"> </div>' +
'<div class="ui-grid-cell-contents" col-index="renderIndex">' +
'<span ui-grid-visible="col.sort.direction" ng-class="{ \'ui-grid-icon-up-dir\': col.sort.direction == asc, \'ui-grid-icon-down-dir\': col.sort.direction == desc, \'ui-grid-icon-blank\': !col.sort.direction }">' +
' ' +
'</span>' +
'</div>' +
'<div class="ui-grid-column-menu-button" ng-if="grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false" class="ui-grid-column-menu-button" ng-click="toggleMenu($event)">' +
'<i class="ui-grid-icon-angle-down"> </i>' +
'</div>' +
'<div ng-if="filterable" class="ui-grid-filter-container" ng-repeat="colFilter in col.filters">' +
'<input type="text" class="ui-grid-filter-input" ng-model="colFilter.term" ng-attr-placeholder="{{col.displayName || \'\'}}" />' +
'<div class="ui-grid-filter-button" ng-click="colFilter.term = null">' +
'<i class="ui-grid-icon-cancel" ng-show="!!colFilter.term"> </i>' + <!-- use !! because angular interprets 'f' as false -->
'</div>' +
'</div>' +
'</div>'
}
Because for ui-grid , headerCellTemplate is appended inside the headerTemplate .The default headerCellTemplate is provided in the following link
Thank You
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With