Button moves around in IE 7 compatibility mode when window resized

4 posts, 0 answers
  1. James Daresta
    James Daresta avatar
    59 posts
    Member since:
    Sep 2009

    Posted 12 Jan 2011 Link to this post

    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);

  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 14 Jan 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. James Daresta
    James Daresta avatar
    59 posts
    Member since:
    Sep 2009

    Posted 14 Jan 2011 Link to this post

    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;
    }



  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 19 Jan 2011 Link to this post

    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.
Back to Top