Articles in this section
Category / Section

How to hide the Grid footer?

1 min read

You can hide the pager details from being displayed in the Grid by using the dataBound event of the Grid. The dataBound event is triggered when the Grid is bound with data during the initial rendering. In the argument of the dataBound event, you can obtain the following details.





Returns the cancel option value.


Returns the grid model.


Returns the name of the event.


In the following code example, the Grid is rendered with the virtual paging enabled by using the allowVirtualScrolling property.


  1. Render the Grid.


<div id="Grid"></div>
<script type="text/javascript">  
       $(function () {                    
                    dataSource: window.gridData,
                    allowScrolling: true,
                    scrollSettings: { width: "auto", height: 300, allowVirtualScrolling: true, virtualScrollMode: ej.Grid.VirtualScrollMode.Normal },                    
                    columns: [
                            { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", width: 100 },
                            { field: "CustomerID", headerText: 'Customer ID', width: 100},                            
                            { field: "Freight", format: "{0:C}", width: 100 },                            
                            { field: "ShipCity", headerText: "Ship City", width: 100 },
                            { field: "ShipName", headerText: 'Ship Name', width: 100}
                    dataBound: "dataBound" 



        .ScrollSettings(scroll => { scroll.AllowVirtualScrolling().Height(300).Width("auto").VirtualScrollMode(VirtualScrollMode.Normal); })
        .Columns(col =>
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(100).Add();
            col.Field("CustomerID").HeaderText("Customer ID").Width(100).Add();
            col.Field("ShipCity").HeaderText("Ship City").Width(100).Add();
            col.Field("ShipName").HeaderText("Ship Name").Width(100).Add();
        .ClientSideEvents(eve => eve.DataBound("dataBound"))



<ej:Grid ID="OrdersGrid" runat="server" AllowScrolling="True">
 <ClientSideEvents DataBound="dataBound" />
                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" Width="100" />
                <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="100" />                
                <ej:Column Field="Freight" HeaderText="Freight" Format="{0:C}" Width="100" />                
                <ej:Column Field="ShipCity" HeaderText="Ship City" Width="100" />
                <ej:Column Field="ShipName" HeaderText="Ship Name" Width="100" />
            <ScrollSettings AllowVirtualScrolling="true" Width="auto" Height="300" VirtualScrollMode="Normal" />            


  1. In the dataBound event, you can hide the pager <div> from being displayed by using the following code example.


function dataBound(args) {
        this.element.find(".e-pagerstatusbar").addClass("e-hide");//Hides the pager <div>.


When you need to hide only the message within the pager <div> from being displayed, you can use the following code example.


function dataBound(args) {
        this.element.find(".e-pagermsgdiv").addClass("e-hide");// Hides only the text within the pagerdiv.


Figure 1: Grid with Virtual scrolling enabled – Pager <div> visible

Figure 2: Grid with Virtual scrolling enabled – Pager <div> hidden

Figure 3: Grid with Virtual scrolling enabled – Message within pager <div> is hidden

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