This is a migrated thread and some comments may be shown as answers.

Display horizontal scroll only

7 Answers 871 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ruth Dahan
Top achievements
Rank 1
Ruth Dahan asked on 17 Mar 2009, 07:42 PM
Hi,
I would like to display horizontal scroll bar only without the vertical one.
i am using paging so i need the grid to grow as the pagesize property of the grid.

how can i do that?
Thanks,
Ruth.

7 Answers, 1 is accepted

Sort by
0
Accepted
Shinu
Top achievements
Rank 2
answered on 18 Mar 2009, 03:42 AM
Hi Ruth,

To render merely the horizontal scroll and avoid the appearance of the vertical scroll, make sure that the height of the records in the grid does not exceed the ClientSettings -> Scrolling -> ScrollHeight scroll setting.
Grid / Scrolling

Shinu



0
Ruth Dahan
Top achievements
Rank 1
answered on 18 Mar 2009, 06:26 AM
Thanks for your reply shinu.
I set the ScrollHeight property and i also has the AllowPaging property set to true,
the vertical scroll bar always appear, and each row height is increased even though there is no need for that.

What can i do to make it disappear?

Thanks,
Ruth.
0
Shinu
Top achievements
Rank 2
answered on 18 Mar 2009, 11:58 AM
Hi Ruth,

I would suggest you to send your aspx code.

Shinu
0
Ruth Dahan
Top achievements
Rank 1
answered on 18 Mar 2009, 12:03 PM
sure, thanks!

<telerik:RadGrid ID="usersGrid" runat="server" AllowAutomaticDeletes="True" AllowAutomaticInserts="True" 
                                        AllowAutomaticUpdates="true" AllowSorting="True" DataSourceID="UsersDataSource" 
                                        OnItemCreated="RadGrid1_ItemCreated" ShowGroupPanel="True" Skin="NICE" EnableEmbeddedSkins="false" 
                                        AllowPaging="True" PageSize="10" AllowFilteringByColumn="true" OnItemUpdated="usersGrid_ItemUpdated" 
                                        OnItemInserted="usersGrid_ItemInserted" Width="925"  > 
                                        <PagerStyle NextPageText="Next" PrevPageText="Prev" Mode="NextPrevAndNumeric" /> 
                                        <HeaderContextMenu EnableTheming="True">  
                                            <CollapseAnimation Duration="200" Type="OutQuint"></CollapseAnimation> 
                                        </HeaderContextMenu> 
                                        <HeaderStyle Wrap="false" /> 
                                        <ClientSettings AllowDragToGroup="True">  
                                            <Selecting AllowRowSelect="True" /> 
                                            <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="900"  /> 
                                            <ClientEvents OnRowSelected="UserRowSelected" OnPopUpShowing="SetRoleVisibility"  /> 
                                            <Resizing AllowColumnResize="true" ResizeGridOnColumnResize="false" /> 
                                        </ClientSettings> 
                                        <MasterTableView TableLayout="fixed" AutoGenerateColumns="False" ClientDataKeyNames="UserID" 
                                            CommandItemDisplay="Top" DataKeyNames="UserID" DataSourceID="UsersDataSource" 
                                            EditMode="PopUp" Width="100%" Height="99%">  
                                            <RowIndicatorColumn Groupable="True">  
                                                <HeaderStyle Width="10px"></HeaderStyle> 
                                            </RowIndicatorColumn> 
                                            <ExpandCollapseColumn Groupable="True">  
                                                <HeaderStyle Width="20px"></HeaderStyle> 
                                            </ExpandCollapseColumn> 
                                            <Columns> 
                                                <telerik:GridBoundColumn DataField="UserID" DataType="System.Int32" Display="False" 
                                                    HeaderText="User ID" ReadOnly="True" SortExpression="UserID" UniqueName="UserID">  
                                                </telerik:GridBoundColumn> 
                                                <telerik:GridBoundColumn DataField="FormattedName" HeaderText="User Name" SortExpression="FormattedName" 
                                                    UniqueName="FormattedName">                                                   
                                                </telerik:GridBoundColumn> 
                                                <telerik:GridTemplateColumn DataField="Role" HeaderText="User Type" SortExpression="Role" 
                                                    UniqueName="Role" GroupByExpression="Role GROUP BY Role">  
                                                    <ItemTemplate> 
                                                        <asp:Image ID="RoleImage" runat="server" ImageUrl='<%# "~/Common/Base/imgs/"+ GetRoleImage(Convert.ToInt32(Eval("Role"))) +".gif"%>' /> 
                                                        <asp:Label ID="RoleLiteral" runat="server" Text='<%# GetRoleText(Convert.ToInt32(Eval("Role"))) %>'></asp:Label> 
                                                    </ItemTemplate>                                                     
                                                </telerik:GridTemplateColumn> 
                                                <telerik:GridTemplateColumn DataField="IsRecorded" HeaderText="Recorded" SortExpression="IsRecorded" 
                                                    UniqueName="IsRecorded">  
                                                    <ItemTemplate> 
                                                        <asp:Image ID="IsRecordedImage" runat="server" ImageUrl='<%# "~/Common/Base/imgs/"+ ((Convert.ToBoolean(Eval("IsRecorded")))? "grid_recording_icon" : "not_recording_icon") + ".gif"%>' /> 
                                                    </ItemTemplate>                                                 
                                                </telerik:GridTemplateColumn> 
                                                <telerik:GridBoundColumn DataField="Extension" HeaderText="Extension" SortExpression="Extension" 
                                                    UniqueName="Extension">                                                     
                                                </telerik:GridBoundColumn> 
                                                <telerik:GridBoundColumn DataField="AgentId" HeaderText="Agent Id" SortExpression="AgentId" 
                                                    UniqueName="AgentId">                                                     
                                                </telerik:GridBoundColumn> 
                                                <telerik:GridTemplateColumn DataField="IsSystemUser" HeaderText="Defined As User" 
                                                    SortExpression="IsSystemUser" UniqueName="IsSystemUser">  
                                                    <ItemTemplate> 
                                                        <asp:Image ID="IsSystemUserImage" runat="server" ImageUrl='<%# "~/Common/Base/imgs/"+ ((Convert.ToBoolean(Eval("IsSystemUser")))? "grid_user_icon" : "grid_non_user_icon") + ".gif"%>' /> 
                                                        <asp:Label ID="IsSystemUserLabel" runat="server" Text='<%# (Convert.ToBoolean(Eval("IsSystemUser")))? (String)GetLocalResourceObject("RESX_Yes"): (String)GetLocalResourceObject("RESX_No")%>' /> 
                                                    </ItemTemplate>                                                    
                                                </telerik:GridTemplateColumn> 
                                                <telerik:GridBoundColumn DataField="LoginName" HeaderText="Login Name" SortExpression="LoginName" 
                                                    UniqueName="LoginName">                                                       
                                                </telerik:GridBoundColumn> 
                                                <telerik:GridBoundColumn DataField="OSLogin" HeaderText="OS Login" SortExpression="OSLogin" 
                                                    UniqueName="OSLogin">                                                   
                                                </telerik:GridBoundColumn> 
                                                <telerik:GridBoundColumn DataField="Email" HeaderText="Email" SortExpression="Email" 
                                                    UniqueName="Email">                                                      
                                                </telerik:GridBoundColumn> 
                                                <telerik:GridDropDownColumn DataField="GroupID" DataSourceID="GroupsDataSource" DropDownControlType="DropDownList" 
                                                    HeaderText="Group Name" ListTextField="Name" ListValueField="ID" SortExpression="GroupID" 
                                                    UniqueName="GroupID" GroupByExpression="Name GROUP BY Name">                                                      
                                                </telerik:GridDropDownColumn> 
                                                <telerik:GridTemplateColumn DataField="UserStatus" HeaderText="User Status" SortExpression="UserStatus" 
                                                    UniqueName="TemplateColumn">  
                                                    <ItemTemplate> 
                                                        <asp:Image ID="Image1" runat="server" ImageUrl='<%# "~/Common/Base/imgs/grid_user_"+ Enum.GetName(typeof(NiceApplications.NPE.PerformAdminWrapper.UserAdmin.Status),Eval("UserStatus")) + "_icon.gif"%>' /> 
                                                        <asp:Label ID="StatusLiteral" runat="server" Text='<%# (String)GetLocalResourceObject("RESX_"+Enum.GetName(typeof(NiceApplications.NPE.PerformAdminWrapper.UserAdmin.Status),Eval("UserStatus"))) %>'></asp:Label> 
                                                    </ItemTemplate>                                                      
                                                </telerik:GridTemplateColumn> 
                                            </Columns> 
                                            <GroupByExpressions> 
                                                <telerik:GridGroupByExpression> 
                                                    <SelectFields> 
                                                        <telerik:GridGroupByField FieldAlias="Group" FieldName="GroupID" /> 
                                                    </SelectFields> 
                                                    <GroupByFields> 
                                                        <telerik:GridGroupByField FieldAlias="Group" FieldName="GroupID"></telerik:GridGroupByField> 
                                                    </GroupByFields> 
                                                </telerik:GridGroupByExpression> 
                                            </GroupByExpressions> 
                                            <GroupHeaderItemStyle HorizontalAlign="Left" /> 
                                            <EditFormSettings EditFormType="Template"  CaptionFormatString="Add New User">  
                                                <FormStyle BackColor="Transparent" /> 
                                                <FormTemplate> 
                                                     
                                                </FormTemplate> 
                                            </EditFormSettings> 
                                            <CommandItemTemplate> 
                                                <div> 
                                                    <asp:Button ID="EditBTN" runat="server" Text="Edit" AlternateText="Edit" CssClass="editBtn" 
                                                        CommandName="EditSelected" title="Edit"></asp:Button> 
                                                    <asp:Button ID="AddBTN" runat="server" Text="Add" AlternateText="Add" CssClass="addBtn" 
                                                        CommandName="InitInsert" title="Add" OnClientClick="AddUserClicked()"></asp:Button> 
                                                    <asp:Button ID="DeleteBTN" runat="server" Text="Delete" AlternateText="Delete" CssClass="deleteBtn" 
                                                        CommandName="DeleteSelected" title="Delete"></asp:Button> 
                                                </div> 
                                            </CommandItemTemplate> 
                                            <CommandItemStyle HorizontalAlign="Right" /> 
                                        </MasterTableView> 
                                        <FilterMenu EnableTheming="True">  
                                            <CollapseAnimation Duration="200" Type="OutQuint"></CollapseAnimation> 
                                        </FilterMenu> 
                                    </telerik:RadGrid> 
0
Accepted
Princy
Top achievements
Rank 2
answered on 18 Mar 2009, 12:37 PM
Hello Ruth,

 If you do not want vertical scrollbar you can override the GridDataDiv_SkinName css class as shown below:

<style type="text/css"
    .GridDataDiv_Default 
    { 
        overflow-yhidden !important; 
    } 
</style> 

Thanks
Princy.
0
Ruth Dahan
Top achievements
Rank 1
answered on 23 Mar 2009, 06:34 AM
Thanks for all your help Princy & Shinu,
i managed to add horizontal scroll bar thanks to your help.
the rows height was increased since the set the MasterTableView hieght property to 100%


0
Sphengle
Top achievements
Rank 1
answered on 24 Sep 2009, 04:20 PM
I coudn't get any of the suggested solutions to work so I turned off scrollbars in the <ClientSettings> tag and wrapped the whole RadGrid in a div like this....

<

 

div style="overflow-x:auto;overflow-y:hidden;width:100%;padding: 0 0 20px 0">
    RadGrid here....
</div>



 

Tags
Grid
Asked by
Ruth Dahan
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Ruth Dahan
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Sphengle
Top achievements
Rank 1
Share this question
or