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

Removing Horizontal Scrollbar from RadGrid

1 Answer 865 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 15 Feb 2013, 06:33 PM
Hello, 
    I tried searching the forums but I did not find quite what I am looking for.  I would like to remove the horizontal scrollbar from the RadGrid control while still leaving it scrollable.  I am handling the scrolling with the RadSlider control.  What I am trying to do is have a dynamically built grid - no idea how many columns or rows it will have - with a footer, but with the horizontal scrollbar below it all.  We don't want the horizontal scrollbar between the grid data and the footer since the visual presentation is ...off. The ASPX page looks like

<asp:Content ID="Content2" ContentPlaceHolderID="BodyContent" runat="server">
    <script type="text/javascript">
 
        $(document).ready(function () {
 
            $('#divLoading').hide();
 
            $('.monthHeaderRow').click(function () {
                var next;
 
                next = $(this).next();
 
                while (next.hasClass('monthDataRow')) {
                    next.toggle();
                    next = next.next();
                }
            });
 
            $('#divLoading').center();
             
        });
 
        function pageLoad(sender, args) {
            $find("<%= RadSlider1.ClientID %>").set_maximumValue($find("<%= grdTrackingReport.ClientID %>")._gridDataDiv.scrollWidth);
  
        function valueChange(sender, args) {
            var gridDataDiv = $find("<%= grdTrackingReport.ClientID %>")._gridDataDiv;
            if (sender.get_id() == "<%= RadSlider1.ClientID %>") {
                gridDataDiv.scrollLeft = sender.get_value();
            }
            else {
                gridDataDiv.scrollTop = sender.get_value();
            }
        }
    </script>
 
    <telerik:RadGrid ID="grdTrackingReport" runat="server" CssClass="Grid" OnItemDataBound="grdTrackingReport_ItemDataBound">
        <MasterTableView TableLayout="Fixed"></MasterTableView>
        <AlternatingItemStyle BackColor="#e8f2fd"></AlternatingItemStyle>
 
        <ClientSettings>
            <Selecting AllowRowSelect="true"></Selecting>
            <Scrolling AllowScroll="true" UseStaticHeaders="true" />
        </ClientSettings>
    </telerik:RadGrid>
    <center>
       <telerik:RadSlider ID="RadSlider1" runat="server" OnClientValueChange="valueChange" Length="600" />
     </center>
 
</asp:Content>

with a CSS entry of:
.Grid div
        {
            overflow: hidden !important;
        }


Is this possible?  If so, what am I missing?

Thanks,
Mark

1 Answer, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 18 Feb 2013, 05:30 AM
Hi,

Please try the following CSS to hide the Horizontal scrollbar.

CSS:
<style type="text/css">
   .rgDataDiv
   {
        overflow-x: hidden !important;
   }
</style>

Thanks,
Shinu.
Tags
Grid
Asked by
Mark
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Share this question
or