How to move the pager on top of the grid content?
We can move the pager on top of the grid content using dataBound event. This event will trigger after the grid data is bound on initial rendering.
Note: For angular platform use ngAfterViewInit event instead of dataBound event
The following code example shows how to move the pager in Grid.
JS
- Render the grid with dataBound event
<div id="Grid"></div>
<script type="text/javascript">
$(function () {// Document is ready.
$("#Grid").ejGrid({
dataSource: window.unobtrusivedata,
allowPaging: true,
dataBound: "dataBound",
columns: [
{ field: "OrderID", headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 90 },
{ field: "CustomerID", headerText: 'Customer ID', width: 90 },
{ field: "EmployeeID", headerText: 'Employee ID', textAlign: ej.TextAlign.Right, width: 75 },
{ field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, width: 75, format: "{0:C}" },
{ field: "Verified", headerText: 'Verified', width: 50 }
],
});
});
</script>
MVC
[In View]
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.data)
.AllowPaging()
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(90).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(80).Add();
col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Add();
col.Field("Verified").HeaderText("Verified").Width(150).Add();
})
.ClientSideEvents(eve=>eve.DataBound ("dataBound"))
)
[Controller]
namespace EJGrid.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
var DataSource = OrderRepository.GetAllRecords();
ViewBag.data = DataSource;
return View();
}
}
}
ASP.NET
[aspx]
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" >
<ClientSideEvents DataBound="dataBound" />
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" TextAlign="Right" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" />
<ej:Column Field="EmployeeID" HeaderText=" Employee ID" TextAlign="Right" />
<ej:Column Field="Freight" HeaderText="Freight" Format="{0:C}" TextAlign="Right" />
<ej:Column Field="Verified" HeaderText="Verified" />
</Columns>
</ej:Grid>
[CS]
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.OrdersGrid.DataSource = new NorthwindDataContext().Orders;
this.OrdersGrid.DataBind();
}
}
ASP.NET CORE:
<ej-grid id="FlatGrid" allow-paging="true" databound="dataBound" datasource="ViewBag.dataSource">
<e-columns>
<e-column field="OrderID" header-text="Order ID" text-align="Right"></e-column>
<e-column field="CustomerID" header-text="Customer ID"></e-column>
<e-column field="EmployeeID" header-text="Employee ID" text-align="Right"></e-column>
<e-column field="Freight" header-text="Freight" text-align="Right" format="{0:C}"></e-column>
<e-column field="Verified" header-text="Verified"></e-column>
</e-columns>
</ej-grid>
JS
- Move the pager to top of grid by prepending before grid header.
function dataBound(args) {
this.getHeaderContent().prepend(this.getPager()); // Before the grid header
//this.getContent().prepend(this.getPager()); // Before the grid content
this.getPager().css("border-top-width",0);
this.getPager().css("border-bottom-width",1);
}
Angular:
<ej-grid #grid id="Grid" [dataSource]="gridData" [allowPaging]="true" (dataBound)="dataBound($event)">
<e-columns>
<e-column field="OrderID" headerText="Order ID" textAlign="right"></e-column>
<e-column field="CustomerID" headerText="Customer ID"></e-column>
<e-column field="EmployeeID" headerText="Employee ID" textAlign="right"></e-column>
<e-column field="Freight" headerText="Freight" textAlign="right" format="{0:C}"></e-column>
<e-column field="Verified" headerText="Verified"></e-column>
</e-columns>
</ej-grid>
TS File:
Use ngAfterViewInit event in Angular to move the pager to top of Grid
@ViewChild('grid') Grid: EJComponents<any, any>;
export class GridComponent {
public gridData: any;
constructor() {
//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js
this.gridData = (window as any).gridData;
}
ngAfterViewInit(){
var grid = this.Grid.widget;
grid.getHeaderContent().prepend(grid.getPager()); // Before the grid header
//grid.getContent().prepend(grid.getPager()); // Before the grid content
grid.getPager().css("border-top-width",0);
grid.getPager().css("border-bottom-width",1);
}
}
Screen shot:
