Grid dynamic column width

[Baal]

Hi,

I have a skeleton RadGrid on my page.

<telerik:RadGrid ID="rg" runat="server" CellPadding="2" CellSpacing="2" AutoGenerateColumns="false" EnableViewState="true"
    AllowPaging="true" PageSize="25" AllowSorting="true" AllowMultiRowSelection="true" AllowCustomPaging="true"
    OnNeedDataSource="rg_NeedDataSource" OnSortCommand="rg_SortCommand"
    OnItemDataBound="rg_ItemDataBound">
    <PagerStyle Mode="NextPrevNumericAndAdvanced" Position="Bottom" AlwaysVisible="True" />
    <ClientSettings EnableRowHoverStyle="true">
        <Selecting AllowRowSelect="true"></Selecting>
        <ClientEvents OnRowSelected="RowSelected" OnRowDeselected="RowDeselected" />
    </ClientSettings>
</telerik:RadGrid>

On the page, when user selects the columns to see then it creates the columns dynamically.

private void DesignRadGrid()
{
    rg.MasterTableView.AllowMultiColumnSorting = true;


    var lPropertyInfo = typeof(MyObject).GetProperties(BindingFlags.Public | BindingFlags.Instance).ToList();

    var vColumns = from col in GetUserSelectedColumns() // return type is GridColumns
                    join pi in lPropertyInfo on col.ColumnName equals pi.Name
                    select new
                    {
                        col.ColumnId,
                        col.ColumnName,
                        col.DataType,
                        col.DisplayColumn,
                        col.ParentTable,
                        col.ParentColumn
                    };

    var width = 0;
    foreach (var oColumn in vColumns)
    {
        var boundColumn = new GridBoundColumn();
        GridTemplateColumn templateColumn = null;

        switch (oColumn.DataType)
        {
            case "Number":
                var isUnitized = UnitSystem.CheckIfUnitized(oColumn.ParentTable, oColumn.ParentColumn);

                // if isUnitized then we need template column
                if (isUnitized)
                {
                    boundColumn = null;

                    var unitLabel = UnitSystem.GetUnitLabel(oColumn.ParentTable, oColumn.ParentColumn, UserId);

                    templateColumn = new GridTemplateColumn
                                        {
                                            HeaderText = String.Format("{0} ({1})", oColumn.ColumnName, unitLabel)
                                        };

                    hdnColumnId.Value += "," + oColumn.ColumnId;
                }
            break;


            case "Date":
                boundColumn.DtaFormatString = "{0:dd-MMM-yyyy}";
                width = 75;
            break;


            case "Boolean"
                boundColumn = null;
                templateColumn = new GridTemplateColumn();

                hdnColumnId.Value += "," + oColumn.ColumnId;
            break;


            case "Text":
                if (oColumn.ColumnName.EndsWith("Remarks") || oColumn.ColumnName.EndsWith("Summary"))
                    width = 650;
            break;
        }


        // For sorting to work, the columns must be added to the rg collection before defining the properties
        // Telerik: Can you answer why?
        if (templateColumn == null)
        {
            rg.MasterTableView.Columns.Add(boundColumn);

            boundColumn.HeaderText = oColumn.ColumnName;
            boundColumn.SortExpression = oColumn.Name;
            boundColumn.DataField = oColumn.Name;

            if (width > 0)
                boundColumn.HeaderStyle.Width = width;

            //if (width > 0)
                //boundColumn.HeaderStyle.Width = Unit.Pixex(width);
        }
        else
        {
            rg.MasterTableView.Columns.Add(templateColumn);

            templateColumn.HeaderText = String.IsNullOrEmpty(templateColumn.HeaderText)
                                            ? oColumn.ColumnName
                                            : templateColumn.HeaderText;
            templateColumn.SortExpression = oColumn.Name;
            templateColumn.ItemTemplate = new MyTemplate(MyControlType.LiteralControl, "lit" + oColumn.ColumnId.ToString);

            if (width > 0)
                templateColumn.HeaderStyle.Width = width;

            //if (width > 0)
                //templateColumn.HeaderStyle.Width = Unit.Pixex(width);
        }
    }

    var gridCheckBoxColumn = new GridClientSelectColumn { HeaderText = String.Empty, UniqueName = "Select" };
    gridCheckBoxColumn.ItemStyle.HorizontalAlign = HorizontalAlign.Center;
    rg.MasterTableView.Columns.Add(gridCheckBoxColumn);

    var editTemplateColumn = new GridTemplateColumn();
    editTemplateColumn.ItemTemplate = new MyTemplate(MyControlType.ImageButton, "ibEdit");
    editTemplateColumn.ItemStyle.HorizontalAlign = HorizontalAlign.Center;
    editTemplateColumn.UniqueName = "Edit";
    rg.MasterTableView.Columns.Insert(0, editTemplateColumn);
}



// Class for Custom Template
public enum MyControlType
{
    Button = 0,
    ImageButton = 1,
    LiteralControl = 2
}

public class MyTemplate : ITemplate
{
    protected Control _ctrl;
    private MyControlType _ctrlType;
    private string _ctrlName;

    public MyTemplate (MyControlType ctrlType, string ctrlName)
    {
        _ctrlType = ctrlType;
        _ctrlName = ctrlName;
    }

    public void InstantiateIn(Control container)
    {
        switch (_ctrlType)
        {
            case MyControlType.Button:
                _ctrl = new Button {ID = _ctrlName};
                break;
            case MyControlType.ImageButton:
                _ctrl = new ImageButton {ID = _ctrlName};
                break;
            case MyControlType.LiteralControl:
                _ctrl = new LiteralControl {ID = _ctrlName};
                break;
        }

        _ctrl.EnableViewState = true;
        container.Controls.Add(_ctrl);
    }
}

I copied the above code from my VS to show only what I am trying to achieve. There might be typos or class name mistype because it is not clean copy/paste. Please ignore if any.

Anyway, my concern is that even if I define the width manually, it doesn't reflect in grid. I've tried setting width as Unit.Pixel and directly with value but both doesn't work.

Thanks.

[Eyup]

Hello Baal,

I have created a sample RadGrid web site to demonstrate that resizing the width of dynamically created columns work as expected. Please check out the attached application and try to distinguish the crucial differences between our projects.

While analyzing the provided code I have noticed that you are declaring template columns. Please note that creating columns in the Page_Load event handler does not work for template columns. For the controls inside a template to persist their ViewState, the grid must be generated completely in the code-behind using the Page_Init event. Please refer to the following topic for further details:
 Programmatic Creation

Kind regards,
Eyup
the Telerik team

[Baal]

Thanks, but this did not work for me. I was busy with other things as well and this on low priority.

I guess I'll try taking out the template columns as there's only a few such out there now. This way I'll have only bound columns.

I'll post when I try it out.

Thanks.