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