Currently Telerik RadGrid does not support cell selection/highlight out-of-the-box. However, there is a pretty straightforward way to integrate this feature in your grid object. Here are the steps you need to undertake to support this functionality:
- wire the OnRowCreated client event of the grid;
- iterate through the cells of the currently created row;
- for each cell in the cells collection of this row attach onmouseover/onmouseout/onclick events
- in each handler of these events, switch the className property of the cell to change its visual presentation on mouse over/mouse out/mouse click.
| ASPX/ASCX |
 Copy Code |
|
<head>
.HoverClass
{
background-color: aqua;
}
.DefaultClass
{
background-color: white;
}
.ClickClass
{
background-color: blue;
}
</head>
.......
<rad:radgrid id="RadGrid1" runat="server" Skin="None">
<MasterTableView AutoGenerateColumns="True" />
<ClientSettings ApplyStylesOnClient="True">
<ClientEvents OnRowCreated="RowCreated"></ClientEvents>
</ClientSettings>
</rad:radgrid>
<script language="javascript">
function RowCreated(row)
{
for(var i = 0; i < row.Control.cells.length; i++)
{
row.Control.cells[i].onmouseover = function()
{
this.className = "HoverClass";
};
row.Control.cells[i].onmouseout = function()
{
if(!this.selected)
{
this.className = "DefaultClass";
}
else
{
var cssName = this.selected ? "HoverClass" : "DefaultClass"
this.className = cssName;
return;
}
};
row.Control.cells[i].onclick = function()
{
this.selected = this.selected == true ? false : true;
this.className = "ClickClass";
}
}
}
</script> |