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

RadGrid width way too big

3 Answers 828 Views

Grid

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

Devon asked on 23 Mar 2012, 06:19 PM

1-GridWithData.PNG

2--ResizedToFit.PNG

3-emptyGrid.PNG

Hello,

I added TemplateColumns to my RadGrid and now my grid is way too big: 2209px wide within a ~900px div (see attached 1, FireBug shows width as 2209px (circled)). The content of the grid is easily small enough to fit (see attached 2 (manually changed the width in FireBug)). When the grid is empty, the sizing is fine (see attached 3). Is this a bug with template columns that's causing the total grid Width to be wrong, or am I missing something?

I tried setting each TemplateColumn's ItemStyle-Width property individually, but got the same result. Changing the RadGrid's Width property has no effect. Below is my Grid Code.

<tel:RadGrid runat="server" ID="rgImportData" AutoGenerateColumns="false" Width="100%" >

<MasterTableView>

<Columns>

<tel:GridTemplateColumn HeaderText="Exclude from Import" UniqueName="ExcludeColumn" >

<ItemTemplate>

<asp:CheckBox ID="cbExcludeFromImport" runat="server" />

</ItemTemplate>

</tel:GridTemplateColumn>

<tel:GridBoundColumn DataField="SpeciesName" HeaderText="Species Name" UniqueName="SpeciesName" />

<tel:GridBoundColumn DataField="SpeciesID" UniqueName="SpeciesID" Display="false" />

<tel:GridTemplateColumn HeaderText="Length" UniqueName="Length" >

<ItemTemplate>

<tel:RadNumericTextBox runat="server" ID="rgrntLength" Text='<%# Eval("Length") %>' NumberFormat-DecimalDigits="0" Width="40px" MaxValue="9999" />

</ItemTemplate>

</tel:GridTemplateColumn>

<tel:GridTemplateColumn HeaderText="Weight" UniqueName="Weight" >

<ItemTemplate>

<tel:RadNumericTextBox runat="server" ID="rgrntWeight" Text='<%# Eval("Weight") %>' NumberFormat-DecimalDigits="0" Width="40px" MaxValue="9999" />

</ItemTemplate>

</tel:GridTemplateColumn>

<tel:GridBoundColumn DataField="Sex" HeaderText="Sex" UniqueName="Sex" />

<tel:GridTemplateColumn HeaderText="Age" UniqueName="Age" >

<ItemTemplate>

<tel:RadNumericTextBox runat="server" ID="rgrntAge" Text='<%# Eval("Age") %>' NumberFormat-DecimalDigits="0" Width="40px" MaxValue="9999" />

</ItemTemplate>

</tel:GridTemplateColumn>

<tel:GridTemplateColumn HeaderText="Magn." UniqueName="Magnification" >

<ItemTemplate>

<tel:RadNumericTextBox runat="server" ID="rgrntMagnification" Text='<%# Eval("Magnification") %>' NumberFormat-DecimalDigits="0" Width="40px" MaxValue="9999" />

</ItemTemplate>

</tel:GridTemplateColumn>

<tel:GridTemplateColumn HeaderText="Annulus 1" UniqueName="Annulus1" >

<ItemTemplate>

<tel:RadNumericTextBox runat="server" ID="rgrntAnn1" Text='<%# Eval("Annulus1") %>' NumberFormat-DecimalDigits="0" Width="40px" MaxValue="9999" />

</ItemTemplate>

</tel:GridTemplateColumn>

<tel:GridTemplateColumn HeaderText="Annulus 2" UniqueName="Annulus2" >

<ItemTemplate>

<tel:RadNumericTextBox runat="server" ID="rgrntAnn2" Text='<%# Eval("Annulus2") %>' NumberFormat-DecimalDigits="0" Width="40px" MaxValue="9999" />

</ItemTemplate>

</tel:GridTemplateColumn>

<tel:GridTemplateColumn HeaderText="Annulus 3" UniqueName="Annulus3" >

<ItemTemplate>

<tel:RadNumericTextBox runat="server" ID="rgrntAnn3" Text='<%# Eval("Annulus3") %>' NumberFormat-DecimalDigits="0" Width="40px" MaxValue="9999" />

</ItemTemplate>

</tel:GridTemplateColumn>

<tel:GridTemplateColumn HeaderText="Annulus 4" UniqueName="Annulus4" >

<ItemTemplate>

<tel:RadNumericTextBox runat="server" ID="rgrntAnn4" Text='<%# Eval("Annulus4") %>' NumberFormat-DecimalDigits="0" Width="40px" MaxValue="9999" />

</ItemTemplate>

</tel:GridTemplateColumn>

<tel:GridTemplateColumn HeaderText="Annulus 5" UniqueName="Annulus5" >

<ItemTemplate>

<tel:RadNumericTextBox runat="server" ID="rgrntAnn5" Text='<%# Eval("Annulus5") %>' NumberFormat-DecimalDigits="0" Width="40px" MaxValue="9999" />

</ItemTemplate>

</tel:GridTemplateColumn>

<tel:GridTemplateColumn HeaderText="Annulus 6" UniqueName="Annulus6" >

<ItemTemplate>

<tel:RadNumericTextBox runat="server" ID="rgrntAnn6" Text='<%# Eval("Annulus6") %>' NumberFormat-DecimalDigits="0" Width="40px" MaxValue="9999" />

</ItemTemplate>

</tel:GridTemplateColumn>

<tel:GridTemplateColumn HeaderText="Annulus 7" UniqueName="Annulus7" >

<ItemTemplate>

<tel:RadNumericTextBox runat="server" ID="rgrntAnn7" Text='<%# Eval("Annulus7") %>' NumberFormat-DecimalDigits="0" Width="40px" MaxValue="9999" />

</ItemTemplate>

</tel:GridTemplateColumn>

<tel:GridTemplateColumn HeaderText="Annulus 8" UniqueName="Annulus8" >

<ItemTemplate>

<tel:RadNumericTextBox runat="server" ID="rgrntAnn8" Text='<%# Eval("Annulus8") %>' NumberFormat-DecimalDigits="0" Width="40px" MaxValue="9999" />

</ItemTemplate>

</tel:GridTemplateColumn>

<tel:GridTemplateColumn HeaderText="Edge" UniqueName="Edge" >

<ItemTemplate>

<tel:RadNumericTextBox runat="server" ID="rgrntEdge" Text='<%# Eval("Edge") %>' NumberFormat-DecimalDigits="0" Width="40px" MaxValue="9999" />

</ItemTemplate>

</tel:GridTemplateColumn>

</Columns>

<NoRecordsTemplate>

Select a file to see what data will be imported into this view.

</NoRecordsTemplate>

</MasterTableView>

</tel:RadGrid>

3 Answers, 1 is accepted

answered on 26 Mar 2012, 06:15 PM

The table-layout is not the problem. changing that to fixed only makes them all the same size, it doesn't change the width of the whole grid. The problem is that the Grid is automatically generating the width value for the div, not the table, and setting it too large. When I remove the "width:2209px;" from the div style, it displays perfectly. Is there any way to prevent the Grid from trying to run it's own static width calculation?

I've added onload javascript to remove this attribute from the div for now, but this is suboptimal as it will briefly show the incorrect layout before correcting itself. Why doesn't the RadGrid seem to obey my Width="100%" property?