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

Grid row background colour confliction

7 Answers 96 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Megan
Top achievements
Rank 1
Megan asked on 16 Sep 2008, 08:30 AM
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.

7 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 16 Sep 2008, 10:25 AM
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
0
Megan
Top achievements
Rank 1
answered on 17 Sep 2008, 10:18 AM
Do you have the VB.NET code for this? It errored out when I tried putting it through a translator.
0
Dimo
Telerik team
answered on 17 Sep 2008, 10:37 AM
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.
0
Steve Todd
Top achievements
Rank 1
answered on 11 Jun 2009, 09:02 AM

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

0
Dimo
Telerik team
answered on 11 Jun 2009, 09:26 AM
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.
0
Steve Todd
Top achievements
Rank 1
answered on 11 Jun 2009, 09:56 AM
Thanks for the quick reply, however is hasn't worked.

Who shall I email a copy of the page to?

Steve
0
Dimo
Telerik team
answered on 11 Jun 2009, 11:33 AM
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.
Tags
Grid
Asked by
Megan
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Megan
Top achievements
Rank 1
Dimo
Telerik team
Steve Todd
Top achievements
Rank 1
Share this question
or