How to Render .NET MVC Grid within the Specified Height and Width?
In certain cases, you may like to render our ASP.NET MVC DataGrid page 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
Conclusion
I hope you enjoyed learning on how to render .NET MVC Grid within the specified height and width.
You can refer to ASP.NET MVC Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET MVC Grid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
