2009 Q2 - MasterTable table-layout: fixed; cannot change it to auto

[Steve Y]

I just upgraded to Q2 2009 and noticed that the mastertableview tablelayout="auto" seems to be ignored and results in a table-layout: fixed; in the markup. This seems to an issue in chrome where my layout for an empty grid breaks. (headers are shuffled left in the commandrow and a gap is left on the right hand side, whereas other browsers suchas a firefox and safari seem to still visually work fine.

Here's my aspx:

<telerik:RadGrid ID="rgLiens" runat="server" EnableEmbeddedSkins="false" Skin="RealMax"
        OnNeedDataSource="rgLiens_NeedDataSource" OnItemCreated="rgLiens_ItemCreated"
        ondeletecommand="rgLiens_DeleteCommand" oninsertcommand="rgLiens_InsertCommand"
        onupdatecommand="rgLiens_UpdateCommand" OnPreRender="rgLiens_PreRender" OnItemDataBound="rgLiens_ItemDataBound"
        OnRowDrop="rgLiens_RowDrop" GridLines="None" ShowFooter="True" >
    <ClientSettings EnableRowHoverStyle="true" AllowRowsDragDrop="true">
        <ClientEvents OnRowMouseOut="rowMouseOut" OnRowMouseOver="rowMouseOver" OnPopUpShowing="PopUpCentered" />
        <Selecting AllowRowSelect="true" />
        <Resizing AllowColumnResize="True" />
    </ClientSettings>
        <FilterMenu EnableTheming="True">
        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
    </FilterMenu>
    <MasterTableView AutoGenerateColumns="False" CommandItemDisplay="Top" EditMode="EditForms" TableLayout="auto"
            DataKeyNames="LienId,LienIndex,PropertyId">
      <NoRecordsTemplate><div style="margin:6px">No liens recorded for this property</div></NoRecordsTemplate>
      <PagerStyle Mode="NextPrevNumericAndAdvanced" AlwaysVisible="false" />
      <ItemStyle CssClass="RowMouseOut" />
      <AlternatingItemStyle CssClass="RowMouseOut" />
      <RowIndicatorColumn HeaderStyle-Width="20px" />
      <ExpandCollapseColumn HeaderStyle-Width="20px" />

      <Columns>
        <telerik:GridEditCommandColumn EditImageUrl="~/Images/Buttons/edit.gif" ButtonType="ImageButton" Resizable="false" >
            <HeaderStyle Width="24px" />
            <ItemStyle CssClass="CommandColumn" />
        </telerik:GridEditCommandColumn>
        <Telerik:GridBoundColumn DataField="LienIndex" DataType="System.Int16" ReadOnly="true">
            <HeaderStyle Width="20px" HorizontalAlign="Center" />
        </Telerik:GridBoundColumn>

etc

 
and here's the html generated...

<div id="ctl00_mainPlace_Liens_rgLiens" class="RadGrid RadGrid_RealMax">

<table cellspacing="0" class="rgMasterTable rgClipCells" border="0" id="ctl00_mainPlace_Liens_rgLiens_ctl00"                                        style="width:100%;table-layout:fixed;overflow:hidden;empty-cells:show;">

<colgroup>

<col width="24px"  />

<col width="20px"  />

<col width="90px"  />

<col width="90px"  />

<col width="90px"  />

<col width="90px"  />

<col />

<col />

<col />

<col />

<col />

<col width="90px"  />

<col width="24px"  />

</colgroup>

<thead>

<tr class="rgCommandRow">

<td class="rgCommandCell" colspan="13">

<table border="0px" width="100%" cellpadding="0px" cellspacing="0px"><tr>

<td style="width:20%"><div id="ctl00_mainPlace_Liens_rgLiens_ctl00_ctl02_ctl00_rtbLiensIcon" class="RadToolBar RadToolBar_Horizontal RadToolBar_RealMax RadToolBar_RealMax_Horizontal " style="z-index:9000;">

<div class="rtbOuter">

<div class="rtbMiddle">

<div class="rtbInner">

<ul class="rtbUL">

<li class="rtbItem rtbBtn"><a title="Click to view all Liens" class="rtbWrap" href="Properties.aspx" style="font-size:140%;"><span class="rtbOut"><span class="rtbMid"><span class="rtbIn"><img alt="Click to view all Liens" src="Images/Buttons/lien.png" class="rtbIcon" /><span class="rtbText">Liens</span></span></span></span></a></li>

</ul>

</div>

</div>

</div><input id="ctl00_mainPlace_Liens_rgLiens_ctl00_ctl02_ctl00_rtbLiensIcon_ClientState" name="ctl00_mainPlace_Liens_rgLiens_ctl00_ctl02_ctl00_rtbLiensIcon_ClientState" type="hidden" />

</div></td>

<td style="width:25%"><div id="ctl00_mainPlace_Liens_rgLiens_ctl00_ctl02_ctl00_rtbLiens" class="RadToolBar RadToolBar_Horizontal RadToolBar_RealMax RadToolBar_RealMax_Horizontal " style="z-index:9000;">

<div class="rtbOuter">

<div class="rtbMiddle">

<div class="rtbInner">

<ul class="rtbUL">

<li class="rtbItem rtbBtn"><a title="Add new lien" class="rtbWrap" href="#"><span class="rtbOut"><span class="rtbMid"><span class="rtbIn"><img alt="Add new lien" src="Images/Buttons/Add.png" class="rtbIcon" /><span class="rtbText">Add</span></span></span></span></a></li><li class="rtbItem rtbBtn"><a title="Edit lien details" class="rtbWrap" href="#"><span class="rtbOut"><span class="rtbMid"><span class="rtbIn"><img alt="Edit lien details" src="Images/Buttons/Edit.gif" class="rtbIcon" /><span class="rtbText">Edit</span></span></span></span></a></li><li class="rtbItem rtbBtn"><a title="Delete lien" class="rtbWrap" href="#"><span class="rtbOut"><span class="rtbMid"><span class="rtbIn"><img alt="Delete lien" src="Images/Buttons/Delete.gif" class="rtbIcon" /><span class="rtbText">Delete</span></span></span></span></a></li>

</ul>

</div>

</div>

</div><input id="ctl00_mainPlace_Liens_rgLiens_ctl00_ctl02_ctl00_rtbLiens_ClientState" name="ctl00_mainPlace_Liens_rgLiens_ctl00_ctl02_ctl00_rtbLiens_ClientState" type="hidden" />

</div></td>

<td style="width:40%" align="left">

</td>

<td style="width:15%" align="right"><div id="ctl00_mainPlace_Liens_rgLiens_ctl00_ctl02_ctl00_rtbLiensRefresh" class="RadToolBar RadToolBar_Horizontal RadToolBar_RealMax RadToolBar_RealMax_Horizontal " style="z-index:9000;">

<div class="rtbOuter">

<div class="rtbMiddle">

<div class="rtbInner">

<ul class="rtbUL">

<li class="rtbItem rtbBtn"><a title="Refresh data" class="rtbWrap" href="#"><span class="rtbOut"><span class="rtbMid"><span class="rtbIn"><img alt="Refresh data" src="Images/Buttons/Refresh.png" class="rtbIcon" /><span class="rtbText">Refresh</span></span></span></span></a></li>

</ul>

</div>

</div>

</div><input id="ctl00_mainPlace_Liens_rgLiens_ctl00_ctl02_ctl00_rtbLiensRefresh_ClientState" name="ctl00_mainPlace_Liens_rgLiens_ctl00_ctl02_ctl00_rtbLiensRefresh_ClientState" type="hidden" />

</div></td>

</tr></table>

</td>

</tr><tr style="display:none;">

<th scope="col">&nbsp;</th><th scope="col">&nbsp;</th><th scope="col">Loan Amount</th><th scope="col">Interest Rate</th><th scope="col">Payment</th><th scope="col">Arrears</th><th scope="col">Lender</th><th scope="col">Loan Number</th><th scope="col">Loan Date</th><th scope="col">Loan Type</th><th scope="col">Term</th><th scope="col">Loan Balance</th><th scope="col">&nbsp;</th>

</tr>

</thead><tbody>

<tr class="rgNoRecords">

<td colspan="13" style="text-align:left;"><div style="margin:6px">No liens recorded for this property</div></td>

</tr>

</tbody>

</table><input id="ctl00_mainPlace_Liens_rgLiens_ClientState" name="ctl00_mainPlace_Liens_rgLiens_ClientState" type="hidden" />

</div>

</div>

</div>

<div id="ctl00_mainPlace_Liens_RadAjaxLoadingPanel" class="RadAjax RadAjax_Vista " style="display:none;">

<div class="raDiv">

</div><div class="raColor raTransp">

</div>

</div>

</div><div id="ctl00_mainPlace_RPV_Owners" class="GridPageView" style="display:none;">

[Dimo]

Hello Steve,

In some cases the fixed table layout is required for RadGrid to work as expected and support its features. One of these cases is when column resizing is enabled and ClipCellContentOnResize="True".

Until present, you had to set TableLayout="Fixed" explicitly in order to make ClipCellContentOnResize work. Now we made the fixed table layout be applied automatically.

In your case the fixed table layout is applied because the default value of ClipCellContentOnResize is true. Please set it to false:

<Resizing AllowColumnResize="true" ClipCellContentOnResize="false" />


Best wishes,
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.

[Lohith]

Hi,

We are migrating to new dll from telerik and we have a similar issue where in radgrid renders something like below.

<div style="width:100%;" useembeddedscripts="false" class="RadGrid RadGrid_OWNSTYLE alarmTable" id="ctl00_ct_ctlVariables_VGrd" tabindex="0">
<table border="1" style="width:100%;table-layout:fixed;overflow:hidden;empty-cells:show;" id="ctl00_ct_ctlVariables_VGrd_ctl00" rules="all" class="rgMasterTable rgClipCells">
    
You see from the above table-layout is set to fixed.  I want to set it as auto without which all my listboxes appeared to be clipped.
As over-flow attribute is set to hidden which is what we want.  I don't have ClipCellContentOnResize set.

I have set MasterTableView's TableLayout attribute property  to "Auto" also.  A small snippet of tags below.

 <telerik:RadGrid ID="AlarmGrid" Skin="OWNSTYLE" runat="server" GroupingEnabled="False"
                        AllowPaging="true" OnItemCommand="AlarmGrid_ItemCommand" AllowFilteringByColumn="True"
                        AllowMultiRowSelection="True" AllowSorting="false" HorizontalAlign="NotSet" AutoGenerateColumns="False"
                        PageSize="20" AllowCustomPaging="true" UseEmbeddedScripts="false" GridLines="Both"
                        EnableEmbeddedSkins="false" EnableTheming="false" >
                        <MasterTableView DataKeyNames="Id" TableLayout="Auto" >
                            <RowIndicatorColumn UniqueName="RowIndicator" Visible="False">
                                <HeaderStyle Width="30px"></HeaderStyle>
                            </RowIndicatorColumn>
                            <Columns>
                                <telerik:GridTemplateColumn Groupable="False" UniqueName="TemplateColumn" AllowFiltering="false"
                                    HeaderStyle-Width="30px">
                                    <HeaderStyle></HeaderStyle>
                                    <ItemStyle CssClass=""></ItemStyle>
                                    <HeaderTemplate>
                                        <div class="checkBoxDiv">
                                            <asp:CheckBox ID="chkHeader" CssClass="CheckBox" AutoPostBack="false" runat="server"
                                                onclick="AlarmsGridSelectAll(this)" />
                                        </div>
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <asp:CheckBox ID="chkItem" AutoPostBack="False" runat="server"></asp:CheckBox>
                                        <input type="hidden" runat="server" id="hdnItem" value='<%# Eval("Id") %>' />
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>

Is there any other property that I need to set. I see older classic version did render auto by default.  Would really appreciate if you could help with this.

Thanks & Regards,
Lohitha

[Lohith]

Hi,

We are migrating to new dll from telerik and we have a similar issue where in radgrid renders something like below.

<div style="width:100%;" useembeddedscripts="false" class="RadGrid RadGrid_OWNSTYLE alarmTable" id="ctl00_ct_ctlVariables_VGrd" tabindex="0">
<table border="1" style="width:100%;table-layout:fixed;overflow:hidden;empty-cells:show;" id="ctl00_ct_ctlVariables_VGrd_ctl00" rules="all" class="rgMasterTable rgClipCells">
    
You see from the above table-layout is set to fixed.  I want to set it as auto without which all my listboxes appeared to be clipped.
As over-flow attribute is set to hidden which is what we want.  I don't have ClipCellContentOnResize set.

I have set MasterTableView's TableLayout attribute property  to "Auto" also.  A small snippet of tags below.

 <telerik:RadGrid ID="AlarmGrid" Skin="OWNSTYLE" runat="server" GroupingEnabled="False"
                        AllowPaging="true" OnItemCommand="AlarmGrid_ItemCommand" AllowFilteringByColumn="True"
                        AllowMultiRowSelection="True" AllowSorting="false" HorizontalAlign="NotSet" AutoGenerateColumns="False"
                        PageSize="20" AllowCustomPaging="true" UseEmbeddedScripts="false" GridLines="Both"
                        EnableEmbeddedSkins="false" EnableTheming="false" >
                        <MasterTableView DataKeyNames="Id" TableLayout="Auto" >
                            <RowIndicatorColumn UniqueName="RowIndicator" Visible="False">
                                <HeaderStyle Width="30px"></HeaderStyle>
                            </RowIndicatorColumn>
                            <Columns>
                                <telerik:GridTemplateColumn Groupable="False" UniqueName="TemplateColumn" AllowFiltering="false"
                                    HeaderStyle-Width="30px">
                                    <HeaderStyle></HeaderStyle>
                                    <ItemStyle CssClass=""></ItemStyle>
                                    <HeaderTemplate>
                                        <div class="checkBoxDiv">
                                            <asp:CheckBox ID="chkHeader" CssClass="CheckBox" AutoPostBack="false" runat="server"
                                                onclick="AlarmsGridSelectAll(this)" />
                                        </div>
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <asp:CheckBox ID="chkItem" AutoPostBack="False" runat="server"></asp:CheckBox>
                                        <input type="hidden" runat="server" id="hdnItem" value='<%# Eval("Id") %>' />
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>

Is there any other property that I need to set. I see older classic version did render auto by default.  Would really appreciate if you could help with this.

Thanks & Regards,
Lohitha

[Pavlina]

Hi,

Note that when scrolling is enabled (the ClientSettings.Scrolling.AllowScroll property is True) and the grid columns have static headers, table-layout is also fixed. If the scrolling is enabled for the grid this is expected.

Kind regards,
Pavlina
the Telerik team