This is a migrated thread and some comments may be shown as answers.
RadGrid horizontal scroll in IE7

8 Answers 265 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Karl asked on 25 Aug 2009, 09:05 AM
Hi,
I currently have a RadGrid with a number of columns with allow scroll set to true. A number of the columns are made up of filter templates. When I introduce the filter by date column I get a horizontal scroll in IE7. It does not appear in IE 6, 8 or Firefox. I can forward screen shots if required.
I thought it might be something to do with styling etc in our site, but I’ve put it in its own page and still does the same. Please see code below:-
    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="Disputes_test" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server">  
        
                <title>Untitled Page</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server">  
        
                    </asp:ScriptManager> 
        
                <div> 
        
                    &nbsp;<telerik:RadGrid ID="RadGridDisputes" runat="server" AllowFilteringByColumn="True" 
        
                        AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" DataSourceID="DisputesObjectData" 
        
                        GridLines="None" GroupingEnabled="False" OnItemCommand="RadGridDisputes_ItemCommand" 
        
                        PageSize="15">  
        
                        <ExportSettings FileName="Disputes">  
        
                        </ExportSettings> 
        
                        <MasterTableView AllowMultiColumnSorting="True" DataSourceID="DisputesObjectData" 
        
                            ShowGroupFooter="True">  
        
                            <Columns> 
        
                                <telerik:GridHyperLinkColumn DataNavigateUrlFields="Complaint_PK" DataNavigateUrlFormatString="Dispute.aspx?d={0}" 
        
                                    DataTextField="Complaint_PK" Groupable="False" HeaderText="Ref. No" SortExpression="Complaint_PK" 
        
                                    UniqueName="UCDisputeID">  
        
                                    <HeaderStyle HorizontalAlign="Left" Wrap="False" /> 
        
                                    <ItemStyle HorizontalAlign="Center" Width="100px" Wrap="False" /> 
        
                                </telerik:GridHyperLinkColumn> 
        
                                <telerik:GridBoundColumn AllowFiltering="False" AllowSorting="False" DataField="Complaint_PK" 
        
                                    Groupable="False" HeaderText="Ref. No" UniqueName="UCDisputeIDHidden" Visible="False">  
        
                                    <HeaderStyle Wrap="False" /> 
        
                                    <ItemStyle HorizontalAlign="Center" Wrap="False" /> 
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridBoundColumn AutoPostBackOnFilter="True" DataField="Company_Name" Groupable="False" 
        
                                    HeaderText="Company Name" SortExpression="Company_Name" UniqueName="column9">  
        
                                    <HeaderStyle Wrap="False" /> 
        
                                    <ItemStyle Wrap="False" /> 
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridDateTimeColumn AllowFiltering="False" AutoPostBackOnFilter="True" DataField="Received_Time" 
        
                                    DataFormatString="{0:HH:mm}" Groupable="False" HeaderText="Received Time" SortExpression="Received_Time" 
        
                                    UniqueName="column2">  
        
                                    <HeaderStyle Wrap="False" /> 
        
                                    <ItemStyle Wrap="False" /> 
        
                                </telerik:GridDateTimeColumn> 
        
                                <telerik:GridBoundColumn DataField="Received_Date" DataFormatString="{0:D}" HeaderText="Received_Date" 
        
                                    UniqueName="Received_Date">  
        
                                    <FilterTemplate> 
        
                                        From  
        
                                        <telerik:RadDatePicker ID="From_Received_Date_Picker" runat="server" ClientEvents-OnDateSelected="FromDateSelected_Received_Date" 
        
                                            DbSelectedDate='<%# startDateReceived_Date %>' Width="85px">  
        
                                        </telerik:RadDatePicker> 
        
                                        to  
        
                                        <telerik:RadDatePicker ID="To_Received_Date_Picker" runat="server" ClientEvents-OnDateSelected="ToDateSelected_Received_Date" 
        
                                            DbSelectedDate='<%# endDateReceived_Date %>' Width="85px">  
        
                                        </telerik:RadDatePicker> 
        
                                        <telerik:RadScriptBlock ID="RadScriptBlock6" runat="server">  
        
                                            <script type="text/javascript">  
        
                                                function FromDateSelected_Received_Date(sender,args) {  
        
                                                    var tableView=$find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");  
        
                                                    var ToPicker =$find('<%# ((GridItem)Container).FindControl("To_Received_Date_Picker").ClientID %>');  
        
                                                    var fromDateReceived_Date = FormatSelectedDateReceived_Date(sender);  
        
                                                    var toDateReceived_Date = FormatSelectedDateReceived_Date(ToPicker);  
        
                                                    tableView.filter("Received_Date", fromDateReceived_Date + " " + toDateReceived_Date, "Between");   
        
                                                }  
        
                                                function ToDateSelected_Received_Date(sender,args) {  
        
                                                    var tableView=$find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");  
        
                                                    var FromPicker =$find('<%# ((GridItem)Container).FindControl("From_Received_Date_Picker").ClientID %>');  
        
                                                    var fromDateReceived_Date = FormatSelectedDateReceived_Date(FromPicker);  
        
                                                    var toDateReceived_Date = FormatSelectedDateReceived_Date(sender);  
        
                                                    tableView.filter("Received_Date", fromDateReceived_Date + " " + toDateReceived_Date, "Between");   
        
                                                }  
        
                                                function FormatSelectedDateReceived_Date(picker)  
        
                                                {  
        
                                                    var date = picker.get_selectedDate();  
        
                                                    var dateInput = picker.get_dateInput();  
        
                                                    var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat());  
        
                                                    return formattedDate;  
        
                                                }  
        
                                            </script> 
        
                                        </telerik:RadScriptBlock> 
        
                                    </FilterTemplate> 
        
                                    <HeaderStyle Wrap="False" /> 
        
                                    <ItemStyle Wrap="False" /> 
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridBoundColumn DataField="Resolved_by_Date" DataFormatString="{0:D}" HeaderText="Resolved_by_Date" 
        
                                    UniqueName="Resolved_by_Date">  
        
                                    <FilterTemplate> 
        
                                        From  
        
                                        <telerik:RadDatePicker ID="From_Resolved_Date_Picker" runat="server" ClientEvents-OnDateSelected="FromDateSelected_Resolved_Date" 
        
                                            DbSelectedDate='<%# startDateResolved_Date %>' Width="85px">  
        
                                        </telerik:RadDatePicker> 
        
                                        to  
        
                                        <telerik:RadDatePicker ID="To_Resolved_Date_Picker" runat="server" ClientEvents-OnDateSelected="ToDateSelected_Resolved_Date" 
        
                                            DbSelectedDate='<%# endDateResolved_Date %>' Width="85px">  
        
                                        </telerik:RadDatePicker> 
        
                                        <telerik:RadScriptBlock ID="RadScriptBlock5" runat="server">  
        
                                            <script type="text/javascript">  
        
                                                function FromDateSelected_Resolved_Date(sender,args) {  
        
                                                    var tableView=$find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");  
        
                                                    var ToPicker =$find('<%# ((GridItem)Container).FindControl("To_Resolved_Date_Picker").ClientID %>');  
        
                                                    var fromDateResolved_by_Date = FormatSelectedDateResolved_by_Date(sender);  
        
                                                    var toDateResolved_by_Date = FormatSelectedDateResolved_by_Date(ToPicker);  
        
                                                    tableView.filter("Resolved_by_Date", fromDateResolved_by_Date + " " + toDateResolved_by_Date, "Between");   
        
                                                }  
        
                                                function ToDateSelected_Resolved_Date(sender,args) {  
        
                                                    var tableView=$find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");  
        
                                                    var FromPicker =$find('<%# ((GridItem)Container).FindControl("From_Resolved_Date_Picker").ClientID %>');  
        
                                                    var fromDate = FormatSelectedDateResolved_by_Date(FromPicker);  
        
                                                    var toDate = FormatSelectedDateResolved_by_Date(sender);  
        
                                                    tableView.filter("Resolved_by_Date", fromDateResolved_by_Date + " " + toDateResolved_by_Date, "Between");   
        
                                                }  
        
                                                function FormatSelectedDateResolved_by_Date(picker)  
        
                                                {  
        
                                                    var date = picker.get_selectedDate();  
        
                                                    var dateInput = picker.get_dateInput();  
        
                                                    var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat());  
        
                                                    return formattedDate;  
        
                                                }  
        
                                            </script> 
        
                                        </telerik:RadScriptBlock> 
        
                                    </FilterTemplate> 
        
                                    <HeaderStyle Wrap="False" /> 
        
                                    <ItemStyle Wrap="False" /> 
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridBoundColumn DataField="Incident_Date" DataFormatString="{0:D}" HeaderText="Incident_Date" 
        
                                    UniqueName="Incident_Date">  
        
                                    <FilterTemplate> 
        
                                        From  
        
                                        <telerik:RadDatePicker ID="From_Incident_Date_Picker" runat="server" ClientEvents-OnDateSelected="FromDateSelected" 
        
                                            DbSelectedDate='<%# startDateIncident_Date %>' Width="85px">  
        
                                        </telerik:RadDatePicker> 
        
                                        to  
        
                                        <telerik:RadDatePicker ID="To_Incident_Date_Picker" runat="server" ClientEvents-OnDateSelected="ToDateSelected" 
        
                                            DbSelectedDate='<%# endDateIncident_Date %>' Width="85px">  
        
                                        </telerik:RadDatePicker> 
        
                                        <telerik:RadScriptBlock ID="RadScriptBlock4" runat="server">  
        
                                            <script type="text/javascript">  
        
                                                function FromDateSelected(sender,args) {  
        
                                                    var tableView=$find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");  
        
                                                    var ToPicker =$find('<%# ((GridItem)Container).FindControl("To_Incident_Date_Picker").ClientID %>');  
        
                                                    var fromDate = FormatSelectedDateIncident_Date(sender);  
        
                                                    var toDate = FormatSelectedDateIncident_Date(ToPicker);  
        
                                                    tableView.filter("Rec_Create", fromDateIncident_Date + " " + toDateIncident_Date, "Between");   
        
                                                }  
        
                                                function ToDateSelected(sender,args) {  
        
                                                    var tableView=$find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");  
        
                                                    var FromPicker =$find('<%# ((GridItem)Container).FindControl("From_Incident_Date_Picker").ClientID %>');  
        
                                                    var fromDate = FormatSelectedDateIncident_Date(FromPicker);  
        
                                                    var toDate = FormatSelectedDateIncident_Date(sender);  
        
                                                    tableView.filter("Incident_Date", fromDateIncident_Date + " " + toDateIncident_Date, "Between");   
        
                                                }  
        
                                                function FormatSelectedDateIncident_Date(picker)  
        
                                                {  
        
                                                    var date = picker.get_selectedDate();  
        
                                                    var dateInput = picker.get_dateInput();  
        
                                                    var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat());  
        
                                                    return formattedDate;  
        
                                                }  
        
                                            </script> 
        
                                        </telerik:RadScriptBlock> 
        
                                    </FilterTemplate> 
        
                                    <HeaderStyle Wrap="False" /> 
        
                                    <ItemStyle Wrap="False" /> 
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridBoundColumn AutoPostBackOnFilter="True" DataField="Contact_No" Groupable="False" 
        
                                    HeaderText="Contact No" SortExpression="Contact_No" UniqueName="column6">  
        
                                    <HeaderStyle Wrap="False" /> 
        
                                    <ItemStyle Wrap="False" /> 
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridBoundColumn AutoPostBackOnFilter="True" DataField="Email" Groupable="False" 
        
                                    HeaderText="Email" SortExpression="Email" UniqueName="column7">  
        
                                    <HeaderStyle Wrap="False" /> 
        
                                    <ItemStyle Wrap="False" /> 
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridBoundColumn AutoPostBackOnFilter="True" DataField="FullName" Groupable="False" 
        
                                    HeaderText="Name" SortExpression="FullName" UniqueName="column8">  
        
                                    <HeaderStyle Wrap="False" /> 
        
                                    <ItemStyle Wrap="False" /> 
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridBoundColumn AutoPostBackOnFilter="True" DataField="Account_Number" Groupable="False" 
        
                                    HeaderText="Acc. No." SortExpression="Account_Number" UniqueName="column10">  
        
                                    <HeaderStyle Wrap="False" /> 
        
                                    <ItemStyle Wrap="False" /> 
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridBoundColumn AutoPostBackOnFilter="True" DataField="Post_Code" Groupable="False" 
        
                                    HeaderText="Post Code" SortExpression="Post_Code" UniqueName="column11">  
        
                                    <HeaderStyle Wrap="False" /> 
        
                                    <ItemStyle Wrap="False" /> 
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridBoundColumn DataField="Category" HeaderText="Category" UniqueName="Category">  
        
                                    <FilterTemplate> 
        
                                        <telerik:RadComboBox ID="RadComboBoxCategory" runat="server" AppendDataBoundItems="true" 
        
                                            DataSourceID="DDLCategoryData" DataTextField="Description" DataValueField="Description" 
        
                                            Height="100px" OnClientSelectedIndexChanged="CategoryIndexChanged" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("Category").CurrentFilterValue %>'>  
        
                                            <Items> 
        
                                                <telerik:RadComboBoxItem Text="All" /> 
        
                                            </Items> 
        
                                        </telerik:RadComboBox> 
        
                                        <telerik:RadScriptBlock ID="RadScriptBlock7" runat="server">  
        
                                            <script type="text/javascript">  
        
                                                function CategoryIndexChanged(sender,args) {  
        
                                                    var tableView=$find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");  
        
                                                    tableView.filter("Category",args.get_item().get_value(),"EqualTo");  
        
                                                }  
        
                                            </script> 
        
                                        </telerik:RadScriptBlock> 
        
                                    </FilterTemplate> 
        
                                    <HeaderStyle Wrap="False" /> 
        
                                    <ItemStyle Wrap="False" /> 
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridBoundColumn DataField="Sub_Category" HeaderText="Sub_Category" UniqueName="Sub_Category">  
        
                                    <FilterTemplate> 
        
                                        <telerik:RadComboBox ID="RadComboBoxSub_Category" runat="server" AppendDataBoundItems="true" 
        
                                            DataSourceID="DDLSub_CategoryData" DataTextField="Description" DataValueField="Description" 
        
                                            Height="100px" OnClientSelectedIndexChanged="Sub_CategoryIndexChanged" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("Sub_Category").CurrentFilterValue %>'>  
        
                                            <Items> 
        
                                                <telerik:RadComboBoxItem Text="All" /> 
        
                                            </Items> 
        
                                        </telerik:RadComboBox> 
        
                                        <telerik:RadScriptBlock ID="RadScriptBlock8" runat="server">  
        
                                            <script type="text/javascript">  
        
                                                function Sub_CategoryIndexChanged(sender,args) {  
        
                                                    var tableView=$find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");  
        
                                                    tableView.filter("Sub_Category",args.get_item().get_value(),"EqualTo");  
        
                                                }  
        
                                            </script> 
        
                                        </telerik:RadScriptBlock> 
        
                                    </FilterTemplate> 
        
                                    <HeaderStyle Wrap="False" /> 
        
                                    <ItemStyle Wrap="False" /> 
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridBoundColumn AutoPostBackOnFilter="True" DataField="Route" Groupable="False" 
        
                                    HeaderText="Route" SortExpression="Route" UniqueName="column14">  
        
                                    <HeaderStyle Wrap="False" /> 
        
                                    <ItemStyle Wrap="False" /> 
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridBoundColumn AutoPostBackOnFilter="True" DataField="Feedback_Type" Groupable="False" 
        
                                    HeaderText="Feedback Type" SortExpression="Feedback_Type" UniqueName="column15">  
        
                                    <HeaderStyle Wrap="False" /> 
        
                                    <ItemStyle Wrap="False" /> 
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridBoundColumn AutoPostBackOnFilter="True" DataField="Action_Status" Groupable="False" 
        
                                    HeaderText="Action Status" SortExpression="Action_Status" UniqueName="column16">  
        
                                    <HeaderStyle Wrap="False" /> 
        
                                    <ItemStyle Wrap="False" /> 
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridBoundColumn AutoPostBackOnFilter="True" DataField="AssignedUser" Groupable="False" 
        
                                    HeaderText="Assigned User" SortExpression="AssignedUser" UniqueName="column18">  
        
                                    <HeaderStyle Wrap="False" /> 
        
                                    <ItemStyle Wrap="False" /> 
        
                                </telerik:GridBoundColumn> 
        
                            </Columns> 
        
                        </MasterTableView> 
        
                        <ClientSettings AllowAutoScrollOnDragDrop="False" AllowColumnHide="True" AllowColumnsReorder="True" 
        
                            AllowExpandCollapse="False" AllowGroupExpandCollapse="False" ColumnsReorderMethod="Reorder">  
        
                            <Selecting AllowRowSelect="True" EnableDragToSelectRows="False" /> 
        
                            <Scrolling AllowScroll="True" FrozenColumnsCount="2" UseStaticHeaders="True" /> 
        
                        </ClientSettings> 
        
                    </telerik:RadGrid> 
        
                    <asp:ObjectDataSource ID="DDLSub_CategoryData" runat="server" SelectMethod="DDLSubCategoriesGrid" 
        
                        TypeName="Disputes.DataAccess.Layer.SQL_DropDownLists"></asp:ObjectDataSource> 
        
                    <asp:ObjectDataSource ID="DisputesObjectData" runat="server" SelectMethod="Get_All_Disputes" 
        
                        TypeName="Disputes.DataAccess.Layer.SQL_Create">  
        
                        <SelectParameters> 
        
                            <asp:SessionParameter Name="strUserID" SessionField="strUserID" Type="String" /> 
        
                        </SelectParameters> 
        
                    </asp:ObjectDataSource> 
        
                    <asp:ObjectDataSource ID="DDLCategoryData" runat="server" SelectMethod="DDLCategories" 
        
                        TypeName="Disputes.DataAccess.Layer.SQL_DropDownLists"></asp:ObjectDataSource> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>
Thanks
8 Answers, 1 is accepted

answered on 28 Aug 2009, 06:45 AM
Hello Karl,

This is an IE 7 bug and it actually originates from RadComboBox. RadComboBox has a position:relative style. When an element with relative position is put in a scrollable container, IE oddly keeps the element in a constant position when the container is scrolled. Hence the scollbar that comes from the HTML element becoming scrollable.

The workaround: Set style="overflow:hidden; position:relative" in <telerik:RadGrid>

Best wishes,
Veli
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
answered on 02 Nov 2009, 11:53 PM
Telerik: 2009.2.1028.35

Veli,
I have a related but slightly different problem. I am not using the combo box in this particular user control but I am using the RadGrid.

I have my scrollbars turned off in the grid, howwver my data does not wrap to the next line. It overflows outside the grid. I have a templated column in my grid, with a <asp:label> and a <asp:hyperlink> tag in it.

If I use style="overflow:hidden; position:relative", my overflow data gets hidden but still would not wrap to the next line. However if I turn the scrollbars on, then my grid does not overflow and stays within bounds.

What could I be doing wrong?
answered on 10 Nov 2010, 07:46 AM
Hello, i have a problem with horizontal scroll in IE7.

In a tag <tr> of a <table>, i have2 <td> tags, i put in the first <td> tag a radgrid, and in the second one a radchart.

the table width is 850px, so i set 1st and 2nd td tag is 600px and 250px respectively.

The problem here is in IE7 or lower versions of IE (in FF it was OK), the radgrid had the total columns width (maybe 1500px) > 850px so it had horizontal scroll. In FF, the radchart is right after the radgrid but in IE, the chart is far away from the grid. The <td> which contained the radgrid had the width equal to the grid's total columns width.

Please give me some hint
Thanks

Minh
Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadGrid horizontal scroll in IE7

8 Answers, 1 is accepted
