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

Button moves around in IE 7 compatibility mode when window resized

3 Answers 98 Views
Button
This is a migrated thread and some comments may be shown as answers.
James Daresta
Top achievements
Rank 1
James Daresta asked on 12 Jan 2011, 07:41 PM
Seeing weird behavior with the RadButton when I add it dynamically to the pager in the grid and the browser is IE 8 with IE 7 compatibility mode. Does not do this in normal IE 8 mode. I saw a post here for a repainting issue and that fix did not help.  Interesting enough once you mouse over the button it returns to the proper position. Below is my code for adding it to the grid pager. Attached is a picture of what it does when resized. Side note I am not happy with the way I am adding the button to the pager. I know I could use the page template, but I want the normal paging just with the extra button. Is there a better way to do it? Also what is the best step in the grid lifecycle to do it? I am currently doing it in the OnItemCreated. Thanks.

GridPagerItem pagerItem = e.Item as GridPagerItem;
RadButton newButton = new RadButton();
newButton.ID = "btnSaveNext";
newButton.Text = "Save & Next";
newButton.CommandName = "SaveNext";
newButton.Icon.PrimaryIconUrl = "../images/icons/save16x16.gif";
((Table)e.Item.Cells[0].Controls[0]).Rows[0].Cells[0].Controls.Add(newButton);

3 Answers, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 14 Jan 2011, 01:13 PM
Hello James,

I tried to reproduce the problem locally, but to no avail. Here is a video captured while running my sample project: http://www.screencast.com/users/metalmkd/folders/Jing/media/5fb8f98e-1c50-4f6e-8ee5-e30f0551cc60.
The full source code of the project is attached to the thread.

Actually no, you are adding the Button in the right way, in the ItemCreated event of the grid.

Greetings,
Pero
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
James Daresta
Top achievements
Rank 1
answered on 14 Jan 2011, 04:29 PM

Ok it appears to be combination of things. It seems that when you have the following is when it occurs:

  1. Show footer.
  2. In client settings allow scrolling, use static headers and allow column resizing.
  3. Have several columns that cause the header height to grow larger when browser is resized.
  4. Have a footer with text that when it resizes it causes the footer to grow larger.

Taking your example I added the columns and footer data that my grid has on rendering. You will see that when the footer and header data causes each to be higher in height the button does what I describe.

Web Page Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GRidButton.aspx.cs" Inherits="Default_Button"
    EnableViewState="false" %>
  
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="true" OnNeedDataSource="RadGrid1_NeedDataSource"
        OnItemCreated="RadGrid1_ItemCreated" ondatabound="RadGrid1_DataBound" ShowFooter="true">
        <MasterTableView PageSize="20">
            <PagerStyle Mode="NextPrevAndNumeric" />
        <Columns>
                <telerik:GridBoundColumn DataField="Region.Description" HeaderText="Region" UniqueName="Region">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="Trading Partner" UniqueName="TradingPartner" DataField="TradingPartner.Name">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="Master Ship No" UniqueName="MasterShipToNo" DataField="MasterShipToId" Visible="false" >
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="Account Name" UniqueName="AccountName" DataField="AccountName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="City" UniqueName="City" DataField="City">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="State" UniqueName="State" DataField="State.StateId">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="IsProspect" HeaderText="Is Prospect?" UniqueName="IsProspect" >
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="AccountManagerName" HeaderText="Account Manager" UniqueName="AccountManagerName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="MaterialGroup.Description" HeaderText="Material Group" UniqueName="MaterialGroup">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Material.Description" HeaderText="Material" UniqueName="Material" Visible="false">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Material.MaterialNo" HeaderText="Material No" UniqueName="MaterialNo" Visible="false" >
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="DefaultShipMode.Description" HeaderText="Default Mode" UniqueName="DefaultShipMode">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="DefaultPlant.Description" HeaderText="Default Plant" UniqueName="DefaultPlant">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="DefaultPlant.Id" HeaderText="Default Plant No" UniqueName="DefaultPlantId" Visible="false" >
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="PriorYearValue" HeaderText="Prior Year" UniqueName="PriorYear" DataType="System.Int32" DataFormatString="{0:#,###,###,##0}">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="PriorPeriodValue" HeaderText="Prior Month" UniqueName="PriorPeriod" DataType="System.Int32" DataFormatString="{0:#,###,###,##0}">
                </telerik:GridBoundColumn>
                <telerik:GridTemplateColumn HeaderText="Acct Rep Forecast" UniqueName="AccRepForecast" SortExpression="AccountManagerValue" DataField="AccountManagerValue" >
                    <ItemTemplate>
                        <telerik:RadNumericTextBox ID="rntxtAcctRepForecast" runat="server" Type="Number" DataType="System.Int32" NumberFormat-DecimalDigits="0" NumberFormat-GroupSizes="3" NumberFormat-GroupSeparator="," ></telerik:RadNumericTextBox>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn HeaderText="Mgmt Forecast" UniqueName="MgmtAllocation" SortExpression="ManagementAllocationValue" DataField="ManagementAllocationValue">
                    <ItemTemplate>
                        <telerik:RadNumericTextBox ID="rntxtMgmtAllocation" runat="server" Type="Number" DataType="System.Int32" NumberFormat-DecimalDigits="0" NumberFormat-GroupSizes="3" NumberFormat-GroupSeparator=","></telerik:RadNumericTextBox>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn HeaderText="Difference" UniqueName="Difference"  SortExpression="ValueDifference" DataField="ValueDifference">
                    <ItemTemplate>
                        <telerik:RadNumericTextBox ID="rtxtDifference" runat="server" ReadOnly="true" ReadOnlyStyle-BorderStyle="None" ReadOnlyStyle-BackColor="Transparent" ReadOnlyStyle-ForeColor="Black" DataType="System.Int32" NumberFormat-DecimalDigits="0" NumberFormat-GroupSizes="3" NumberFormat-GroupSeparator=","></telerik:RadNumericTextBox>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridNumericColumn HeaderText="Acct Rep Forecast" UniqueName="AccRepForecastValue" DataField="AccountManagerValue" Visible="false" DataType="System.Int32" DataFormatString="{0:#,###,###,##0}">
                </telerik:GridNumericColumn>                
                <telerik:GridNumericColumn HeaderText="Mgmt Forecast" UniqueName="MgmtAllocationValue" DataField="ManagementAllocationValue" Visible="false" DataType="System.Int32" DataFormatString="{0:#,###,###,##0}">
                </telerik:GridNumericColumn>                
                <telerik:GridNumericColumn HeaderText="Difference" UniqueName="DifferenceValue"  DataField="ValueDifference" Visible="false" DataType="System.Int32" DataFormatString="{0:#,###,###,##0}">
                </telerik:GridNumericColumn>           
        </Columns>
  
        </MasterTableView>
                <ClientSettings Resizing-AllowColumnResize="true">
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                </ClientSettings>
    </telerik:RadGrid>
    </form>
</body>
</html>

Additional Code Behind Method

protected void RadGrid1_DataBound(object sender, EventArgs e)
{
    GridFooterItem footerItem = (GridFooterItem)RadGrid1.MasterTableView.GetItems(GridItemType.Footer)[0];
    footerItem["MaterialGroup"].Text = "Grand Totals:";
    footerItem["MaterialGroup"].Font.Bold = true;
}



0
Pero
Telerik team
answered on 19 Jan 2011, 01:56 PM
Hi James,

Thank you for the modified code! It helped me reproduce the issue locally.

The button seems to be moving on window resize, because it has position: relative set to the wrapping HTML element. IE6 and IE7 sometimes have problems with elements with position: relative. The problem can be avoided with small script executed when the browser is resized. I register the script from the server. Please find the modified code attached to the thread. Let me know if you have questions.

Best wishes,
Pero
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Tags
Button
Asked by
James Daresta
Top achievements
Rank 1
Answers by
Pero
Telerik team
James Daresta
Top achievements
Rank 1
Share this question
or