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

[Solved] RadGrid column width

2 Answers 4060 Views

Grid

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

2 Answers, 1 is accepted

answered on 02 Apr 2009, 01:22 PM

Hi Ashish,

It is possible to have column widths in pixels and percent at the same time, but you should make sure that the percentage widths and pixels widths are consistent - for example, the sum of all widths should match the width of the RadGrid or the MasterTableView.

Here is a simple page, that works as expected. You should keep in mind that the browser behavior with relation to column widths is different. Internet Explorer increases all column widths by the amount of table cell paddings, while the other browsers don't do that. As a result, the column widths in IE are visually larger. The solution for this is to use small or no left/right padding for the table cells.

    
            <%@ Page Language="C#" %> 
        
            <%@ Import Namespace="System.Data" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <script runat="server"> 
        
            protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) 
        
            { 
        
                DataTable dt = new DataTable(); 
        
                DataRow dr; 
        
                int colsNum = 5; 
        
                int rowsNum = 10; 
        
                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 for ASP.NET AJAX</title> 
        
            <style type="text/css"> 
        
            td,th{padding-left:0 !important;padding-right:0 !important} 
        
            .tb{border:0;padding:0} 
        
            </style> 
        
            </head> 
        
            <body> 
        
            <form id="form1" runat="server"> 
        
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
            <input type="text" value="150px" class="tb" style="width:150px;background:#fcc" /><input 
        
             type="text" value="100px" class="tb" style="width:100px;background:#fc3" /><input 
        
             type="text" value="120px" class="tb" style="width:120px;background:#f99" /><input 
        
             type="text" value="230px" class="tb" style="width:230px;background:#f93" /> 
        
            <p><strong>RadGrid total width: 600px</strong></p> 
        
            <telerik:RadGrid 
        
                ID="RadGrid1" 
        
                runat="server" 
        
                Width="600px" 
        
                Skin="Office2007" 
        
                AutoGenerateColumns="false" 
        
                OnNeedDataSource="RadGrid_NeedDataSource"> 
        
                <MasterTableView> 
        
                    <Columns> 
        
                        <telerik:GridBoundColumn DataField="Column1" HeaderText="25% = 150px" HeaderStyle-Width="25%" /> 
        
                        <telerik:GridBoundColumn DataField="Column2" HeaderText="100px" HeaderStyle-Width="100px" /> 
        
                        <telerik:GridBoundColumn DataField="Column3" HeaderText="20% = 120px" HeaderStyle-Width="20%" /> 
        
                        <telerik:GridBoundColumn DataField="Column4" HeaderText="230px" HeaderStyle-Width="230px" /> 
        
                    </Columns> 
        
                </MasterTableView> 
        
            </telerik:RadGrid> 
        
            </form> 
        
            </body> 
        
            </html>

Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.