Disable Vertical Scroller

[Stefan Goosen]

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.

[Venkatesh Ayothi Raman]

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. 

[Stefan Goosen]

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

[Venkatesh Ayothi Raman]

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.