We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to render the Grid within the specified container height and width?

Platform: ASP.NET MVC |
Control: Grid
Tags: ejgrid, grid

In certain cases, you may like to render the Grid within the specified container height and width.


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.




Returns the cancel option value


Returns the grid model


Returns the name of the event


In the following code example, the Grid is rendered within a container.

  1. Render the Grid.




  1. In the create event, the container height and width is obtained. Assign it to the grid options for scroller.


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

C:\Users\ApoorvahR\Desktop\Note.png Note: Here the black border denotes the container divison.

Figure 2: Grid after rendering within the container

2X faster development

The ultimate ASP.NET MVC UI toolkit to boost your development speed.
You must log in to leave a comment
Joseph E Schmalhofer III
May 05, 2017

Example when used gives height and width of #container equal to 0... so example does not work.

Saravanan Arunachalam [Syncfusion]
May 08, 2017

Hi Joseph,

In the above sample, we have rendered the Grid within the specified container by setting the scroller width and height based on the container width and height repectively which is calculated in the create event of Grid control.


If you have set the container width as 0 then the Grid will render with 0px scroll width and height. So, we suggest you to set the container width and height as like Grid visible.



Saravanan A.

Colin Goss
Jun 08, 2017
I tried this implementation and it throws an exception within jquery. 

Colin Goss
Jun 08, 2017
I get the following exception with the above example. 

jquery-3.1.1.js:3855 Uncaught TypeError: this._eleHeight.indexOf is not a function
    at Object._ensureScrollers (http://localhost:28706/Scripts/ej/web/ej.web.all.min.js:10:133938)
    at Object.refresh (http://localhost:28706/Scripts/ej/web/ej.web.all.min.js:10:142968)
    at Object._init (http://localhost:28706/Scripts/ej/web/ej.web.all.min.js:10:130467)
    at Object.<anonymous> (http://localhost:28706/Scripts/ej/web/ej.web.all.min.js:10:21539)
    at jQuery.fn.init.n.fn.(anonymous function) [as ejScroller] (http://localhost:28706/Scripts/ej/web/ej.web.all.min.js:10:22796)
    at Object._renderScroller (http://localhost:28706/Scripts/ej/web/ej.web.all.min.js:10:2628498)
    at Object._setModel (http://localhost:28706/Scripts/ej/web/ej.web.all.min.js:10:2699551)
    at Object.setModel (http://localhost:28706/Scripts/ej/web/ej.web.all.min.js:10:13971)
    at Object.option (http://localhost:28706/Scripts/ej/web/ej.web.all.min.js:10:14196)
    at Object.createGrid (http://localhost:28706/BigData/Anomaly:295:25)
    at Object._trigger (http://localhost:28706/Scripts/ej/web/ej.web.all.min.js:10:12821)
    at Object.<anonymous> (http://localhost:28706/Scripts/ej/web/ej.web.all.min.js:10:22205)
    at jQuery.fn.init.n.fn.(anonymous function) [as ejGrid] (http://localhost:28706/Scripts/ej/web/ej.web.all.min.js:10:22796)
    at HTMLDocument.<anonymous> (http://localhost:28706/BigData/Anomaly:46:1361)
    at mightThrow (http://localhost:28706/Scripts/jquery-3.1.1.js:3570:29)
    at process (http://localhost:28706/Scripts/jquery-3.1.1.js:3638:12)
Mani Sankar Durai [Syncfusion]
Jun 12, 2017

Hi Colin,



We are unable to reproduce the reported issue at our end. We had also prepared a sample that can be available from the below link.


Link: http://jsplayground.syncfusion.com/f5ztmle3


If you still face the issue, please create a separate incident regarding this and update with more details so that we can analyze the issue and provide the response at the earliest.





Manisankar Durai.


Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile