Grid width with dynamically added columns

[Wendelstam]

Hi.

I have a RadGrid (Q3 2009) that i add columns to dynamically at runtime.
My problem is that the total grid width is always 100% of the parent container and the columns are sized thereafter.

I would like the columns to have a size that has an "auto fit" to the content but when the column headers that in my case sometimes are quite long i would like to wrap them as well. But when I set the <HeaderStyle Wrap="true" /> the columns sometimes gets wrapped so that every single word is on a single line which looks really bad  (See attachment: croppercapture[1].png)
I would like to have a solution that provides MinWidth and MaxWidth type of values.

I have tried MasterTableView.TableLayout Fixed and Auto but without a decent result. Soo how can I make the grid to size its columns based on the content but still have wrapping but with more control. Can I do it in code behind, and perhaps use some kind of MeasureString() function to set the column size?

Any ideas how to solve my problem?

Thanks in advance.

//Johan

This is the markup.

        <telerik:RadGrid ID="RadGrid1" runat="server" OnColumnCreated="RadGrid1_ColumnCreated" AutoGenerateColumns="false" OnDataBound="RadGrid_DataBound" OnItemDataBound="RadGrid_ItemDataBound" OnNeedDataSource="RadGrid1_NeedDataSource"
            OnSortCommand="RadGrid_SortCommand" AllowSorting="True" BorderWidth="0px" CellPadding="0" AllowMultiRowSelection="True" Skin="Default" meta:resourcekey="RadGrid1Resource1" EnableViewState="False">
            <ItemStyle Height="10px" />
            <AlternatingItemStyle Height="10px" BackColor="#F8F9BC" />
            <MasterTableView EnableViewState="False" AutoGenerateColumns="false">
                <RowIndicatorColumn Visible="False" />
                <ExpandCollapseColumn Visible="False" />
            </MasterTableView>
            <HeaderStyle Font-Bold="True" Font-Size="X-Small" Wrap="True"  Height="20px" />
            <ClientSettings>
                <Selecting AllowRowSelect="True" />
                <Scrolling AllowScroll="True" UseStaticHeaders="true" />
            </ClientSettings>
        </telerik:RadGrid>

[Wendelstam]

As I understand it the grids colgroup's style specifies the auto calculated width for each columns but since my grid usually has a format that has a few short-named header with long string values in the cells and then long-named headers with short values in the cells like in the uploaded file [gridexample1.png].
And as you can see the format is a little akward and I havent figured out any good solutions since I dont know the number of columns in advance or their size (multi language issue) I cant set a predefined width either?

[Dimo]

Hi Johan,

When using static headers, you have two options with regard to the column widths:

1. Do not set any column widths, so that the MasterTableView's TableLayout is "Auto" and all columns widths are determined by the browser, according to the header/data content and enabled/disabled text wrapping.

2. Set all column widths explicitly. The TableLayout will be Fixed and content will wrap according to the column widths.

If you set only some column widths, the TableLayout will still be Fixed, but the columns with no widths will be equally wide and possibly not as wide as you wish.

I can suggest you the following modification of option (1) - use auto layout, but determine where the headers can wrap and where they cannot - use &nbsp; to prevent wrapping at specific places.

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 4;
        int rowsNum = 5;
        string colName = "Column";

        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }

        for (int i = 1; i <= rowsNum; i++)
        {
            dr = dt.NewRow();

            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
            }
            dt.Rows.Add(dr);
        }

        (sender as RadGrid).DataSource = dt;
    }

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid1_NeedDataSource"
    AllowSorting="True" Width="200px">
    <ClientSettings>
        <Selecting AllowRowSelect="True" />
        <Scrolling AllowScroll="True" UseStaticHeaders="true" />
    </ClientSettings>
    <MasterTableView>
        <Columns>
            <telerik:GridBoundColumn DataField="Column1" HeaderText="First&nbsp;Line Second&nbsp;Line" />
            <telerik:GridBoundColumn DataField="Column1" HeaderText="First&nbsp;Line&nbsp;First&nbsp;Line Second&nbsp;Line&nbsp;Second&nbsp;Line" />
            <telerik:GridBoundColumn DataField="Column1" HeaderText="First&nbsp;Line Second&nbsp;Line" />
            <telerik:GridBoundColumn DataField="Column1" HeaderText="First&nbsp;Line&nbsp;First&nbsp;Line Second&nbsp;Line&nbsp;Second&nbsp;Line" />
            <telerik:GridBoundColumn DataField="Column1" HeaderText="First&nbsp;Line Second&nbsp;Line" />
            <telerik:GridBoundColumn DataField="Column1" HeaderText="First&nbsp;Line&nbsp;First&nbsp;Line Second&nbsp;Line&nbsp;Second&nbsp;Line" />
            <telerik:GridBoundColumn DataField="Column1" HeaderText="First&nbsp;Line Second&nbsp;Line" />
            <telerik:GridBoundColumn DataField="Column1" HeaderText="First&nbsp;Line&nbsp;First&nbsp;Line Second&nbsp;Line&nbsp;Second&nbsp;Line" />
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

</form>
</body>
</html>

Greetings,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.