Display horizontal scroll only

8 posts, 2 answers
  1. Ruth Dahan
    Ruth Dahan avatar
    27 posts
    Member since:
    Feb 2009

    Posted 17 Mar 2009 Link to this post

    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.
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 17 Mar 2009 Link to this post

    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



  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ruth Dahan
    Ruth Dahan avatar
    27 posts
    Member since:
    Feb 2009

    Posted 18 Mar 2009 Link to this post

    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.
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 18 Mar 2009 Link to this post

    Hi Ruth,

    I would suggest you to send your aspx code.

    Shinu
  6. Ruth Dahan
    Ruth Dahan avatar
    27 posts
    Member since:
    Feb 2009

    Posted 18 Mar 2009 Link to this post

    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> 
  7. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 18 Mar 2009 Link to this post

    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.
  8. Ruth Dahan
    Ruth Dahan avatar
    27 posts
    Member since:
    Feb 2009

    Posted 23 Mar 2009 Link to this post

    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%


  9. Sphengle
    Sphengle avatar
    29 posts
    Member since:
    Sep 2007

    Posted 24 Sep 2009 Link to this post

    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>



     

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017