0

Hy,

In my app I use Telerik extensions for MVC Grid control:

Telerik Grid

Does anyone have any idea why when I resize the window (in any browser) the vertical or horizontal scroll is not appearing?

I am setting the width and height of the grid to 100%.

 @(Html.Telerik().Grid<MyViewModel>()
      .Name("MyGrid")
      .HtmlAttributes(new { style = "display:table; width:100%; height: 100%;" })
...)

I've tried even putting the grid into a div with width and height 100%... still no scroll when I resize the window.

Thanks in advance,

Jeff.

4 Answers 4

1

Are you looking for scrollbars on the whole window, or just the Grid?

I got scrollbars on the Grid, when I added a div around the grid, set the height to 100px, and set overflow to auto:

<div style="height: 100px; overflow:auto;">
    @(Html.Telerik().Grid<MyViewModel>()
      .Name("MyGrid")
    ...)
</div>

It doesn't sound like a problem with the grid, but with your HTML. Add some more code and more detail on what you are trying to accomplish.

1
  • I'm looking for the scrollbars on the whole window Mar 15, 2012 at 14:27
0

I fond the solution. Somehow the style of the page had 'overflow:hidden'; after setting to 'auto', all the scrolls are there.

0

For Vertical Scroll we can use the following and for horizontal scroll just use a div

<div class="DataGridXScroll">

@(Html.Telerik().Grid(listCustomerStatus)
                .Name("grvSalesAdjustment")
                .DataKeys(keys => keys.Add(k => k.CustCode))
                .Columns(column =>
                {

                })
               .Selectable()
               .Pageable(page => page.PageSize(100))
               .Scrollable(scroll => scroll.Height(300))
)
 </div>

add the following CSS

.DataGridXScroll
{
    width: 1000px;   
    overflow-x: scroll;
    text-align:left;
}

This is work in Firefox and other browser. For IE just use the following CSS

.t-grid
{
   position: static;
   overflow:hidden;
}

.t-grid-content
{
   overflow-x: hidden;
   position:static; 
   width:100%;  
}

.t-grid-header-wrap
{
   position:static;    
}

.t-grid-content
{
   overflow-x: hidden;    
}

.t-grid-footer-wrap
{
  position:static;
}
0

Set specific width that would trigger the scrollbar. Sample;

.Scrollable(scr => scr.Height(430))

Hope it helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.