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

RadGrid width way too big

3 Answers 827 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Devon
Top achievements
Rank 1
Devon asked on 23 Mar 2012, 06:19 PM
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

Sort by
0
Richard
Top achievements
Rank 1
answered on 26 Mar 2012, 06:03 PM
Devon:

It looks like you're RadGrid is set with table-layout: auto which means that column widths are calculated according to the content of the cells. So, what you're seeing is expected behavior.

You should reference the Resizing Columns documentation page for insights on containing grid width by using table-layout: fixed and fine-tuning the display of the RadGrid.

Hope this helps!
0
Devon
Top achievements
Rank 1
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?
0
Richard
Top achievements
Rank 1
answered on 26 Mar 2012, 07:09 PM
Devon:

I recommend that you handle the OnColumnResizing client event of the RadGrid and cancel it, if the new width exceeds the width of the parent div.

Another option is to set the ResizeGridOnColumnResize property to false to make the width of the RadGrid constant.

Regards,
Tags
Grid
Asked by
Devon
Top achievements
Rank 1
Answers by
Richard
Top achievements
Rank 1
Devon
Top achievements
Rank 1
Share this question
or