Grid pager in toolbar template

4 posts, 0 answers
  1. Kalli Kaldi
    Kalli Kaldi avatar
    30 posts
    Member since:
    Oct 2011

    Posted 21 Mar 2016 Link to this post

    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

  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 21 Mar 2016 Link to this post

    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:
    If you want to insert any additional components you should do that with jQuery/JavaScript.


    Regards,
    Maria Ilieva
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kalli Kaldi
    Kalli Kaldi avatar
    30 posts
    Member since:
    Oct 2011

    Posted 21 Mar 2016 in reply to Maria Ilieva Link to this post

    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

  4. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 23 Mar 2016 Link to this post

    Hello Kalli,

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

    Regards,
    Maria Ilieva
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top