How to hide the Grid footer?
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.
Name | Description |
cancel | Returns the cancel option value. |
model | Returns the grid model. |
type | 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.
- Render the Grid.
<div id="Grid"></div>
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
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"
});
})
</script>
MVC
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.dataSource)
.AllowScrolling()
.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("Freight").Format("{0:c2}").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"))
)
ASP.NET
<ej:Grid ID="OrdersGrid" runat="server" AllowScrolling="True">
<ClientSideEvents DataBound="dataBound" />
<Columns>
<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" />
</Columns>
<ScrollSettings AllowVirtualScrolling="true" Width="auto" Height="300" VirtualScrollMode="Normal" />
</ej:Grid>
- 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
