Grid row background colour confliction

[Megan]

I have a grid with the Web20 skin and client side selection enabled. So when a user clicks on a row it changes the background to a green colour.

I also have logic to change the colour of the row background to red when the status column is 'requested' or 'verified'.

The problem is the skin's green colour is overshadowed by the red when you select a row that already has a colour:

http://img165.imageshack.us/img165/8959/statusgridbd1.jpg


I want to know if there is a property I can use to override the style so users can still see the selection they've made if the background already has a colour, maybe by having a different colour to that green to show they've selected a row that has a colour.

[Princy]

Hi Megan,

Try the following javascript code to set the row to desired  color on  client selection using chckbox.

function RowSelected(sender, eventArgs)
 {
   var grid = $find("<%=RadGrid1.ClientID %>");
   var MasterTable = grid.get_masterTableView();
   var selectedRows = MasterTable.get_selectedItems();
   for (var i = 0; i < selectedRows.length; i++)
   {

     var row = selectedRows[i];
     var cell = MasterTable.getCellByColumnUniqueName(row, "Status")
     if(cell.innerHTML=="verified")
      //set the row style to combined color
   }
 }

Thanks,
Princy

[Megan]

Do you have the VB.NET code for this? It errored out when I tried putting it through a translator.

[Dimo]

Hello Megan,

The code provided by Princy is Javascript and is not supposed to have a VB version.

Actually, there is more simple solution to your problem, which does not require client-side scripting. You should add the following CSS rule to your web application stylesheet:


.SelectedRow_Web20
{
    background: #DCFC5C  !important;
}


Sincerely yours,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Steve Todd]

I have the same problem as described here. The skin used is outlook so I inserted the css class into the header of the page however the top half of the selected row is still overlayed with the header style. The grid lines wrap which may have an effect on the style. Any ideas?

	<style type="text/css">
	.SelectedRow_Outlook
	{
	background: #DCFC5C  !important;
	}
	</style>

The grid is defined as below

	<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True"
	GridLines="None" Skin="Outlook"
	DataSourceID="SqlDataSource1" onitemcommand="RadGrid1_ItemCommand"
	onprerender="RadGrid1_PreRender"
	>
	<HeaderContextMenu EnableTheming="True">
	<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
	</HeaderContextMenu>
	<MasterTableView AutoGenerateColumns="False" DataSourceID="SqlDataSource1">
	<RowIndicatorColumn>
	<HeaderStyle Width="20px"></HeaderStyle>
	</RowIndicatorColumn>
	<ExpandCollapseColumn>
	<HeaderStyle Width="20px"></HeaderStyle>
	</ExpandCollapseColumn>
	<Columns>
	<telerik:GridBoundColumn DataField="DocTable" HeaderText="Table"
	visible="False" ReadOnly="True" SortExpression="DocTable"
	UniqueName="DocTable">
	</telerik:GridBoundColumn>
	<telerik:GridBoundColumn DataField="SubType" HeaderText="Type"
	ReadOnly="True" SortExpression="SubType" UniqueName="SubType">
	</telerik:GridBoundColumn>
	<telerik:GridBoundColumn DataField="No_" HeaderText="No" ReadOnly="True"
	SortExpression="No_" UniqueName="No_">
	</telerik:GridBoundColumn>
	<telerik:GridBoundColumn DataField="Serial No" HeaderText="Serial No"
	visible="False" ReadOnly="True" SortExpression="Serial No"
	UniqueName="Serial No">
	</telerik:GridBoundColumn>
	<telerik:GridBoundColumn DataField="Make" HeaderText="Make" ReadOnly="True"
	visible="False" SortExpression="Make" UniqueName="Make">
	</telerik:GridBoundColumn>
	<telerik:GridBoundColumn DataField="Model" HeaderText="Model" ReadOnly="True"
	visible="False" SortExpression="Model" UniqueName="Model">
	</telerik:GridBoundColumn>
	<telerik:GridBoundColumn DataField="Sell-to Customer No_"
	HeaderText="Sell-to Customer No_" ReadOnly="True"
	SortExpression="Sell-to Customer No_" UniqueName="Sell-to Customer No_">
	</telerik:GridBoundColumn>
	<telerik:GridBoundColumn DataField="Sell-to Customer Name"
	HeaderText="Sell-to Customer Name" ReadOnly="True"
	SortExpression="Sell-to Customer Name" UniqueName="Sell-to Customer Name">
	</telerik:GridBoundColumn>
	<telerik:GridBoundColumn DataField="Sell-to Address"
	HeaderText="Sell-to Address" ReadOnly="True" SortExpression="Sell-to Address"
	UniqueName="Sell-to Address">
	</telerik:GridBoundColumn>
	<telerik:GridBoundColumn DataField="Sell-to City" HeaderText="Sell-to City"
	ReadOnly="True" SortExpression="Sell-to City" UniqueName="Sell-to City">
	</telerik:GridBoundColumn>
	<telerik:GridBoundColumn DataField="Sell-to Post Code"
	HeaderText="Sell-to Post Code" ReadOnly="True"
	SortExpression="Sell-to Post Code" UniqueName="Sell-to Post Code">
	</telerik:GridBoundColumn>
	<telerik:GridBoundColumn DataField="Sell-to Contact"
	HeaderText="Sell-to Contact" ReadOnly="True" SortExpression="Sell-to Contact"
	UniqueName="Sell-to Contact">
	</telerik:GridBoundColumn>
	<telerik:GridBoundColumn DataField="Order Date" DataType="System.DateTime"
	HeaderText="Order Date" ReadOnly="True" SortExpression="Order Date"
	UniqueName="Order Date">
	</telerik:GridBoundColumn>
	<telerik:GridBoundColumn DataField="Salesperson Code"
	HeaderText="Salesperson Code" ReadOnly="True" SortExpression="Salesperson Code"
	UniqueName="Salesperson Code">
	</telerik:GridBoundColumn>
	<telerik:GridBoundColumn DataField="DocStatus" HeaderText="DocStatus"
	ReadOnly="True" SortExpression="DocStatus" UniqueName="DocStatus">
	</telerik:GridBoundColumn>
	</Columns>
	</MasterTableView>
	<ClientSettings EnablePostBackOnRowClick="True">
	<Selecting AllowRowSelect="True" />
	</ClientSettings>
	<FilterMenu EnableTheming="True">
	<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
	</FilterMenu>
	</telerik:RadGrid>

Regards

Steve

[Dimo]

Hi Steve,

Try using the following CSS rule:

tr.SelectedRow_Outlook 
{ 
    background:none #DCFC5C  !important; 
} 

If the issue persists, please send us a complete runnable web page with all relevant custom CSS styles included.

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Steve Todd]

Thanks for the quick reply, however is hasn't worked.

Who shall I email a copy of the page to?

Steve

[Dimo]

Hello Steve,

Please open a formal support ticket, you can attach files there.

Kind regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.