I tried to include an HTML file in my Angular ui-grid.
The problem is that the file don't seems to be injected into my page.
JS grid code :
$scope.gridDesign = {
paginationPageSizes: [25, 50, 75],
paginationPageSize: 25,
enableColumnResizing: true,
enableGridMenu: true,
enableSelectAll: true,
enableRowSelection: true,
enableFiltering: true,
exporterMenuCsv: true,
exporterMenuPdf: true,
exporterCsvColumnSeparator: ';',
data: self.loadData(),
columnDefs:
[{
field: "id",
enableColumnResizing : true,
displayName: $filter('translate')(
'ID'
)
}, {
field: "name",
enableColumnResizing : true,
displayName: $filter('translate')(
'NAME'
)
}, {
field: "createdDate",
enableColumnResizing : true,
type: 'date',
filterHeaderTemplate: 'app/components/design/filter-header-date.html',
cellFilter: 'date:"dd/MM/yyyy"',
displayName: $filter('translate')(
'CREATED_DATE'),
filters: [
{
condition: function(term, value){
var valueDate = new Date(value);
valueDate.setHours(0,0,0,0);
return valueDate.getTime() == term.getTime();
}
}
]
}]
};
HTML file :
<div class="ui-grid-filter-container" ng-repeat= "colFilter in incol.filters" >
<input type= "text" uib-datepicker-popup="{{datePicker.format}}" datepicker-options="datePicker.options" datepicker-append-to-body="true" show-button-bar="false"
is-open= "showDatePopup[$index].opened" class="ui-grid-filter-input ui-grid-filter-input-{{$index}}"
style="font-size:1em; width:11em!important" ng-model= "colFilter.term" ng-attr-placeholder="{{colFilter.placeholder || ''}}"
aria-label= "{{colFilter.ariaLabel || aria.defaultFilterLabel}}" />
<span style="padding-left:0.3em;">
<button type= "button" class= "btn btn-default btn-sm" ng-click="showDatePopup[$index].opened=true">
<i class= "glyphiconglyphicon-calendar"></i>
</button>
</span>
<div role= "button" class= "ui-grid-filter-button" ng-click= "removeFilter(colFilter, $index)" ng-if=
"!colFilter.disableCancelFilterButton" ng-disabled= "colFilter.term=== undefined || colFilter.term===
null || colFilter.term=== ''" ng-show= "colFilter.term !== undefined && colFilter.term !==
null && colFilter.term !==''">
<i class= "ui-grid-icon-cancel" ui-grid-one-bind-aria-label="aria.removeFilter"> </i>
</div>
</div>
<div ng-if= "colFilter.type==='select'">
<select class= "ui-grid-filter-select ui-grid-filter-input-{{$index}}" ng-model="colFilter.term"
ng-attr-placeholder= "{{colFilter.placeholder || aria.defaultFilterLabel}}" aria-label="{{colFilter.ariaLabel || ''}}"
ng-options= "option.value as option.label for option incolFilter.selectOptions">
<option value=""></option>
</select>
<div role= "button" class= "ui-grid-filter-button-select" ng-click= "removeFilter(colFilter, $index)"
ng-if="!colFilter.disableCancelFilterButton" ng-disabled= "colFilter.term=== undefined || colFilter.term===null || colFilter.term=== ''"
ng-show="colFilter.term !== undefined && colFilter.term !=null">
<i class= "ui-grid-icon-cancel" ui-grid-one-bind-aria-label="aria.removeFilter"> </i>
</div>
</div>
In my chrome console I can only see the following :
"fetching url app/components/design/filter-header-date.html"
And don't have any other error.
Does anybody has a idea of what's the problem ?
