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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to print the paging bar above the grid.

Thread ID:

Created:

Updated:

Platform:

Replies:

121799 Jan 26,2016 07:57 PM UTC Feb 2,2016 06:15 AM UTC ASP.NET MVC 3
loading
Tags: Grid
Ayane
Asked On January 26, 2016 07:57 PM UTC

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 [Syncfusion]
Replied On 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.

@(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
Replied On February 1, 2016 03:01 PM UTC

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 [Syncfusion]
Replied On 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.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.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;