Grid width with dynamically added columns

3 posts, 0 answers
  1. Wendelstam
    Wendelstam avatar
    48 posts
    Member since:
    Feb 2006

    Posted 03 May 2010 Link to this post

    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> 
  2. Wendelstam
    Wendelstam avatar
    48 posts
    Member since:
    Feb 2006

    Posted 04 May 2010 Link to this post

    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?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 07 May 2010 Link to this post

    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"
       
    <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.
Back to Top