Hi Maria.
I was actually able to accomplish this, but as you said, using JQuery. And also, I did it the other way around, i.e. appended the buttons to the pager wrapper. And this is the solution...
I created a simple directive to make this work :
(function () {
var gridExportDirective = function () {
return function (scope, element) {
var pagerWrap = element.find('.k-pager-wrap');
pagerWrap.append('<a class="pull-right pdfExport" style="margin:5px 10px 0 0"><div class="png-pdf tiny" data-toggle="tooltip" data-original-title="Export to PDF"></div></a>');
pagerWrap.append('<a class="pull-right excelExport" style="margin:5px 10px 0 0"><div class="png-spread-sheet tiny" data-toggle="tooltip" data-original-title="Export to Excel"></div></a>');
pagerWrap.find('.excelExport').bind('click', function () {
scope.exportToExcel();
})
pagerWrap.find('.pdfExport').bind('click', function () {
scope.exportToPDF();
})
}
}
angular.module("rbwebunitapp").directive("gridExportDirective", gridExportDirective);
})();
All I have to do in the HTML is add the directive to my div for the grid:
<div id="gridContracts" grid-export-directive kendo-grid="gridContracts" k-options="gridContractOptions"> <div class='k-pager-wrap k-grid-pager'></div>
<div class="k-grouping-header"></div>
</div>
Best regards,
Kalli Kaldi