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.
Unfortunately, activation email could not send to your email. Please try again.

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.

  1. Render the Grid.

JavaScript

MVC

ASP.NET

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

JavaScript

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

Article ID: Published Date: Last Revised Date: Platform: Control:
3508 01/27/2015 08/03/2015 ASP.NET MVC Grid
Tags:
Did you find this information helpful?
Comments
Joseph E Schmalhofer III May 05, 2017

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

Reply
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.

 

Regards,

Saravanan A.

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


Reply
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. (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. (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. (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)
Reply
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.

 

 

Regards,

 

Manisankar Durai.

 

Add Comment
You must log in to leave a comment

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.