[Solved] RadGrid align wrong in IE when header and item is user control

[huynh]

Dear ,
I use 2 user control :header and item user control .Item user control contain another user control name :dayshift
In Firefox it work true.But in IE ,this is 2 issue :First,height table can set fit 100% container(in item template).Second, Header and Item align wrong although I set HeaderStyle.Width and ItemStyle.Width is the same value(I try set both on design and on code).
Please help me.I'm using Rad Controls for Asp.net Ajax Q3
This is my code
dayshift:
   <table cellpadding="0" cellspacing="0" style="border: none; margin: 0px; padding: 0px;text-align: center; width: 100%">
    <tr>
                    <td align="center">                        
                        <asp:Panel ID="pShift" runat="server" HorizontalAlign="Center">                        
                            <asp:CheckBox ID="UR017001chkShift" runat="server" />
                        </asp:Panel>                        
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <asp:ImageButton ID="UR017001ibAccept" ImageUrl="~/Images/accept.png" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <asp:ImageButton ID="UR017001ibCancel" ImageUrl="~/Images/remove.png" runat="server"
                            OnClick="UR017001ibCancel_Click" />
            </td>
        
    </tr>
</table>
User control Header:
<table cellspacing='0' cellpadding='0' border='0' width='100%'>
    <tr>
        <td class='ShiftShopping-header-top'>
            <asp:Literal ID="lithDay" runat="server" />
        </td>
    </tr>
    <tr>
        <td>
            <table cellspacing='0' cellpadding='0' border='0' width='100%'>
                <tr>
                        <asp:Repeater ID="repHeaderLeft" runat="server">
                            <ItemTemplate>
                                <td class="ShiftShopping-header-bot-left" style="width: <%# DataBinder.Eval(Container.DataItem, "Percent")%>%;">
                                    <%# DataBinder.Eval(Container.DataItem, "WorkShiftCode")%>
                                </td>
                            </ItemTemplate>
                        </asp:Repeater>
                          
                        <td class="ShiftShopping-header-bot-right">
                        <asp:Literal runat ="server" Text="<%$Resources:Strings,UR017001Timer %>" />
                        </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
User control for Item template:
<table cellspacing='0' cellpadding='0' border='0' width='100%' style="height:100%">
    <tr style="height:100%">
        <asp:Repeater ID="repItemLeft" runat="server"
            onitemdatabound="repItemLeft_ItemDataBound">
            <ItemTemplate>
                <td class="ShiftShopping-item-left" style="width: <%# DataBinder.Eval(Container.DataItem, "Percent")%>%;">
          <uc1:DayShift ID="DayShiftLeft" runat="server"   />
                      
                </td>
            </ItemTemplate>
        </asp:Repeater>
        
        <td class="ShiftShopping-item-right">
            <asp:Literal ID="litTimer" runat="server" />
        </td>
    </tr>
</table>

 CSS:
 <style type="text/css">
      .ShiftShopping-wrap-header tr td
    {       
        
    }
    .ShiftShopping-wrap-header
    {                
        padding: 0px !important;
        margin: none !important;        
    }
    .ShiftShopping-wrap-cell td
    {
        padding: 0px !important;
        margin: none !important;       
    }
    .ShiftShopping-wrap-cell
    {
        height:100%;
    }
    .ShiftShopping-header-top
    {      
        border-bottom: 1px solid #9EB6CE !important;
        text-align: center;
    }
    .ShiftShopping-header-bot-left
    {
        text-align: center;
        border-right:1px solid #9EB6CE !important;
    }
    .ShiftShopping-header-bot-right
    {          
        
        
        text-align: center;
    }
    .ShiftShopping-item-left
    {        
    height:100%;    
        text-align: center;
        border-right:1px solid #d0d7e5 !important;

    }
    .ShiftShopping-item-right
    {
        height:100%;
        text-align: center;
            }
    
     .ShiftShopping-wrap-header td
    {        
            
        padding: 0px !important;
        margin: none !important;  
             height:100%;
    }
    .ShiftShopping-wrap-cell td td
    {
        padding: 0px !important;
        margin: none !important;    
        border:none;
    }
</style>
At last,my RadGrid:
 <telerik:RadGrid ID="UR009001rgShipShopping" AllowPaging="true" PageSize="10" runat="server"
    AutoGenerateColumns="False" CellPadding="0" CellSpacing="0" Width="98%" OnItemDataBound="UR009001rgShipShopping_ItemDataBound"
    OnNeedDataSource="UR009001rgShipShopping_NeedDataSource"
    onitemcreated="UR009001rgShipShopping_ItemCreated">
    <HeaderContextMenu EnableTheming="True">
        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
    </HeaderContextMenu>
    <ClientSettings>
        <Scrolling AllowScroll="true" UseStaticHeaders="True" ScrollHeight="235px" />
    </ClientSettings>
    <FilterMenu EnableTheming="True">
        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
    </FilterMenu>
    <MasterTableView DataKeyNames="EmployeeID" TableLayout="Fixed">
        <HeaderStyle CssClass="ShiftShopping-wrap-header" />
        <ItemStyle CssClass="ShiftShopping-wrap-cell"/>
        <AlternatingItemStyle CssClass="ShiftShopping-wrap-cell"/>
        <RowIndicatorColumn>
            <HeaderStyle Width="20px"></HeaderStyle>
        </RowIndicatorColumn>
        <ExpandCollapseColumn>
            <HeaderStyle Width="20px"></HeaderStyle>
        </ExpandCollapseColumn>
        <Columns>
            <telerik:GridTemplateColumn ItemStyle-HorizontalAlign="center" HeaderText="<%$ Resources:Strings, UR000001grvhEmployeeInfo %>"
                HeaderStyle-HorizontalAlign="Center">
                <ItemTemplate>
                    <table cellpadding="0" border="0px" cellspacing="0" width="100%" style="overflow: hidden">
                        <tr>
                            <td align="center" style="overflow: hidden">
                                <asp:Literal ID="UR009001litEmployeeInfo" runat="server" />
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
                <HeaderStyle HorizontalAlign="Center" Width="80px"></HeaderStyle>
                <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="80px" Wrap="true">
                </ItemStyle>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn>
                <HeaderTemplate>
                 <uc4:HeaderShiftShopping ID="dshMonday" runat="server" />  
                </HeaderTemplate>
                <ItemTemplate>
                    <uc5:ItemShiftShopping ID="dsMonday" runat="server" />
                </ItemTemplate>
                <HeaderStyle  />
                <ItemStyle />
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn>
                <HeaderStyle />
                <HeaderTemplate>
               
                    <uc4:HeaderShiftShopping ID="dshTuesday" runat="server" />  
                </HeaderTemplate>
                <ItemTemplate>
                  <uc5:ItemShiftShopping ID="dsTuesday" runat="server" />
                </ItemTemplate>
                <HeaderStyle  />
                <ItemStyle  />
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn>
                <HeaderTemplate>
                 <uc4:HeaderShiftShopping ID="dshWednesday" runat="server" />
                </HeaderTemplate>
                <ItemTemplate>
                    <uc5:ItemShiftShopping ID="dsWednesday" runat="server" />
                </ItemTemplate>
                <HeaderStyle />
                <ItemStyle />
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn>
                <HeaderTemplate>
                    <uc4:HeaderShiftShopping ID="dshThursday" runat="server" />
                </HeaderTemplate>
                <ItemTemplate>
                   <uc5:ItemShiftShopping ID="dsThursday" runat="server" />
                </ItemTemplate>
                <HeaderStyle  />
                <ItemStyle  />
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn>
                <HeaderTemplate>
                    <uc4:HeaderShiftShopping ID="dshFriday" runat="server" />
                </HeaderTemplate>
                <ItemTemplate>
                     <uc5:ItemShiftShopping ID="dsFriday" runat="server" />
                </ItemTemplate>
                <HeaderStyle  />
                <ItemStyle  />
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn>
                <HeaderTemplate>
                  <uc4:HeaderShiftShopping ID="dshSaturday" runat="server" />
                </HeaderTemplate>
                <ItemTemplate>
                <uc5:ItemShiftShopping ID="dsSaturday" runat="server" />
                </ItemTemplate>
                <HeaderStyle  />
                <ItemStyle />
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn>
                <HeaderTemplate>
                  <uc4:HeaderShiftShopping ID="dshSunday" runat="server" />
                </HeaderTemplate>
                <ItemTemplate>
                    <uc5:ItemShiftShopping ID="dsSunday" runat="server" />
                </ItemTemplate>
                <HeaderStyle />
                <ItemStyle />
            </telerik:GridTemplateColumn>
            
              <telerik:GridTemplateColumn ItemStyle-HorizontalAlign="center" HeaderText="<%$ Resources:Strings, UR017001Total %>"
                HeaderStyle-HorizontalAlign="Center">
                <ItemTemplate>
                    <table cellpadding="0" border="0px" cellspacing="0" width="100%">
                        <tr>
                            <td align="center" style="width: 100%">
                                <asp:Literal ID="litTotalWeek" runat="server" />
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
                <HeaderStyle HorizontalAlign="Center" Width="32px"></HeaderStyle>
                <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="32px" Wrap="False">
                </ItemStyle>
            </telerik:GridTemplateColumn>
        </Columns>
        <ItemStyle BorderStyle="None" />
    </MasterTableView>
</telerik:RadGrid>

[huynh]

Dear,
I fixed align ,I seperate repeater to 2 repeater .And set css for left repeater.
But 2 issue maintain:
 table inside repeater(on item template) set height 100% not effect.Why?It works well on FireFox,but IE wrong
And why IE load very slow(I'm using IE8) and browser usually dead,but FireFox load very fast and work well
Please help me
Regards,

[Dimo]

Hi huynh,

Judging by the provided code snippets, I would suggest that IE is slow because the layout that you are using is too complex - it has too many nested tables. Please consider optimizing the HTML output and decrease the RadGrid page size.

As for the height issue - according to the W3C CSS specification, an element with a height set in percent, must have a parent element with an explicit height set as well (either in percent or in pixels). The rule applies recursively.

Regards,
Dimo
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[huynh]

Hi Dimo,
Thanks for support.Yes,I fixed height.It's ok
But I also issue .Item width is larger Header width each coloumn although I set the same value .Issue just in IE,Firefox show well.
Because in FireFox,it auto expand last column to end  without depend resolution.But in IE,it not expand.
Is it bug of IE or How I can fixed problem?
Thanks
Regard,

[Dimo]

Hi Huynh,

Actually. setting ItemStyle-Width is not recommended. Column widths should be set by using HeaderStyle-Width only.

The problem with the empty space above the RadGrid vertical scrollbar is characteristic for Firefox and is caused by a browser behavior. A possible workaround is to set a suitable background (like the header cell background) as a background to the RadGrid div:

div.RadGrid_SkinName
{
        background: url(......) 100% 0 repeat-x;
}

If you need further assistance on any of the above two problems, please open a formal support ticket and attach a runnable sample project.

Regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.