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

RadGrid cssclass override ?

1 Answer 461 Views

Grid

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

francis asked on 24 Mar 2010, 02:31 PM

3.jpg

2.jpg

1.jpg

Hi,

I am using the radgrid and have enabled the client side property EnableRowHoverStyle to true.
It works fine but the grid contains some columns where in i have set a background color to it .
On mouse over of the row the coloured columns get clipped at the bottom (IE7) and in mozilla it does not hover over these colors at all. Refer to screenshot 1,3.
Also i have OnItemDataBound of the grid set the

e.Item.CssClass =

"";
so that i get the view a compact one.
It works fine .
But when i go to the edit mode the edited row also get hovered.Before i could set the Row cssclass to empty it used to work fine.But now it hovers over the edited row too.
I do not want the edited row to be hovered.So i checked the cssClass of the previous implementation and found that rgEditForm was used i tried using this but on hover the input field accumilates space Refer to screenshot 2

How do i use my own cssClass where do i have to write the css class the control is in a ascx page.?

Thanks & Regards,
Francis P.

1 Answer, 1 is accepted

answered on 25 Mar 2010, 10:20 AM

Hi Francis,

Here is a demo, which shows how to preserve the RadGrid hover/selected backgrounds with using custom BackColor for columns. In addition, a CSS rule has been added, which removes the vertical paddings from edit row 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 = 4;

int rowsNum = 6;

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>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<style type="text/css">

.RadGrid_Default .rgSelectedRow td,

.RadGrid_Default .rgActiveRow td,

.RadGrid_Default .rgHoveredRow td

{

background-color:transparent !important;

}

div.RadGrid_Default .rgEditRow td

{

padding-top:0;

padding-bottom:0;

}

</style>

</telerik:RadCodeBlock>

</head>

<body>

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

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

<telerik:RadGrid

ID="RadGrid1"

runat="server"

AutoGenerateColumns="false"

AutoGenerateEditColumn="true"

OnNeedDataSource="RadGrid_NeedDataSource">

<MasterTableView>

<Columns>

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

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

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

<ItemStyle BackColor="#EEEEFF" />

</telerik:GridBoundColumn>

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

</Columns>

</MasterTableView>

<ClientSettings EnableRowHoverStyle="true">

<Selecting AllowRowSelect="true" />

</ClientSettings>

</telerik:RadGrid>

</form>

</body>

</html>

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.