Radgrid layout - seperate command bar

2 posts, 0 answers
  1. Erik
    Erik avatar
    314 posts
    Member since:
    Feb 2008

    Posted 09 Sep 2009 Link to this post


    I've got a question regarding grid layout/css:

    My client wants the command item bar on top to be a transparent one. Also he wants everything under it to have a border around it (so header, grouping, rows, footers edc) So, except for the command bar, the grid must have a border.

    I've tried so, but thecommand bar and the column groups are in the same table, other tr's, the column headers are not in a seperated element, so i can set the left, top an right borders of the columns row.

    Regards, Erik
  2. Dimo
    Dimo avatar
    8318 posts

    Posted 10 Sep 2009 Link to this post

    Hi Proovit,

    The required technique to achieve the desired look may vary, according to the RadGrid skin, the control's configuration and your preferences. Here is an example:

    <%@ Page Language="C#" %> 
    <%@ Import Namespace="System.Data" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    <script runat="server"
        protected void RadGrid_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); 
            (sender as RadGrid).DataSource = dt
        protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e) 
            if (e.Item is GridDataItem) 
                (e.Item as GridDataItem)["Column1"].CssClass = "LeftBorder"
                (e.Item as GridDataItem)["Column4"].CssClass = "RightBorder"
            else if (e.Item is GridHeaderItem) 
                (e.Item as GridHeaderItem)["Column1"].CssClass = "rgHeader LeftBorder"
                (e.Item as GridHeaderItem)["Column4"].CssClass = "rgHeader RightBorder"
    <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"
    /*remove some styles*/ 
        border-width:0 0 1px; 
    div.RadGrid_Default .rgCommandRow 
        background:none transparent; 
    div.RadGrid_Default .rgCommandTable 
    div.RadGrid_Default .rgCommandCell 
    /*add some styles*/ 
    div.RadGrid_Default .rgMasterTable .LeftBorder 
        border-left:1px solid #828282; 
    div.RadGrid_Default .rgMasterTable .RightBorder 
        border-right:1px solid #828282; 
    <form id="form1" runat="server"
    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        <MasterTableView CommandItemDisplay="Top" /> 

    All the best,
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. DevCraft R3 2016 release webinar banner
Back to Top