Use of HeaderStyle-Width causes enclosing table to expand

[Tom]

Hello,

I am having an issue where I have a grid with many columns and am attempting to use the HeaderStyle-Width property in the designer to set the initial column width.  When I do this, the table that contains the grid expands past its width.  Removing the HeaderStyle-Width properties causes each column to be very narrow.  Is there I way that I may control the width of the columns without having the surrounding HTML affected?  I am using contentplaceholders and other placeholders are also affected.

<asp:Content ID="GridContent" ContentPlaceHolderID="GridContent" Runat="Server">
<table border="0" cellpadding="0" cellspacing="0" width="520">
    <tr>
        <td>
            <div>
                <telerik:RadGrid ID="RadGridProgram" runat="server"
                        AutoGenerateColumns="false" AllowSorting="True" AllowPaging="true" Skin="Simple" ClientSettings-Resizing-AllowColumnResize="true"
                        ItemStyle-Wrap="false" Width="500" HeaderStyle-Wrap="false" PageSize="10"
                        OnNeedDataSource="RadGridProgram_NeedDataSource" OnItemCommand="RadGridProgram_ItemCommand">
                        <PagerStyle Mode="NumericPages" />
                        <ClientSettings>
                            <Scrolling AllowScroll="true" UseStaticHeaders="true"  />
                        </ClientSettings>
                        <MasterTableView TableLayout="Fixed" AllowMultiColumnSorting="true" DataKeyNames="ProgramID" ShowFooter="false" PagerStyle-AlwaysVisible="false" >
                            <NoRecordsTemplate>
                                <asp:Label ID="lblMsg" runat="server" Text="No Records found"></asp:Label>
                            </NoRecordsTemplate>
                            <Columns>
                                <telerik:GridButtonColumn ButtonType="LinkButton" HeaderText="Edit" CommandName="EditProgram" UniqueName="Edit" Text="Edit" HeaderStyle-Width="40" />
                                <telerik:GridBoundColumn HeaderText="Program ID" HeaderButtonType="TextButton" DataField="ProgramID" HeaderStyle-Width="80" />
                                <telerik:GridBoundColumn HeaderText="Prog. Collection. ID" HeaderButtonType="TextButton" DataField="ProgramId" Display="false" />
                                <telerik:GridBoundColumn HeaderText="Program Collection" HeaderButtonType="TextButton" DataField="ProgramCollection.ProgramName" HeaderStyle-Width="200" />
                                <telerik:GridBoundColumn HeaderText="Client ID" HeaderButtonType="TextButton" DataField="ClientId" Display="false" />
                                <telerik:GridBoundColumn HeaderText="Client" HeaderButtonType="TextButton" DataField="Client.ClientName" HeaderStyle-Width="150" />
                                <telerik:GridBoundColumn HeaderText="Program Name" HeaderButtonType="TextButton" DataField="ProgramName" HeaderStyle-Width="200" />
                                <telerik:GridBoundColumn HeaderText="Program Code" HeaderButtonType="TextButton" DataField="ProgramCode" HeaderStyle-Width="100" />
                                <telerik:GridBoundColumn HeaderText="Description" HeaderButtonType="TextButton" DataField="ProgramDescription" HeaderStyle-Width="300" />
                                <telerik:GridBoundColumn HeaderText="Program Type Id" HeaderButtonType="TextButton" DataField="ProgramTypeId" HeaderStyle-Width="200" Display="false" />
                                <telerik:GridBoundColumn HeaderText="Program Type" HeaderButtonType="TextButton" DataField="ProgramType.ProgramTypeCode" HeaderStyle-Width="100" />
                                <telerik:GridBoundColumn HeaderText="Domain Exp. Date" HeaderButtonType="TextButton" DataField="DomainExpDateText" HeaderStyle-Width="100" />
                                <telerik:GridBoundColumn HeaderText="SSL Exp. Date" HeaderButtonType="TextButton" DataField="SSLExpDateText" HeaderStyle-Width="100" />
                                <telerik:GridBoundColumn HeaderText="Domain Name" HeaderButtonType="TextButton" DataField="DomainName" HeaderStyle-Width="250" />
                                <telerik:GridBoundColumn HeaderText="IPAddress" HeaderButtonType="TextButton" DataField="IPAddress" HeaderStyle-Width="250" />
                                <telerik:GridBoundColumn HeaderText="PM Name" HeaderButtonType="TextButton" DataField="PMName" HeaderStyle-Width="100" />
                                <telerik:GridBoundColumn HeaderText="Developer Name" HeaderButtonType="TextButton" DataField="DeveloperName" HeaderStyle-Width="100" />
                                <telerik:GridBoundColumn HeaderText="Job Number" HeaderButtonType="TextButton" DataField="JobNumber" HeaderStyle-Width="100" />
                                <telerik:GridBoundColumn HeaderText="Adverse Events" HeaderButtonType="TextButton" DataField="HasAdverseEvents" HeaderStyle-Width="100" />
                                <telerik:GridBoundColumn HeaderText="Pharmacy Lookup" HeaderButtonType="TextButton" DataField="HasPharmacyLookup" HeaderStyle-Width="100" />
                                <telerik:GridBoundColumn HeaderText="Fax" HeaderButtonType="TextButton" DataField="Fax" HeaderStyle-Width="100" />
                            </Columns>
                        </MasterTableView>
                </telerik:RadGrid>
            </div>
        </td>
    </tr>
</table>
</asp:Content>

Thanks,

[Pavlina]

Hello Tom,

Please try setting <table style="table-layout:fixed;">, also fixed pixel width for the RadGrid control and let me know about the result.

Greetings,
Pavlina
the Telerik team

[Tom]

Thanks Pavlina,

Adding that style to the enclosing table worked!