RadGrid width issues in IE9 Compatibility Mode

[Matt]

Ok, here's my basic problem:

In IE9 the grid looks fine, but if you switch to compatibility mode (IE7 Standards),  it disappears.  I have traced this to a width styling issue.

When rendering in IE9 the table renders as:

<table class="rgMasterTable rgClipCells" id="ctl00_dialogPlaceholder_addRecipientsDialog_allRecipientsGrid_ctl00" style="width: 100%; overflow: hidden; table-layout: fixed; text-overflow: ellipsis; empty-cells: show;" border="0" control="[object Object]">

When rendering in Combatibility mode the table renders as:

<table class="rgMasterTable rgClipCells" id="ctl00_dialogPlaceholder_addRecipientsDialog_allRecipientsGrid_ctl00" style="width: auto; overflow: hidden; table-layout: fixed; text-overflow: ellipsis; empty-cells: show;" border="0" control="[object Object]"><br>

Using IE Developer tools to change the width from auto to 100% resolves the issue.  How can I do this for real for actual clients?  I've tried setting the MasterTableView width to 100%, but that doesn't resolve anything.

 Here is the RadGrid (Telerik.Web.UI.dll version is 2011.2.915.35)

<telerik:RadGrid ID="allRecipientsGrid" Skin="Default" runat="server" EnableAJAX="True" EnableAJAXLoadingTemplate="True" ClientSettings-AllowKeyboardNavigation=false<br>                                        OnNeedDataSource="allRecipientsGrid_NeedDataSource" Width="98%" AllowMultiRowSelection="false"<br>                                        Height="281px" UseEmbeddedScripts="false" RadControlsDir="~/RadControls">
  <br>                                       
  <PagerStyle Mode="NextPrev" />
  <br>                                       
  <HeaderStyle Font-Bold="true" />
  <br>                                       
  <MasterTableView AutoGenerateColumns="false" AllowPaging="false" AllowCustomPaging="false">
    <br>                                           
    <RowIndicatorColumn>
      <br>                                           
    </RowIndicatorColumn>
    <br>                                           
    <Columns>
      <br>                                               
      <telerik:GridTemplateColumn>
        <br>                                                   
        <HeaderStyle Width="68%"/>
          <br>
          <ItemStyle Width="68%"/>
          <br>                                                   
          <ItemTemplate>
            <br>                                                       
              <span class="recipientObjectTag" style="display: none; visibility: hidden;"><br> 
                 <%# ((MailRecipient)Container.DataItem).ToJSON() %><br> 
              </span>
              <label>
                <input class="chkSelectedUser" type="checkbox" name="selecteduser" value="" onclick="this.value=this.parentNode.previousSibling.innerHTML;" /><br>  
                  <%# ((MailRecipient)Container.DataItem).FullNameShort %><br>
              </label><br>                                                   
          </ItemTemplate><br>                                               
        </telerik:GridTemplateColumn><br>                                               
        <telerik:GridTemplateColumn><br>                                                   
          <HeaderStyle Width="32%" /><br>                                                   
          <ItemStyle Width="32%" /><br>                                                   
          <ItemTemplate><br>                                                       
            <%# ((MailRecipient)Container.DataItem).GetTypeName(this.IsCourseContext) %><br>
          </ItemTemplate><br>                                               
        </telerik:GridTemplateColumn><br>                                           
      </Columns><br>                                       
    </MasterTableView><br>                                       
    <ClientSettings><br>                                           
    <Scrolling AllowScroll="True" UseStaticHeaders="true" SaveScrollPosition="True" /><br>  
    <Selecting AllowRowSelect="true" /><br>                                           
    <ClientEvents OnGridCreated="recipientsGridCreated" OnDataBound="recipientsGridRequestEnd" /><br>
    </ClientSettings><br>                                   
</telerik:RadGrid>

[Tsvetina]

Hello Matt,

Have you tried setting the 100% width for rgMasterTable class using the !important rule? It is needed in this scenario, as the style is inline. Alternatively, you could try setting Width="100%" in the MasterTableView declaration.
Additionally, when using scrolling with static headers, the columns should declare their width in pixels. If you do not want to give fixed width to both columns, you can leave one without width set and the other with width in pixels.
Also, I see some obsolete properties that you use, which you could remove from your grid declaration:

EnableAJAX - RadGrid no longer uses internal AJAX
EnableAJAXLoadingTemplate
UseEmbeddedScripts - replaced by EnableEmbeddedSkins = true/false

Let me know if these changes have any effect on your grid appearance.

Greetings,
Tsvetina
the Telerik team

[Matt]

Ok.  I resolved the problem by setting width: 100% !important in the rgMasterTable class.  Also, setting Width=100% in the MasterTableView does not solve the issue, only the 100% !important rule reached a resolution.

On a side note, setting this in the .RadGrid_Default class cured another issue we were seeing in IE9 Compatibility mode with scrollbars appearing and disappearing rapidly causing a wobble effect on the screen.