Category / Section
How to move the pager on top of the grid content?
1 min read
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: