Positioning and sequence of Pager objects

Question

Is there a way to alter the sequence and position of the items in the pager?
I'm looking to center the numeric items/page number, then show "1 of X records (Y items)" THEN the items per page.
Like the attached screenshot from my designer.

Can that be done?

Thanks

Walter

Attachment: Pager_positioning_b97bea25.zip

Joseph Christ Nithin Issack · Answer

Hi Walter, Greetings from Syncfusion support.  Based on the provided screenshot, we suspect that you
want to change the page count message. You can achieve your requirement by
changing the message of the pager element in the `dataBound` event of
the EJ2 Grid.  Please refer the below code example.

dataBound(args) {
      var pagerObj = this.grid.pagerModule.pagerObj;
      var pagerMessageElem = pagerObj.pagerMessageModule.pageCountMsgElem;
      pagerMessageElem.innerHTML =
        pagerObj.currentPage +
        ' of ' +
        pagerObj.totalPages +
        ' Pages ' +
        '(' +
        pagerObj.totalRecordsCount +
        ' items)';
    }

Sample: https://stackblitz.com/edit/angular-kcbwzd?file=app.component.html,app.component.tsPlease get back to us for further details.Regards,Joseph I.

Walter Cook · Answer

Not quite.The default is< 1 2 3 4 5>then"Items per page"then"1 of 27 pages"I would like them sequenced differently. < 1 2 3 4 5>then"1 of 27 pages"then "Items per page"Is that possible?Further,I would like < 1 2 3 4 5> centered.I would like "1 of 27 pages" and "Items per page" right justified.Is that possible?Thanks

Joseph Christ Nithin Issack · Answer

Hi Walter,  Thanks for your update.  Based on your requirement, you want to change the
order of the elements in the pager component. Your requirement can be achieved
by using the databound event when you can change the alignment of the elements
in the pager component.Please refer the below code example.

dataBound(args) {
      var pagerObj = this.grid.pagerModule.pagerObj;
      var pagerMessageElem = pagerObj.pagerMessageModule.pageCountMsgElem;
      var pageContainerElem = pagerObj.containerModule.element;
      var pageSizeElem = pagerObj.pagerdropdownModule.pagerDropDownDiv;
      pagerMessageElem.innerHTML =
        pagerObj.currentPage +
        ' of ' +
        pagerObj.totalPages +
        ' Pages ' +
        '(' +
        pagerObj.totalRecordsCount +
        ' items)';
      pageContainerElem.style.marginLeft = '400px';
      pageSizeElem.prepend(pagerMessageElem);
      pageSizeElem.style.float = 'right';
    }

Sample: https://stackblitz.com/edit/angular-kcbwzd-awfyae?file=app.component.html,app.component.tsPlease  get back to us for further details.
Regards,Joseph I.