Scrolling on Signle Column

[Bharat Buddhadev]

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

[Isuriya Rajan]

 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,

 Sample

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.

Regards,

Isuriya R

[Bharat Buddhadev]

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

[Isuriya Rajan]

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

[Bharat Buddhadev]

 yes,

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

[Prasanna Kumar Viswanathan]

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
Regards,
Prasanna Kumar N.S.V