How to render the Grid within the specified container height and width?
In certain cases, you may like to render the Grid within the specified container height and width.
Solution
You can achieve the above requirement using the create event or using an external button click event.
The create event is triggered when the grid is rendered completely. In the argument of the create 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 |
Example
In the following code example, the Grid is rendered within a container.
- Render the Grid.
JavaScript
<div id="container" style="width:70%;height:70%;border:1px solid">
<div id="Grid"></div>
</div>
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
pageSettings: { pageSize: 7 },
scrollSettings: { width: 800, height: 200 },
allowScrolling: true,
columns: [
{ field: "OrderID", isPrimaryKey: true, headerText: "Order ID", width: 100 },
{ field: "CustomerID", headerText: 'Customer ID', width: 100},
{ field: "EmployeeID", headerText: 'Employee ID', width: 100},
{ field: "Freight", headerText: 'Freight', format: "{0:C}", width: 100 },
{ field: "OrderDate", headerText: 'OrderDate', format: "{0:MM/dd/yyyy}", width: 100 },
{ field: "ShipCountry", headerText: "Ship Country", width: 100 },
{ field: "ShipName", headerText: 'Ship Name', width: 100}
],
create: "create"
});
})
</script>
MVC
<div id="container" style="width:70%;height:70%;border:1px solid">
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.dataSource)
.AllowPaging()
.PageSettings(page=>page.PageSize(7))
.AllowScrolling()
.ScrollSettings(scroll=>scroll.Height(200).Width(800))
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(100).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(100).Add();
col.Field("EmployeeID").HeaderText("Employee ID").Width(100).Add();
col.Field("Freight").HeaderText("Freight").Format("{0:c2}").Width(100).Add();
col.Field("OrderDate").HeaderText("Order Date").Format("{0:MMM dd,yyyy}").Width(100).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width(100).Add();
col.Field("ShipName").HeaderText("Ship Name").Width(100).Add();
})
.ClientSideEvents(eve=>eve.Create("create"))
)
</div>
ASP.NET
<div id="container" style="width:70%;height:70%;border:1px solid">
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" AllowScrolling="True" >
<ClientSideEvents Create="create" />
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" Width="100" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" Width="100" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="100" />
<ej:Column Field="Freight" HeaderText="Freight" Format="{0:C}" Width="100" />
<ej:Column Field="OrderDate" HeaderText="Order Date" Format="{0:MM/dd/yyyy}" Width="100" />
<ej:Column Field="ShipCountry" HeaderText="Ship Country" Width="100" />
<ej:Column Field="ShipName" HeaderText="Ship Name" Width="100" />
</Columns>
<ScrollSettings Height="200" Width="800" ></ScrollSettings>
<PageSettings PageSize="7" />
</ej:Grid>
</div>
- In the create event, the container height and width is obtained. Assign it to the grid options for scroller.
JavaScript
function create(args) {
var gridObj = $("#Grid").ejGrid("instance");
var scrollerwidth = $("#container").width();//Obtain the width of the container
var scrollerheight = ($("#container").height()) - ($(".e-gridheader").outerHeight()) - ($(".e-pager").outerHeight());//Obtain the height of the container and subtract it from gridheader and pager
gridObj.option({ allowScrolling: true, scrollSettings: { width: scrollerwidth, height: scrollerheight } });//pass the obtainer width and height to gridmodel options
}
Here the grid header height and pager height is subtracted from the container height as, by default, the value you set to the scroller is wholly set to the grid content.
Since the container height is to be set to the Grid that contains three separate divisions like gridheader, gridcontent and pager, the above operation is performed.
The following screenshots illustrates the output.
Figure 1: Grid before setting the container width and height
Note: Here the black border denotes the container divison.
Figure 2: Grid after rendering within the container
