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
1 Answer, 1 is accepted
0
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:
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.
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.