Grid column width

[Andrew]

The column width on the Telerik Grid have plagued me for some time now. I could never set the width of the column inline for some reason.

This evening I have finally figured out what is causing my issue, and I wanted to share just in case anyone else was having this problem.

Let us take the following Grid for example;

<telerik:RadGrid ID="PersonListingRadGrid" runat="server" Height="500px" Width="500px" DataSourceID="ThisDataSource">
    <ClientSettings>
        <Scrolling AllowScroll="true" ScrollHeight="552px" UseStaticHeaders="true"/>
    </ClientSettings>
    <MasterTableView DataKeyNames="ID" DataSourceID="ThisDataSource" AutoGenerateColumns="False">
        <Columns>
            <telerik:GridBoundColumn DataField="ID" ReadOnly="True" HeaderText="ID" SortExpression="ID" UniqueName="ID" DataType="System.Guid" FilterControlAltText="Filter ID column" Display="false">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="DisplayName" HeaderText="DisplayName" SortExpression="DisplayName" UniqueName="DisplayName" FilterControlAltText="Filter ID column">
                <HeaderStyle Width="75%" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="BirthDate" HeaderText="BirthDate" SortExpression="BirthDate" UniqueName="BirthDate" DataType="System.DateTime" FilterControlAltText="Filter BirthDate column">
                <HeaderStyle Width="25%" />
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

 

Notice that the first column(ID) is set to Display="false", the second and third columns both have widths, 75% and 25% respectively. If you were to run the application with the Grid the way it is, the column widths that you desire will not display correctly. When the page loads your grid will display your two columns but the problem is, your DisplayName column will be the wrong width.

The reason?

If you have to use a column in your grid, but you do not want it to display; you HAVE to put that column BENEATH the columns you wish to display. What I noticed was, in my mastertableview column stack, I had two hidden columns above the rest of my columns. The third column in the stack was the first column I styled, but for some reason it wasn't styled when I ran the application. When it displayed, my desired column was not styled but the third column was!

The columns are indexed based, and if you have set a column's display to false then they are not counted in the index. So you may have styled your third column in the markup, but when it was time to compile, the index of that column changed. The index of the styling however did not.