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

    Hi,

    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
    Admin
    Dimo avatar
    8333 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" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <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); 
                } 
                dt.Rows.Add(dr); 
            } 
     
            (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"
            } 
        } 
         
    </script> 
     
    <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*/ 
     
    div.RadGrid_Default 
        border-width:0 0 1px; 
     
    div.RadGrid_Default .rgCommandRow 
        background:none transparent; 
     
    div.RadGrid_Default .rgCommandTable 
        border-bottom-color:#828282; 
     
    div.RadGrid_Default .rgCommandCell 
        border:0; 
     
    /*add some styles*/ 
     
    div.RadGrid_Default .rgMasterTable .LeftBorder 
        border-left:1px solid #828282; 
    div.RadGrid_Default .rgMasterTable .RightBorder 
        border-right:1px solid #828282; 
     
     
    </style> 
    </head> 
    <body> 
    <form id="form1" runat="server"
    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
     
    <telerik:RadGrid 
        ID="RadGrid1" 
        runat="server" 
        Width="600px" 
        OnNeedDataSource="RadGrid_NeedDataSource" 
        OnItemCreated="RadGrid1_ItemCreated"
        <MasterTableView CommandItemDisplay="Top" /> 
    </telerik:RadGrid> 
     
    </form> 
    </body> 
    </html> 



    All the best,
    Dimo
    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. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top