How to print the paging bar above the grid.

[Ayane]

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.

[Ragavee U S]

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.

@(Html.EJ().Grid<object>("Grid")

        . . . . .       

        .ClientSideEvents(eve=>eve.DataBound("dataBound"))

        )

<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

    }
</script>

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

    }
</script>

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

Regards,
Ragavee U S.

[Ayane]

Hello,

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.

Regards.

[Ragavee U S]

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.find("#clonePager").html(pagerClone.html());

        else

            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());

        });

    }
</script>

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

Regards,
Ragavee U S.