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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How can I specify the scrolling height only and leave the width to expand to the container?

Thread ID:





115974 Mar 10,2014 05:09 AM UTC Mar 10,2014 12:17 PM UTC JavaScript 2
Tags: ejGrid
Xander van der Merwe
Asked On March 10, 2014 05:09 AM UTC

As per the subject line, you seem to have to specify both the scrolling height and width. If you only specify the height then the width of the grid shrinks to quite a narrow grid.

this works:

scrolling: { height: 500, width:900 },

but this does not work:

scrolling: { height: 500 },   // I only want to specify the scrolling height

Thanks in advance

Xander van der Merwe
Replied On March 10, 2014 05:37 AM UTC

One way that sort of works is to specify a width attribute on the grid like so:

        allowSorting: true,
        allowMultiSorting: true,
        width: "100%",
        allowScrolling: true,
        scrolling: { height: 400, allowVirtualScrolling: true },
        pageSettings: { pageSize: 15 },

The above will render the width correctly when the grid is displayed initially, but if the user resizes the browser and changes the browser width then the grid rendering is messed up, and loses the vertical scrollbar for example if the browser width is decreased during the resize.

Is there a more elegant way to do this?

Thanks in advance

Madhu Sudhanan P [Syncfusion]
Replied On March 10, 2014 12:17 PM UTC

Hi Xander,


The width and height property specify the width and height for the control and the grid automatically displays horizontal and vertical scroll bars respectively.


If the width is not specified then the grid will be rendered with the scroller, which has default width of 250.


To avoid the scrolling width from using default value, set the width property as 0.


Please refer the code snippet.




                // the datasource "window.gridData" is referred from jsondata.min.js

                dataSource: ej.DataManager(window.gridData).executeLocal(ej.Query().take(30)),

                commonWidth: 200,

                allowScrolling: true,

                scrolling: {width:0,height: 300, allowVirtualScrolling: true }

               . . . .




If the width is set as auto/zero then we need to refresh the grid scroller when the browser is resized.


The scroller can be refreshed using the window resize event as follow.



window.onresize = function () {

                var gridobj = $('#Grid').data('ejGrid');






Please let us know if you have any queries.



Madhu Sudhanan. P


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

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

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