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

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

4 Answers 182 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Steve Y
Top achievements
Rank 2
Steve Y asked on 03 Jul 2009, 06:25 PM
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"><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"><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"><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"><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"><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;">  

4 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 06 Jul 2009, 09:08 AM
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.
0
Lohith
Top achievements
Rank 1
answered on 26 Nov 2012, 08:17 AM
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
0
Lohith
Top achievements
Rank 1
answered on 26 Nov 2012, 08:18 AM
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
0
Pavlina
Telerik team
answered on 29 Nov 2012, 01:00 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
Steve Y
Top achievements
Rank 2
Answers by
Dimo
Telerik team
Lohith
Top achievements
Rank 1
Pavlina
Telerik team
Share this question
or