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

Scrolling on Signle Column

Technology mvc and angular js

I am using synchfusion grid view with angular js

I have only one column on my grid view 

I want to set horizontal scrolling on my gridview when column data is big.

I am sharing image with you for your better understanding

Attachment: scroll_9425d326.rar

5 Replies

IR Isuriya Rajan Syncfusion Team August 31, 2015 10:32 AM UTC

 Hi Bharat,

Thanks for using Syncfusion products.

We can set the scrolling for large data column and enable the Scroller by setting allowscrolling property as true/ false. We can also define the scroll width and height by using the scrollSettings property. 

<div id="grid" ej-grid e-datasource="data" e-allowpaging="false" e-allowscrolling="true" e-scrollsettings-height="100" e-scrollsettings-width="100" e-toolbarsettings-showtoolbar='true' " " e-toolbarsettings-toolbaritems='toolbar' e-editsettings-allowdeleting=' true' e-editsettings-allowediting='true' e-allowsorting='true' e-editsettings-allowadding='true'></div>

Please refer to the jsplayground sample and Help document for how we can enable the scroll property in Grid,


Help Document:Scroll

Try the above sample and let us know if it helps. If we misunderstood your query, please provide clear information regarding your requirements. It will help to provide the prompt solution.


Isuriya R

BB Bharat Buddhadev September 2, 2015 06:31 AM UTC

Thanks for you scrolling example

but after applying scrolling when we insert new record  last record in the the grid its display partially.
so last record not able to seen properly.

after applying scrolling in existing project facing same issue

Sharing image with you for you better understanding

Attachment: New_folder_(2)_1031ae60.rar

IR Isuriya Rajan Syncfusion Team September 3, 2015 08:37 AM UTC

Hi Bharat,

Please let us know whether you are mentioning that the highlighted record is hiding in your Grid or some other scenario.

While adding a record, we can see the full record by using the Scroller.

Regards ,
Isuriya R

BB Bharat Buddhadev September 3, 2015 08:59 AM UTC

I am talking about highlighted record 
you can refere for your provided image for better understanding 120082 of your reply

I want to display last record perfectly instead of partial display  when apply scrolling

PK Prasanna Kumar Viswanathan Syncfusion Team September 4, 2015 10:08 AM UTC

Hi Bharat,
Are you mentioning last record of visible records or last record of current page?
If you want to display the visible record perfectly, we suggest you to set the scrollsettings height value as multiple of row height. By default the row height value is 32, so set the scroll height as multiple of 32. 
If we enable horizontal scroller, then add the horizontal scroll bar height with the row height value (default value of horizontal scrollbar height is 18).
Please find the below the screenshots, code example and sample,

1.       Without adding new record

2.       While adding new record
Code example :

<div id="Grid" ej-grid e-datasource="data"  e-allowpaging="false" e-allowscrolling="true" e-scrollsettings-height="82" e-scrollsettings-width="300">

Sample Link : https://jsplayground.syncfusion.com/m2z4ekrc
Prasanna Kumar N.S.V

Live Chat Icon For mobile
Up arrow icon