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

Setting RadGrid Border CSS For Specfic Columns

5 Answers 846 Views

Grid

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

5 Answers, 1 is accepted

Accepted

answered on 23 Mar 2010, 05:19 PM

Hello Derek,

Please review the following demo:

<%@ 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 = 4;

int rowsNum = 30;

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</title>

<style type="text/css">

/*remove RadGrid vertical borders*/

div.RadGrid_WebBlue .rgHeader,

div.RadGrid_WebBlue th.rgResizeCol,

div.RadGrid_WebBlue .rgRow td,

div.RadGrid_WebBlue .rgAltRow td,

div.RadGrid_WebBlue .rgEditRow td

{

border-left-width:0;

border-right-width:0;

}

/*add RadGrid vertical border to a specific column*/

div.RadGrid_WebBlue th.LeftBorder,

div.RadGrid_WebBlue .rgRow td.LeftBorder,

div.RadGrid_WebBlue .rgAltRow td.LeftBorder,

div.RadGrid_WebBlue .rgEditRow td.LeftBorder

{

border-left-width:1px;

border-right-width:1px;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid

ID="RadGrid1"

runat="server"

Width="800px"

Skin="WebBlue"

AllowPaging="true"

AutoGenerateColumns="false"

OnNeedDataSource="RadGrid_NeedDataSource">

<ClientSettings EnableAlternatingItems="false" />

<MasterTableView>

<Columns>

<telerik:GridBoundColumn DataField="Column1" HeaderText="Column 1" />

<telerik:GridBoundColumn DataField="Column2" HeaderText="Column 2" />

<telerik:GridBoundColumn DataField="Column3" HeaderText="Column 3">

<HeaderStyle CssClass="rgHeader LeftBorder" />

<ItemStyle CssClass="LeftBorder" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Column4" HeaderText="Column 4" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

</form>

</body>

</html>

Kind regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 27 Feb 2013, 03:47 PM

How do I set border CSS for specific columns when not using a skin? RadGrid_Default instead of RadGrid_WebBlue?

I want to set a left border on the leftmost column of a set of columns (not the leftmost column in the grid), & a right border on the rightmost column in the set (Not the rightmost column in the grid).

Using

/* Remove RadGrid vertical borders */

div.RadGrid_Default .rgHeader,

div.RadGrid_Default th.rgResizeCol,

div.RadGrid_Default .rgRow td,

div.RadGrid_Default .rgAltRow td,

div.RadGrid_Default .rgEditRow td

{

border-left-width:0;

border-right-width:0;

}

/* add RadGrid vertical border to a specific column*/

div.RadGrid_Default th.LeftBorder,

div.RadGrid_Default .rgRow td.LeftBorder,

div.RadGrid_Default .rgAltRow td.LeftBorder,

div.RadGrid_Default .rgEditRow td.LeftBorder

{

border-left-width:1px;

}

/* add RadGrid vertical border to a specific column*/

div.RadGrid_Default th.RightBorder,

div.RadGrid_Default .rgRow td.RightBorder,

div.RadGrid_Default .rgAltRow td.RightBorder,

div.RadGrid_Default .rgEditRow td.RightBorder

{

border-right-width:1px;

}

w/ "ItemStyle-CssClass="LeftBorder" "
or "HeaderStyle-CssClass="rgHeader LeftBorder""
(and RightBorder on the right column) isn't showing borders.

We have 2011.3.1305.40

Thank you!