This is a migrated thread and some comments may be shown as answers.
Resize columns, hide horizontal scroll bar
8 Answers 193 Views
This is a migrated thread and some comments may be shown as answers.
Antony
Top achievements
Rank 1
Antony asked on 12 Jan 2009, 10:42 AM
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

8 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 12 Jan 2009, 10:58 AM
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.
0
Antony
Top achievements
Rank 1
answered on 12 Jan 2009, 03:02 PM
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

0
Antony
Top achievements
Rank 1
answered on 15 Jan 2009, 10:36 AM
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> 

0
Sebastian
Telerik team
answered on 15 Jan 2009, 10:58 AM
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.
0
Ralf Markus
Top achievements
Rank 1
answered on 08 Apr 2009, 07:49 AM
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!
0
allday
Top achievements
Rank 1
answered on 13 Jul 2009, 02:17 PM
Thanks Antony!
0
Mario
Top achievements
Rank 1
answered on 15 Oct 2009, 04:52 PM
Thanks Anthony, you just saved me some good time
0
Jon
Top achievements
Rank 1
answered on 20 Oct 2009, 08:56 AM
Thanks Antony, that bailed me out too.

Cheers,

Jon
Tags
Grid
Asked by
Antony
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Antony
Top achievements
Rank 1
Sebastian
Telerik team
Ralf Markus
Top achievements
Rank 1
allday
Top achievements
Rank 1
Mario
Top achievements
Rank 1
Jon
Top achievements
Rank 1
Share this question
or