[Solved] Resize columns, hide horizontal scroll bar

[Antony]

Hi,

I have a problem in that I do not want the horizontal scroll bar to show (ever), think yahoo mail. However, whenever I increase a columns width the horizontal scroll bar appears. Can anyone help? Below is my code for the grid...

	<telerik:RadGrid ID="RadGrid1" runat="server" OnItemDataBound="RadGrid_ItemDataBind" GridLines="None" Skin="Vista" AllowMultiRowSelection="True"
	AllowPaging="false" AllowSorting="True"
	PageSize="20" Height="100%" Width="100%" OnNeedDataSource="RadGrid1_NeedDataSource" >
	<MasterTableView AutoGenerateColumns="False" Width="100%" DataKeyNames="ID" TableLayout="Fixed" RowIndicatorColumn-Resizable="true">
	<PagerStyle Visible="true" Mode="NextPrevAndNumeric" />
	<Columns>
	<telerik:GridClientSelectColumn UniqueName="column">
	<HeaderStyle Width="5%" />
	<ItemStyle Width="5%" />
	</telerik:GridClientSelectColumn>
	<telerik:GridTemplateColumn UniqueName="NameColumn" DataType="System.String" HeaderText="Name">
	<HeaderStyle Width="15%" />
	<ItemStyle Width="15%" Wrap="false" />
	<ItemTemplate><asp:Label ID="lblName" runat="server"></asp:Label></ItemTemplate>
	</telerik:GridTemplateColumn>
	<telerik:GridTemplateColumn UniqueName="ConstituencyColumn" DataType="System.String" HeaderText="Constituency">
	<HeaderStyle Width="25%" />
	<ItemStyle Width="25%" />
	<ItemTemplate><asp:Label ID="lblConstituency" runat="server"></asp:Label></ItemTemplate>
	</telerik:GridTemplateColumn>
	<telerik:GridTemplateColumn UniqueName="PartyColumn" DataType="System.String" HeaderText="Party">
	<HeaderStyle Width="10%" />
	<ItemStyle Width="10%" />
	<ItemTemplate><asp:Label ID="lblParty" runat="server"></asp:Label></ItemTemplate>
	</telerik:GridTemplateColumn>
	<telerik:GridTemplateColumn UniqueName="JobColumn" DataType="System.String" HeaderText="Job">
	<HeaderStyle Width="20%" />
	<ItemStyle Width="20%" />
	<ItemTemplate><asp:Label ID="lblJob" runat="server"></asp:Label></ItemTemplate>
	</telerik:GridTemplateColumn>
	<telerik:GridTemplateColumn UniqueName="EmailColumn" DataType="System.String" HeaderText="Email">
	<HeaderStyle Width="25%" />
	<ItemStyle Width="25%" />
	<ItemTemplate><asp:HyperLink ID="lblEmail" runat="server"></asp:HyperLink></ItemTemplate>
	</telerik:GridTemplateColumn>
	</Columns>
	</MasterTableView>
	<ClientSettings AllowColumnsReorder="False">
	<Resizing AllowColumnResize="true" EnableRealTimeResize="false" ResizeGridOnColumnResize="true" ClipCellContentOnResize="false" />
	<Scrolling AllowScroll="True" UseStaticHeaders="True"/>
	<Selecting AllowRowSelect="True" />
	</ClientSettings>
	</telerik:RadGrid>

Thanks in advance.

Antony

[Princy]

Hello Antony,

To restrict the horizontal bar from being rendered, you need to check that the width for the MasterTableView is set to 99% if auto-generated columns are used and that the total width of the declaratively set columns is smaller than the width of the grid itself.
Refer to the description section in the following online demo link which explains on the same.
Basic scrolling

Thanks
Princy.

[Antony]

Thanks for your answer.

However, what you said is fine and it works but when a column is resized by a user (made larger) the horizontal bar makes an appearance. Please see links below

Working with no scrollbar

Column resized by user, scrollbar present

[Antony]

Hello.

For anyone interested, I solved my problem...

Just to recap, the problem was I wanted to hide the horizontal scroll bar even if the column widths were larger than the table.

Solution: Some CSS...

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<style type="text/css">

#<%= RadGrid1.ClientID %>_GridData
{
    overflow-x:hidden !important;
}

</style>
</telerik:RadCodeBlock>

[Sebastian]

Hi Antony,

Thank you for sharing your solution in this public forum thread. Thus other community members can benefit from it as well. I updated your Telerik points for the involvement.

Kind regards,
Sebastian
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Ralf Markus]

Hello!

The CSS Solution is working for me. Is there a possibility to globally set this for all grids maybe webconfig instead of setting this on every page?

Thanks!

[allday]

Thanks Antony!

[Mario]

Thanks Anthony, you just saved me some good time

[Jon]

Thanks Antony, that bailed me out too.

Cheers,

Jon