[Solved] Grid pager in toolbar template

[Kalli Kaldi]

Hello.

Is it possible to incorporate the pager into the grid toolbar, via template, and still keep all the functionality of the pager (i.e. not having to write the functions for changing pages etc.).

 

Best regards,
Kalli

[Maria Ilieva]

Hello Kalli,

I am afraid that the requested functionality is not supported. The pager exposes configuration options that allows the developer to only customize build in features of the widget such as page buttons, refresh button and etc. You can find the full list of options here:

• http://docs.telerik.com/kendo-ui/api/web/pager#configuration

If you want to insert any additional components you should do that with jQuery/JavaScript.

Regards,
Maria Ilieva
Telerik

 

 

[Kalli Kaldi]

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

[Maria Ilieva]

Hello Kalli,

Thank you for sharing your approach. I'm sure it will help other users to implement this functionality.

Regards,
Maria Ilieva
Telerik