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

Grid dynamic column width

2 Answers 71 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Baal
Top achievements
Rank 1
Baal asked on 27 Jun 2012, 02:12 PM
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.

2 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 29 Jun 2012, 01:42 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Baal
Top achievements
Rank 1
answered on 20 Jul 2012, 04:02 PM
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.
Tags
Grid
Asked by
Baal
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Baal
Top achievements
Rank 1
Share this question
or