Category / Section
How to display pager bar in both top and bottom of the Grid?
1 min read
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.
- Render the grid
JS:
<div id="Grid"></div>
<script type="text/javascript">
$(function () {// Document is ready.
$("#Grid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
columns: [
{ field: "OrderID"},
{ field: "CustomerID"},
{ field: "Freight"},
{ field: "ShipCity"},
{ field: "ShipCountry"},
],
actionComplete: "onComplete",
});
});
</script>
MVC
[In View]
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.data)
.AllowPaging()
.Columns(col =>
{
col.Field("OrderID").Add();
col.Field("CustomerID").Add();
col.Field("Freight").Add();
col.Field("ShipCity").Add();
col.Field("ShipCountry").Add();
})
.ClientSideEvents(eve=>eve.ActionComplete("onComplete"))
)
[In controller]
namespace EJGrid.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
var DataSource = OrderRepository.GetAllRecords();
ViewBag.data = DataSource;
return View();
}
}
}
ASP
[aspx]
<ej:Grid ID="Grid" runat="server" AllowPaging="True" >
<ClientSideEvents ActionComplete="onComplete" />
<Columns>
<ej:Column Field="OrderID" />
<ej:Column Field="CustomerID" />
<ej:Column Field="Freight" />
<ej:Column Field="ShipCity />
<ej:Column Field="ShipCountry />
</Columns>
</ej:Grid>
[CS]
public partial class _Default : Page
{
List<Orders> order = new List<Orders>();
protected void Page_Load(object sender, EventArgs e)
{
this.Grid.DataSource = new NorthwindDataContext().Orders.ToList();
this.Grid.DataBind();
}
}
- 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
<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(".e-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>
Result:
Fig 1: Initial Rendering
Fig 2: On Paging operation
