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

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

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

 

Article ID: Published Date: Last Revised Date: Platform: Control:
6302 02/15/2016 01/12/2017 JavaScript ejGrid
Did you find this information helpful?
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("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")
        ))


Reply
Diamond Dec 07, 2016
//And this is my javascript:


i have no idea why it will not fire.
Diamond Dec 08, 2016