Add element to grids pager

2 posts, 1 answers
  1. Matjaž
    Matjaž avatar
    82 posts
    Member since:
    Jul 2015

    Posted 05 Oct 2016 Link to this post

    How can I properly add element to grids pager? I want to add some additional label, buttons ...

    I tried with:

    this.grid.wrapper.find('.k-pager-wrap.k-grid-pager').prepend("<div>test</div>")

    and it works, but problem is, that every time setOptions is called, pager is destroyed and recreated. So I detach my div before calling setOptions and after that prepend it again:

    this.footer.detach();
    this.grid.setOptions(gridOptions);
    this.getKendoPagerWrapper().prepend(this.footer);

    but the problem is that also resize destroy pager (I have grid in PageControl in Window). When user resize/maximize/restore/minimize window grid.resize is called which destroy pager and all events, on custom element (this.footer) added to grids pager, are gone.

  2. Answer
    Rosen
    Admin
    Rosen avatar
    3241 posts

    Posted 07 Oct 2016 Link to this post

    Hello Matjaž,

    In order to achieve this you could use the dataBound event of the Grid widget, similar to the following:

     

    dataBound: function() {
      var pagerElement = this.pager.element;
      if (!pagerElement.find(".myCustomElement").length) {
        pagerElement
            .prepend('<div class="myCustomElement">test</div>');
      }
    }

     

    Regards,
    Rosen
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top