Articles in this section
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

  1. 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

  1. 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:

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied