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
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to display pager bar in both top and bottom of the Grid?

Platform: jQuery |
Control: ejGrid |
Published Date: February 15, 2016 |
Last Revised Date: January 12, 2017

When having large number of records displayed in Grid, then the user may like to have the ejPager on both top and bottom of the Grid.

Solution:

We can achieve the above requirement by cloning the pager element and prepending it to the Grid header in the actionComplete event of the grid.

The actionComplete event will be triggered every time a grid action gets completed successfully.

Example:

In the following example, we have rendered a grid with paging enabled.

  1. Render the grid

JS:

 

MVC

 

ASP

 

  1. In the ActionComplete event of the Grid, create a clone of the pager element and prepend it to the grid header. In the click event of the pager, we are performing custom pager operation using the gotoPage method of the ejGrid

 

 

Result:

Fig 1: Initial Rendering

 

Fig 2: On Paging operation

 

ADD COMMENT
You must log in to leave a comment
Comments
Diamond
Dec 07, 2016
I have the following code that renders a grid with two paging bars but the cloned one will not fire off to the DataSouce when clicked.

@(Html.EJ().DataManager("FlatData").URL(Url.Action("DataSource", "AdminProduct", null, Request.Url.Scheme)).Adaptor(AdaptorType.UrlAdaptor))
@(Html.EJ().Grid<object>("Grid")
.DataManagerID("FlatData")
.ContextMenuSettings(a => a.EnableContextMenu())
.AllowPaging()
.AllowSorting()
.AllowMultiSorting()
.AllowFiltering()
.AllowSearching()
.SortSettings(sort => sort.SortedColumns(col => col.Field("ID").Direction(SortOrder.Descending).Add()))
.PageSettings(p => p.PageSize(30).EnableQueryString())
.Columns(col =>
{
col.Field("ID").HeaderText("ID").IsPrimaryKey(true).Width(70).HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Center).Add();
col.Field("Active").HeaderText("Active").Width(60).HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Center).AllowSorting(false).Add();
col.Field("DisplayName").HeaderText("Display Name").HeaderTextAlign(TextAlign.Center).Width(175).Add();
col.Field("Description").HeaderText("Description").HeaderTextAlign(TextAlign.Center).Add();
col.Field("MosActive").HeaderText("Mos").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Center).Width(45).AllowSorting(false).Add();
col.Field("SmbActive").HeaderText("Smb").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Center).Width(45).AllowSorting(false).Add();
})
.ClientSideEvents(e => e.ActionComplete("onComplete")
))

<script type="text/javascript">

//actionComplete event of the Grid
function onComplete(args) {
processTopPager(this); // Perform clone pager functionalities
}

//syncfusion code for
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>

Reply
Diamond
Dec 07, 2016
//And this is my javascript:
<script type="text/javascript">

    //actionComplete event of the Grid
    function onComplete(args) {
        processTopPager(this); // Perform clone pager functionalities
    }


    //syncfusion code for
    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>


i have no idea why it will not fire.
Diamond
Dec 08, 2016
<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").click(function (e) {
            $("#Grid").ejGrid("gotoPage", $(this).html());
        });
    }</script>
Reply

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

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

Live Chat Icon For mobile
Live Chat Icon