Always show vertical scrollbar (and no horizontal scrollbar)

[Nicolas]

Hi,

I'm using the following grid:

<telerik:RadGrid
    Width="350px"
    Height="527px">

    <MasterTableView
        TableLayout="Fixed">

        <Columns>
            <telerik:GridTemplateColumn>
                <HeaderStyle Width="257px" />
            </telerik:GridTemplateColumn>

            <telerik:GridBoundColumn>
                <HeaderStyle Width="65px" />
            </telerik:GridBoundColumn>

        </columns>
    </MasterTableView>

    <ClientSettings>
        <Scrolling AllowScroll="True" ScrollHeight="475px" UseStaticHeaders="true" SaveScrollPosition="True"></Scrolling>
    </ClientSettings>

</telerik:RadGrid>

(showing only parts related to sizing and scrolling).

This code gives me the following result (table in red) :
   - when there are not enough items in the grid to require scrolling: screenshot
   - when there are enough items in the grid to allow scrolling: screenshot

I would like to have a vertical scrollbar on the right of this grid without having a horizontal one.

- If I set Width="100%" to my MasterTableView, then the 2 columns take all the table's width, which is nice when there's not enough items in the grid to allow scrolling. As soon as scrolling is needed, the vertical scrollbar shows up (at the correct location, i.e. "inside" the grid, so the grid width is still 350px - that's all the space I have). But because the vertical scrollbar takes like 15 (?) pixels in width, there's not enough space anymore for my 2 columns and this results in a horizontal scrollbar showing up.

- I would like either:
    a) have the vertical scrollbar ONLY shows up (no horizontal). In that case, I can hardly imagine how it would manage displaying my 2 columns with a correct width in both cases where scrolling is needed or not needed.
    b) have the vertical scrollbar ONLY always shown. In that case, my 2 columns width is the same whereas we need scrolling or not, only the scrollbar would get enabled or disabled. This is what I'm looking for.

Is it possible to achieve this?

Thanks
Nicolas

[Dimo]

Hi Nicolas,

Both (a) and (b) are possible:

a) Leave at least one column (e.g. the last one) with no width, so that it adjust automatically, according to the available space. No width for the MasterTableView is necessary.


b) Use the following CSS rule:

.GridDataDiv_SkinName
{
    overflow-y: scroll !important;
}


Greetings,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Nicolas]

Hi,

thanks for your response.

Both your solutions seem to work as I'm expecting. However, I'm getting the following result (a vertical white line at the right of the headers) : screenshot

In case a), I'm getting this only when the grid refreshes (it's inside an update panel) for a fraction of second.

In case b), it's always this way (at least, it's not "flashing" like in case a) because the grid refreshes every 5 seconds)

Do you know if there is a way to get rid of this?

Thanks

[Dimo]

Hi Nicolas,

Are you using GridLines or have you made any customizations to the RadGrid appearance (declaratively or via CSS) ? These might be the cause of the white line.

If none of the above seem to be the case, please send your RadGrid declaration.

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Nicolas]

Hi,

thanks again for your response. Indeed, setting Gridlines to None (instead of Horizontal) fixed the issue.

Thanks!
Nicolas

[hugo arturo]

Hola buen dia me gustaria saber como puedo eliminar el scroll vertical del radgrid te telerik en internet explorer 9 en modo compatibilidad