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

Can't Scroll over in Grid with IE 9

6 Answers 73 Views

Grid

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

Web Services asked on 15 Nov 2011, 08:02 PM

I have a grid you can see here http://michael.sprayapplications.com/Default.aspx?ReturnUrl=Completed.aspx username tempuser pass t3mpus3r. You can't scroll all the way over in IE 9 within the grid. Just go there and try to scroll horizontally and you'll see what I mean. Any ideas on how to fix this? here is my master page and aspx page.

<%@ Master Language="VB" CodeFile="Main.master.vb" Inherits="Main" %>

<%@ 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>

<head runat="server">

<title></title>

<asp:ContentPlaceHolder ID="head" runat="server">

</asp:ContentPlaceHolder>

<link rel="Stylesheet" type="text/css" href="Main.css" />

<!-- this one is for the https

<script src=

"http://maps.google.com/maps?file=api&;v=2&sensor=false&key=ABQIAAAANvmC5YwARPSDAHoiTGyjXRT5CqG25LA8QqhhYYzIgkFQElYr7hSCxiO74tqOZugjk43atJVaiecSJQ"

type="text/javascript"></script>

-->

<script type="text/javascript">

function callBackWindow(url) {

window.open(url, 'OpenWindow', 'width=750,height=600,left=100,top=50,scrollbars=yes');

return false;

} //callBack

function printTrailerCheck(id) {

var previewWnd = window.open("https://jobs.sprayapplications.com/Jobs/TrailerCheckList.aspx?jid=" + id, 'OpenWindow', 'width=750,height=600,left=100,top=50,scrollbars=yes');

previewWnd.print();

} //callBack

function printToolCheck(id) {

var previewWnd = window.open("https://jobs.sprayapplications.com/Jobs/ToolBoxTalk.aspx?jid=" + id, 'OpenWindow', 'width=750,height=600,left=100,top=50,scrollbars=yes');

previewWnd.print();

} //callBack

function toggle(divid, hrefid) {

//alert(divid + " " + hrefid);

var ele = document.getElementById(divid);

var text = document.getElementById(hrefid);

if (ele.style.display == "block") {

ele.style.display = "none";

text.innerHTML = "Show Text";

}

else {

ele.style.display = "block";

text.innerHTML = "Hide";

}

} //toggle

</script>

</head>

<body id="MasterBody" runat="server" style="margin: 0px; height: 100%; overflow: hidden;">

<form id="form1" runat="server">

<div id="header">

<a href="~/admin/Default.aspx" runat="server">

<img src="~/images/logo.jpg" style="border: none;" runat="server" /></a>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<div style="float: right; margin-left: 10px; position: absolute; right: 80px; top: 10px;">

<asp:Label ID="weekTimeOutput" runat="server"></asp:Label>

</div>

<div style="float: right; right: 20px; top: 10px; position: absolute;">

<asp:LoginStatus runat="server"></asp:LoginStatus>

</div>

<div id="Main">

<telerik:RadToolTip runat="server" ID="messageOut" Height="500px" Width="500px" Position="Center"

RelativeTo="BrowserWindow" ContentScrolling="Y">

</telerik:RadToolTip>

<telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" Width="100%"

LiveResize="true" Height="520px">

<telerik:RadPane ID="LeftRadPane1" runat="server" Width="220px" Scrolling="None"

BorderStyle="None" BorderSize="0">

<telerik:RadSplitter ID="radsplitter2" runat="server" Orientation="Horizontal" LiveResize="true">

<telerik:RadPane ID="RadPane2" runat="server" Width="220px" Scrolling="None" BorderStyle="None"

bordersize="0">

<telerik:RadPanelBar runat="server" ID="RadPanelBar1" ExpandMode="FullExpandedItem"

Height="100%" Width="220px">

<Items>

<telerik:RadPanelItem Text="Customers" Expanded="True">

<Items>

<telerik:RadPanelItem Text="Add Customer" NavigateUrl="~/Customers/AddCustomer.aspx" />

<telerik:RadPanelItem Text="Customer List" NavigateUrl="~/Customers/CustomerList.aspx" />

<telerik:RadPanelItem Text="System Wide Search" NavigateUrl="~/Customers/Search.aspx" />

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Leads">

<Items>

<telerik:RadPanelItem Text="Create Lead" NavigateUrl="~/Leads/CreateLead.aspx" />

<telerik:RadPanelItem Text="Lead List" NavigateUrl="~/Leads/LeadList.aspx" />

<telerik:RadPanelItem Text="Map" NavigateUrl="~/Map.aspx" />

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Sales">

<Items>

<telerik:RadPanelItem Text="Sales List" NavigateUrl="~/Sales/SalesList.aspx" />

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Bids">

<Items>

<telerik:RadPanelItem Text="Bid List" NavigateUrl="~/Bids/BidList.aspx" />

<telerik:RadPanelItem Text="Bids Lost" NavigateUrl="~/Bids/BidListLost.aspx" />

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Jobs">

<Items>

<telerik:RadPanelItem Text="Jobs List" NavigateUrl="~/Jobs/JobsList.aspx" />

<telerik:RadPanelItem Text="Jobs Started" NavigateUrl="~/Started/StartedList.aspx" />

<telerik:RadPanelItem Text="Jobs Completed" NavigateUrl="~/Jobs/Completed.aspx" />

<telerik:RadPanelItem Text="Fixes" NavigateUrl="~/Fixes/FixList.aspx" />

<telerik:RadPanelItem Text="Completed Fixes" NavigateUrl="~/Jobs/CompletedFixes.aspx" />

<telerik:RadPanelItem Text="Map" NavigateUrl="~/JobMap.aspx" />

<telerik:RadPanelItem Text="Default Crew Members" NavigateUrl="~/jobs/DefaultCrew.aspx" />

<telerik:RadPanelItem Text="Warranty Totals" NavigateUrl="~/Jobs/Warranty.aspx" />

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Messaging">

<Items>

<telerik:RadPanelItem Text="Compose Message" NavigateUrl="~/Messaging/SendMessage.aspx" />

<telerik:RadPanelItem Text="View Messages" NavigateUrl="~/Messaging/ViewMessages.aspx" />

<telerik:RadPanelItem Text="Daily Notes" NavigateUrl="~/Messaging/DailyNotes.aspx" />

<telerik:RadPanelItem Text="Daily Notes Log" NavigateUrl="~/Messaging/NotesLog.aspx" />

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Administration" Visible="false">

<Items>

<telerik:RadPanelItem Text="Add Employees" NavigateUrl="~/admin/AddEmployees.aspx" />

<telerik:RadPanelItem Text="Delete Employees" NavigateUrl="~/admin/DeleteEmployees.aspx" />

<telerik:RadPanelItem Text="Commission" NavigateUrl="~/admin/Commission.aspx" />

<telerik:RadPanelItem Text="Crew Leader Profits" NavigateUrl="~/admin/CrewLeaderProfit.aspx" />

<telerik:RadPanelItem Text="Estimates/Actuals" NavigateUrl="~/admin/EstimatesActuals.aspx" />

<telerik:RadPanelItem Text="Actuals" NavigateUrl="~/admin/ActualsList.aspx" />

<telerik:RadPanelItem Text="K & L" NavigateUrl="~/admin/KandL.aspx" />

<telerik:RadPanelItem Text="Variables" NavigateUrl="~/admin/Variables.aspx" />

<telerik:RadPanelItem Text="Inventory" NavigateUrl="~/admin/Inventory.aspx" />

<telerik:RadPanelItem Text="Safety Topics" NavigateUrl="~/admin/SafetyTopicPrint.aspx" />

<telerik:RadPanelItem Text="Crew Ratings" NavigateUrl="~/admin/CrewRatings.aspx" />

<telerik:RadPanelItem Text="Weekly Start Time" NavigateUrl="~/admin/StartTime.aspx" />

<telerik:RadPanelItem Text="Reference List" NavigateUrl="~/admin/ReferenceList.aspx" />

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Products">

<Items>

<telerik:RadPanelItem Text="Add Products" NavigateUrl="~/admin/AddProducts.aspx" />

<telerik:RadPanelItem Text="Edit Products" NavigateUrl="~/admin/EditProducts.aspx" />

<telerik:RadPanelItem Text="Delete Products" NavigateUrl="~/admin/DeleteProducts.aspx" /> </Items>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

<telerik:RadSplitBar runat="server" ID="RadSplitBar2" CollapseMode="Forward" EnableResize="true"

ForeColor='Green' />

<telerik:RadPane ID="RightRadPane1" runat="server" CssClass="RightPanelPadding" Scrolling="Both"

BorderStyle="None" BorderSize="0">

<div style="margin-left: 10px;">

<telerik:radtooltip runat="server" id="callBack" height="400px" width="600px" position="Center"

relativeto="BrowserWindow" ManualClose="true" ContentScrolling="Auto">

</telerik:radtooltip><asp:ContentPlaceHolder ID="mainContentPlaceHolder" runat="server">

</asp:ContentPlaceHolder></div>

</telerik:RadPane>

</telerik:RadSplitter>

</div>

</form>

</body>

</html>

Aspx page

<td>

<asp:Button ID="updateDate" Text="Show" runat="server" />

</td>

<td> <telerik:RadTextBox ID="searchInput" runat="server">

</telerik:RadTextBox>

<asp:Button ID="searchGrid" runat="server" Text="Search" />

<asp:Button ID="Reset" runat="server" Text="reset" />

<br /></td>

</tr>

</table>

<telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" AllowPaging="True"

AllowSorting="True" AutoGenerateColumns="false" PageSize="50" Height="410px">

<MasterTableView DataKeyNames="LeadId" AutoGenerateColumns="false">

<RowIndicatorColumn>

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn>

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn DataField="Edit" HeaderText="<span style='visibility: hidden;'>a</span>" SortExpression="Edit"

UniqueName="Edit" HeaderStyle-Width="40px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Branch" HeaderText="Branch" SortExpression="Branch"

UniqueName="Branch">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="labor" HeaderText="Labor" SortExpression="Labor"

UniqueName="Labor" HeaderStyle-Width="100px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CrewChief" HeaderText="Crew Chief" SortExpression="Crew Chief"

UniqueName="Crew Chief">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Fix" HeaderText="Fixes" SortExpression="Fix"

UniqueName="Fix">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Trailer" HeaderText="Check List" SortExpression="Trailer"

UniqueName="Trailer">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Tool" HeaderText="Toolbox CheckList" SortExpression="Tool"

UniqueName="Tool">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="TypeRoof" HeaderText="Roof Type" SortExpression="TypeRoof"

UniqueName="TypeRoof">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="SqFeet" HeaderText="SqFeet" SortExpression="SqFeet"

UniqueName="Sqfeet" DataFormatString="{0:###,###,###,###.##}">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Coatings" HeaderText="Coatings" SortExpression="Coatings"

UniqueName="Coatings">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="fullName" HeaderText="Customer" SortExpression="fullName"

UniqueName="fullName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="business" HeaderText="Business Name" SortExpression="business"

UniqueName="business">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ContactPhone" HeaderText="Contact Phone" SortExpression="ContactPhone"

UniqueName="ContactPhone">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CellPhone" HeaderText="Cell Phone" SortExpression="CellPhone"

UniqueName="CellPhone">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Phone" HeaderText="Office Phone" SortExpression="Phone"

UniqueName="Phone">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="JobAddress" HeaderText="Job Address" SortExpression="JobAddress"

UniqueName="JobAddress">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="JobCity" HeaderText="Job City" SortExpression="JobCity"

UniqueName="JobCity">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="JobState" HeaderText="Job State" SortExpression="JobState"

UniqueName="JobState">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="JobZip" HeaderText="Job Zip" SortExpression="JobZip"

UniqueName="JobZip">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="LocationofJob" HeaderText="Name of Building" SortExpression="LocationofJob"

UniqueName="LocationofJob">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Amount" HeaderText="Amount" SortExpression="Amount"

UniqueName="Amount">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="DateCompleted" HeaderText="Completed Date" SortExpression="DateCompleted"

UniqueName="DateCompleted">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Warranty" HeaderText="Warranty" SortExpression="Warranty"

UniqueName="Warranty">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="OtherInfo" HeaderText="Other Info" SortExpression="OtherInfo"

UniqueName="OtherInfo">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Salesman" HeaderText="Salesman" SortExpression="Salesman"

UniqueName="Salesman">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Code" HeaderText="Code" SortExpression="Code"

UniqueName="Code">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="LeadId" HeaderText="ID" SortExpression="LeadId"

UniqueName="LeadId">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<HeaderStyle Width="100px" />

<ClientSettings>

<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True">

</Scrolling>

</ClientSettings>

</telerik:RadGrid>

<asp:Label ID="output" runat="server" Text=""></asp:Label><br />

<asp:Button ID="export" Text="Export Data to Excel" runat="server" />

</asp:Content>

I can provide a full copy of the site and db if need be.

6 Answers, 1 is accepted

answered on 23 Nov 2011, 04:29 PM

Hello Web Services,

I am still not able to login into your site. However, could you try the following Javascript code as a workaround:

Telerik.Web.UI.GridScrolling.prototype.applyFrozenScroll = function()

{

this._frozenScroll = $get(this._owner.ClientID + "_Frozen");

var scrollbarHeight = Telerik.Web.UI.Grid.getScrollBarHeight();

if(this._frozenScroll)

{

var frozenScrollChild = $get(this._owner.ClientID + "_FrozenScroll");

this._onGridFrozenScrollDelegate = Function.createDelegate(this, this.onGridFrozenScroll);

$addHandler(this._frozenScroll, "scroll", this._onGridFrozenScrollDelegate);

this.gridMasterTableWidth = this._owner.get_masterTableView().get_element().offsetWidth;

frozenScrollChild.style.width = this._owner.GridDataDiv.scrollWidth + "px";

frozenScrollChild.style.height = scrollbarHeight + "px";

if(this._owner.get_masterTableView().get_element().offsetWidth > this._owner.GridDataDiv.clientWidth)

{

if ($telerik.isIE)

scrollbarHeight++;

this._frozenScroll.style.height = scrollbarHeight + "px";

if(this._owner.ClientSettings.Scrolling.SaveScrollPosition && typeof this._owner.ClientSettings.Scrolling.ScrollLeft != "undefined")

{

this._frozenScroll.scrollLeft = this._owner.ClientSettings.Scrolling.ScrollLeft;

}

if(this._owner.GridDataDiv.style.overflowX != null)

{

this._owner.GridDataDiv.style.overflowX = "hidden";

}

else

{

this._frozenScroll.style.marginTop = "-" + scrollbarHeight + "px";

this._frozenScroll.style.zIndex = 99999;

this._frozenScroll.style.position = "relative";

}

if((window.netscape))

{

this._frozenScroll.style.width = this._owner.GridDataDiv.offsetWidth - scrollbarHeight + "px";

}

this._frozenScroll.style.marginRight = scrollbarHeight + "px";

if(this._owner.GridHeaderDiv && this._owner.GridDataDiv)

{

if((this._owner.GridDataDiv.clientWidth == this._owner.GridDataDiv.offsetWidth))

{

if(typeof (this._frozenScroll.style.overflowX) != "undefined" &&

typeof (this._frozenScroll.style.overflowY) != "undefined")

{

this._frozenScroll.style.overflowX = "auto";

this._frozenScroll.style.overflowY = "hidden";

if(window.netscape)

{

this._frozenScroll.style.width = parseInt(this._frozenScroll.style.width) + scrollbarHeight + "px";

}

if($telerik.isIE8)

{

this._frozenScroll.style.overflowX = "scroll";

}

else

{

this._frozenScroll.style.height = 0;

}

this.isFrozenScroll = true;

this.gridDataTableWidth = this._owner.GridDataDiv.clientWidth;

this.isFrozenScrollApplied = true;

}

Place this source after the RadScriptManager. I hope this helps.

Regards,
Galin
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

Accepted

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Can't Scroll over in Grid with IE 9

6 Answers, 1 is accepted