RadGrid column width

3 posts, 0 answers
  1. Ashish
    Ashish avatar
    2 posts
    Member since:
    Apr 2009

    Posted 02 Apr 2009 Link to this post

    Hi,

    I am facing width issue in the talrik RadGrid. Can I have the width for some of the columns in grid in percentage and some in pixels. When I am doing this the column which has width in pixels in not behaving correctly means I have given 100px and it is showing 70px. Here table has 100% width. So should I give all the column width in percentage or pixels and if i want to fix the width for some of the columns in grid then what should I do.
    Please suggest.

    Regards,
    Ashish

  2. Dimo
    Admin
    Dimo avatar
    7317 posts
    Member since:
    Sep 2012

    Posted 02 Apr 2009 Link to this post

    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.

  3. Ashish
    Ashish avatar
    2 posts
    Member since:
    Apr 2009

    Posted 02 Apr 2009 Link to this post

    Hey Dimo,Thanks a lot for the solution.

Back to Top