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

Disable Vertical Scroller

When enabling responsive grid and specifying a min width, the grid correctly shows the horizontal scroll bar when resizing the window, but the vertical scroll bar also appears.  It seems like the grid is not taking the height of the added horizontal scrollbar into consideration and therefor adds the vertical scrollbar.  This looks really bad when only one row in the grid.

Is there a way to prevent the vertical scroll bar from becoming visible.



3 Replies

VA Venkatesh Ayothi Raman Syncfusion Team March 7, 2017 10:13 AM UTC

Hi Stefan, 
Thanks for contacting Syncfusion support. 
For your requirement, we suggest you to enable the AllowScrolling property and set scroll settings height as “100%”  like as follows, 
Code example
@Grid 
@(Html.EJ().Grid<BasicMVCSample.Grid.OrdersView>("ForeignKey") 
        .Datasource((IEnumerable<object>)ViewBag.dataSource1) 
        .AllowPaging() 
        .AllowGrouping() 
        .IsResponsive() 
        .MinWidth(500) 
        .AllowScrolling() 
        .ScrollSettings(s=>s.Height("100%")) 
        . . . 
        .Columns(col => 
        { 
            . . . 
        })) 

Please let us know if you have any further assistance on this? 

Regards, 
Venkatesh Ayothiraman. 



SG Stefan Goosen March 7, 2017 01:34 PM UTC

Thank you Venkatesh, could you provide an example on how to achieve this using tag helpers?


VA Venkatesh Ayothi Raman Syncfusion Team March 8, 2017 01:15 PM UTC

Hi Stefan, 
Thanks for the update. 
To set scroll settings width and height in percentage as a string we suggest you to use ‘@’ symbol before setting the width and height in scrollSettings for grid when using Tag helper. It accepts any type of value such as int and string. So we need to give values like as follows, 
Code example: 
@Grid 
<ej-grid id="Grid" is-responsive="true" min-width=500 allow-scrolling="true" allow-paging="true" > 
    . . . 
    <e-scroll-settings height=@("100%") ></e-scroll-settings> 
    <e-columns> 
        . . . 
    </e-columns> 
 
 
</ej-grid> 
 
Regards, 
Venkatesh Ayothiraman. 


Loader.
Live Chat Icon For mobile
Up arrow icon