We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to print the paging bar above the grid.

When there're lots of data represented in the grid, most of them are used to printing the paging bar on the grid top and bottom.
Please, how can I do it? I'll appreciate it.

3 Replies

RU Ragavee U S Syncfusion Team January 27, 2016 05:31 AM UTC

Hi Ayane,

Thanks for contacting Syncfusion support.

We have created a sample to display the grid pager both at bottom and top of the Grid, which can be downloaded from the below location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/121799/ze/Sample-1148870421

In the above sample, we have cloned the pager bar element and have inserted the cloned element before the grid header in the DataBound event of the grid. Please refer to the below code example.


        . . . . .       



<script type="text/javascript">

    function dataBound(args) {

        var pager = $("#"+this._id+" .e-pager").clone();//get the clone element of grid pager

        pager.insertBefore("#"+this._id+" .e-gridheader");//insert the cloned element before the grid header


Or if you want to display pager bar only at top of grid

<script type="text/javascript">

    function dataBound(args) {

       $("#"+this._id+" .e-pager").insertBefore("#" + this._id + " .e-gridheader");//insert the pager element before the grid header


Please try the above solution. If we have misunderstood your requirement, please get back with more and clear information on your requirement.

Ragavee U S.

AY Ayane February 1, 2016 03:01 PM UTC


I have tried your solution at this and different ways and it does not work appropriately. If I wanted to display the paging bar only at top of grid, your solution would be suitable, but when I display the paging bar both at top and bottom of grid copying these code lines out:

var pager = $("#"+this._id+" .e-pager").clone();
pager.insertBefore("#"+this._id+" .e-gridheader");,

the paging bar inserted before the grid header appears, but does not work.

Please, How can I solve this problem?

Thanks in advance.


RU Ragavee U S Syncfusion Team February 2, 2016 06:15 AM UTC

Hi Ayane,

While appending the pager to both top and bottom of the grid, we have to perform custom paging operation on the cloned pager to reflect the changes in the Grid. Please refer to the code example.

<script type="text/javascript">

    //actionComplete event of the Grid

    function onComplete(args) {

        processTopPager(this); // Perform clone pager functionalities 


    function processTopPager(gridObj) {

        // Create a clone pager

        var pagerClone = gridObj.getPager().clone(true);

        // Replace the id to numeric container element in the clone pager

        pagerClone.find("#NumericContainer").prop("id", "NumericContainer1");

        // Prepend the clone element in the Grid control

        if (gridObj.element.find("#clonePager").length)



            gridObj.element.prepend(pagerClone.prop("id", "clonePager"));

        // Perform Paging operation while clicking clone pager

        gridObj.element.find("#NumericContainer1 a").click(function (e) {

            $("#Grid").ejGrid("gotoPage", $(this).html());



We have modified the previously provided sample with the above provided solution.

Sample Link: http://www.syncfusion.com/downloads/support/forum/121799/ze/Sample_modified-234639042

Ragavee U S.

Live Chat Icon For mobile
Up arrow icon