I'm attempting to utilize the client side functions of the RadGrid to
indicate to users viewing a grid of items they currently "have" (pre-selected when databinding on the server side), and
items they are attempting to "add". To do this my idea was to have the
grid show all possible items and have a checkbox column for selecting
rows. The items that the user already has are pre-selected (the
checkbox is checked and the row is highlighted in the default
rowSelected style). All of that works so far. What I want to
happen is have any additional rows that are selected to have a different
highlight color. I've hooked up the RowSelected function and tried
using jQuery to add a class to the newly selected row, but that doesn't
seem to do much. Using the IE Developer toolbar or Firebug, I can see
that the new css class gets added to the selected row but the background
color doesn't change. In other words what I want to do is have one
style for "pre-selected" rows and another style for rows selected by the
user. Is there a way to do this? I've attached a screenshot with a visual explanation of what I'm attempting. Here is my code so far:
ASPX:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridRowColors.aspx.cs" Inherits="TestTelerik.GridRowColors" %>
<!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">
<title></title>
<style type="text/css">
.rgSelectedRow, .rgSelectedRow td
{
background-color: #c5c5c5;
background-image: none;
}
.add {
background-color: green;
}
</style>
<script type="text/javascript">
function RowDeselected(sender, eventArgs) {
var row = eventArgs.get_gridDataItem();
$(row.get_element()).removeClass("add");
}
function RowSelected(sender, eventArgs) {
var row = eventArgs.get_gridDataItem();
$(row.get_element()).addClass("add");
}
function RowCreated(sender, eventArgs) {
}
function pageLoad() {
//colorRows();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<div>
<telerik:RadGrid ID="RadGrid1" AllowMultiRowSelection="true" Width="700px" Skin="Outlook"
runat="server" AllowSorting="false" GridLines="None" AutoGenerateColumns="false" ShowGroupPanel="true">
<MasterTableView>
<Columns>
<telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" ItemStyle-Width="20px" />
<telerik:GridBoundColumn DataField="DataId" HeaderText="ID" ItemStyle-Width="200px" />
<telerik:GridBoundColumn DataField="DataName" HeaderText="Description" />
</Columns>
</MasterTableView>
<ClientSettings EnableRowHoverStyle="false">
<Selecting AllowRowSelect="true" UseClientSelectColumnOnly="true" />
<ClientEvents OnRowDeselected="RowDeselected" OnRowSelected="RowSelected" OnRowCreated="RowCreated" />
</ClientSettings>
</telerik:RadGrid>
</div>
</form>
</body>
</html>
Code behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections;
namespace TestTelerik
{
public partial class GridRowColors : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ArrayList myDataItems = new ArrayList();
for (int i = 1; i <= 10; i++)
{
myDataItems.Add(new MyDataItem(i, "Item " + i));
}
RadGrid1.DataSource = myDataItems;
RadGrid1.DataBind();
// select some default rows - items the user already "has"
RadGrid1.Items[5].Selected = true;
RadGrid1.Items[7].Selected = true;
}
}
}
public class MyDataItem
{
public int DataId { get; set; }
public string DataName { get; set; }
public MyDataItem(int dataId, string dataName)
{
DataId = dataId;
DataName = dataName;
}
}
}
ASPX:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridRowColors.aspx.cs" Inherits="TestTelerik.GridRowColors" %>
<!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">
<title></title>
<style type="text/css">
.rgSelectedRow, .rgSelectedRow td
{
background-color: #c5c5c5;
background-image: none;
}
.add {
background-color: green;
}
</style>
<script type="text/javascript">
function RowDeselected(sender, eventArgs) {
var row = eventArgs.get_gridDataItem();
$(row.get_element()).removeClass("add");
}
function RowSelected(sender, eventArgs) {
var row = eventArgs.get_gridDataItem();
$(row.get_element()).addClass("add");
}
function RowCreated(sender, eventArgs) {
}
function pageLoad() {
//colorRows();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<div>
<telerik:RadGrid ID="RadGrid1" AllowMultiRowSelection="true" Width="700px" Skin="Outlook"
runat="server" AllowSorting="false" GridLines="None" AutoGenerateColumns="false" ShowGroupPanel="true">
<MasterTableView>
<Columns>
<telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" ItemStyle-Width="20px" />
<telerik:GridBoundColumn DataField="DataId" HeaderText="ID" ItemStyle-Width="200px" />
<telerik:GridBoundColumn DataField="DataName" HeaderText="Description" />
</Columns>
</MasterTableView>
<ClientSettings EnableRowHoverStyle="false">
<Selecting AllowRowSelect="true" UseClientSelectColumnOnly="true" />
<ClientEvents OnRowDeselected="RowDeselected" OnRowSelected="RowSelected" OnRowCreated="RowCreated" />
</ClientSettings>
</telerik:RadGrid>
</div>
</form>
</body>
</html>
Code behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections;
namespace TestTelerik
{
public partial class GridRowColors : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ArrayList myDataItems = new ArrayList();
for (int i = 1; i <= 10; i++)
{
myDataItems.Add(new MyDataItem(i, "Item " + i));
}
RadGrid1.DataSource = myDataItems;
RadGrid1.DataBind();
// select some default rows - items the user already "has"
RadGrid1.Items[5].Selected = true;
RadGrid1.Items[7].Selected = true;
}
}
}
public class MyDataItem
{
public int DataId { get; set; }
public string DataName { get; set; }
public MyDataItem(int dataId, string dataName)
{
DataId = dataId;
DataName = dataName;
}
}
}
1 Answer, 1 is accepted
0
Hello EricB,
It seems that you have opened a thread, which is a duplicate to the support ticket opened on the matter. The support ticket has already been answered. To avoid duplicate posts, we can continue our communication there. Additionally I am pasting the answer here:
To achieve the desired functionality you need to use the following css selectors:
All the best,
Radoslav
the Telerik team
It seems that you have opened a thread, which is a duplicate to the support ticket opened on the matter. The support ticket has already been answered. To avoid duplicate posts, we can continue our communication there. Additionally I am pasting the answer here:
To achieve the desired functionality you need to use the following css selectors:
<style type="text/css"> .rgSelectedRow, .rgSelectedRow td { background-color: #c5c5c5; background-image: none; } .add td { background-color: green; }</style>All the best,
Radoslav
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!