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.
Syncfusion Feedback

Scrolling on Signle Column

Thread ID:

Created:

Updated:

Platform:

Replies:

120082 Aug 28,2015 10:48 AM UTC Sep 4,2015 10:08 AM UTC JavaScript 5
loading
Tags: ejGrid
Bharat Buddhadev
Asked On August 28, 2015 10:48 AM UTC

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 [Syncfusion]
Replied On 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,

 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
Replied On 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

Isuriya Rajan [Syncfusion]
Replied On 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


Bharat Buddhadev
Replied On September 3, 2015 08:59 AM UTC

 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 [Syncfusion]
Replied On 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 : http://jsplayground.syncfusion.com/m2z4ekrc
Regards,
Prasanna Kumar N.S.V


CONFIRMATION

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.

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

;