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

Styling RadGrid Selected RowColor

23 Answers 834 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Nirmal
Top achievements
Rank 1
Nirmal asked on 07 Jan 2010, 10:11 AM
Hai,
    I am using RadGridView, i have to change the selected rowcolor and rowcolor when mouseover(From LightOrange(default) to LightBlue). And also change the scroll color from Black(background) to White and scrollbar color from LightOrange to LightBlue(When Scroling).

Thanks in advance.
    

23 Answers, 1 is accepted

Sort by
0
Kalin Milanov
Telerik team
answered on 12 Jan 2010, 08:34 AM
Hello Nirmal,

You can use the RowStyle property of RadGridView to set the template of GridViewRow where you can change the colors to whatever you like (Light blue).

To change the ScrollViewer you will need to edit the template of RadGridView, find GridViewScrollViewer then edit its template. Once there you can modify the template of each ScrollBar to fit your case.

Greetings,
Kalin Milanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Jon
Top achievements
Rank 1
answered on 26 Jan 2010, 09:00 PM
Hi..
I'm not clear on how you change the SelectedRowStyle.... can you provide a quick example?
thanks again
0
Kalin Milanov
Telerik team
answered on 27 Jan 2010, 11:22 AM
Hello Jon The Nerd,

Please find the requested sample attached.

Sincerely yours,
Kalin Milanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Jon
Top achievements
Rank 1
answered on 27 Jan 2010, 01:37 PM
Hi..
Where in the code is the SelectedRow Color changed?
If I check on a row it turns Blue but when I change - click on another row the Blue dissappears...
If I select MultipleSelect to true - nothing happens

thanks again
0
Rod
Top achievements
Rank 1
answered on 27 Jan 2010, 02:06 PM
Hi,
In the sample you provided, the row is now blue. This is ok.
But the selected cell is always orange, and I can't find where to change this setting.

Thanks a lot for your response,

Rod
0
Kalin Milanov
Telerik team
answered on 27 Jan 2010, 02:42 PM
Hi Rod,

It is normal that the selected row only goes blue since it is selected. Once you select another row it will go blue and the first one goes back to its previous color.

If you want to change the background of all the rows when the grid is loaded use change the value of the background property in the style setter:

<Style x:Key="GridViewRowStyle" TargetType="Telerik_Windows_Controls_GridView:GridViewRow">
  <Setter Property="IsTabStop" Value="False"/>
  <Setter Property="Template" Value="{StaticResource GridViewRowTemplate}"/>
  <Setter Property="Background" Value="{StaticResource GridViewRowNormalBackground}"/>
  <Setter Property="BorderBrush" Value="{StaticResource GridLinesFill}"/>
  <Setter Property="MinHeight" Value="24"/>
  <Setter Property="FontWeight" Value="Normal"/>
  <Setter Property="Foreground" Value="{StaticResource GridViewForeground}"/>
</Style>

I hope this helps.

Greetings,
Kalin Milanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Rod
Top achievements
Rank 1
answered on 27 Jan 2010, 02:50 PM
Hi Kalin,

Thank you very much.
I am very ok with your post.

But my question was : What about th color of the Selected cell.
It remains Orange. Is there a way to change that ?

Thanks Again.

Rod

0
Jon
Top achievements
Rank 1
answered on 27 Jan 2010, 06:12 PM
Any luck...?
I'm still trying to set the Selected Row color... and font......    still defaults to the Orange.....  thanks
0
Helen
Top achievements
Rank 2
answered on 27 Jan 2010, 09:30 PM
Is what you want a selection mode so that the entire row is selected, not a cell?

I'd like that too.

Helen
0
Jon
Top achievements
Rank 1
answered on 27 Jan 2010, 11:37 PM
Yes... by default it  changes the selected row or rows to Orange...
I need all  the selected rows and fonts to change.....................................


why is this so difficult ?
0
Kalin Milanov
Telerik team
answered on 01 Feb 2010, 12:33 PM
Hello Jon The Nerd,

From what I gather there are several requests here.

1. Changing the color of the CurrentCell. The default is a bit lighter than the orange color of the selected row. To do that you will need to edit the template of the cell and change the color of the Current visual state. I have updated the sample to colorize the current cell in LightBlue color.

2. To select the entire row and not have the current cell displayed either remove the Current visual state or set the background of the cell to Transparent.

3. Changing the selected row background will affect all rows even with SelectionMode set to Multiple or Extended. To help you with that issue I will need a bit more information about your project and the task at hand. My advice is open a support ticket for that particular issue because it might not be related to changing colors in templates at all.

Greetings,
Kalin Milanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Marc Roussel
Top achievements
Rank 2
answered on 05 Mar 2010, 12:22 PM
Hi there.

I succeeded to style the Selected Row Background but there does't seem to have the GridViewRowSelectedForebround which
need to be white.  See the attached image

How do style it so I can bave the ground BLUE and the foreground WHITE for the selected row ?
0
Marc Roussel
Top achievements
Rank 2
answered on 05 Mar 2010, 12:32 PM
I don't know why but my attached file wasn't attached :(.  Here again
0
Marc Roussel
Top achievements
Rank 2
answered on 05 Mar 2010, 12:36 PM
And if I change the GridViewForeground, of course I get this :
Don't be fool here, I have 2 lines :)  But changing the GridViewForeground to white to accomodate my SelectedRow style,
I have the normal foreground of the grid to be write on white background.  DOH !

It's even worst if I select a cell on the selected row.
All in all, styling is great but is hard when we don't have just a little thing like

OurGridView.SelectedRow.Background = bla
OurGridView.SelectedRow.Foreground = bla at the startup of our application

This would be so great.


0
Kalin Milanov
Telerik team
answered on 09 Mar 2010, 12:21 PM
Hi Marc Roussel,

By the looks of it, it seems you have managed to solve the original issue.

As for the suggestion you are making - I cannot say it is not a valid one. We do have some concerns about it though. Think of all the states a grid row can be in (Normal, MouseOver, Selected, Invalid, Edit) multiply that by the number of elements (BorderBrush, Background, Foreground to name a few) and we have created a monster right there. :)

In no way does this mean we are not thinking about improving on the styling experience, we are just looking at the best way to do it.

If there is anything I can help you with in your styling efforts - let me know.

Kind regards,
Kalin Milanov
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.
0
Marc Roussel
Top achievements
Rank 2
answered on 12 Mar 2010, 02:28 PM
Hi,

I respect your opinion but I'm talking to change 2 properties of just one object, the SELETED ROW not the entire grid.
I don't know in deep your implementation but I don't understand how this would affect the rest of the grid ?

If this is as you said very complicated, think about us trying to figure out how to style a simple thing like this and having a so hard time to do it just to have a selected row with a different background color and a different foreground color.  God help us !

0
Matt WEyland
Top achievements
Rank 1
answered on 14 May 2010, 06:20 AM
I Think I figured this out, if I'm understanding the problem correctly, or at least one aspect of the problem.

Change foreground on cell content when Selected and When MouseOver on those cells.

This was odd, but not difficult.
You need to make changes to two styles; GridViewRowTemplate and GridViewAltRowTemplate

By modifying the states of the controls you can change the foreground of the DataCellsPresenter.  Here's one thing I found that you may want to keep in mind.  Apparently the foreground is handled on the mouseover and selected for Alternate rows.  I had to flip the two values around. 

For GridViewRowTemplate in the VisualStatemanager add this to the selected state storyboard.
<ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_DataCellsPresenter" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)">
<EasingColorKeyFrame Value="White"/>
</ColorAnimationUsingKeyFrames>

Add this to the MouseOver state
<ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_DataCellsPresenter" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)">
<EasingColorKeyFrame Value="Black"/>
</ColorAnimationUsingKeyFrames>

Then for the GridViewAltRowTemplate add same two values to the respective storyboards, then flip the two values around.

This will change the mouseover foreground to black and the selected foreground to White.

HTH.

mw
0
Marc Roussel
Top achievements
Rank 2
answered on 14 May 2010, 10:41 PM
Very , but very complicated thing just for a simple thing to do as I saw it with many other companies making grids. 
Changing colors of a selected row, is the most action done by designer to satisfy customers.

By having to work so much deep in styling just for that,  I prefer telling my customers that the third party I'm using is not capable of having the selected row just white on red.  They tend to say ok we'll live with it but man !!!!!!!
0
Jon
Top achievements
Rank 1
answered on 14 May 2010, 11:14 PM
Agreed... that's why I don't do it... but it's requested all the time.
0
Kalin Milanov
Telerik team
answered on 19 May 2010, 10:14 AM
Hello Jon,

As I wrote earlier we are looking into a way of providing such an option and we have quite a few ideas on how to go about it. We are currently experimenting with those and we are hopeful you will get a preview of what is to come soon.

Sincerely yours,
Kalin Milanov
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.
0
Jose
Top achievements
Rank 1
answered on 05 Mar 2012, 06:06 PM
Hi,
What about the property to do this more easily?
Is it implemented now?

Regards,
//Jose
0
James
Top achievements
Rank 1
answered on 07 May 2012, 06:08 AM
Hi,

We need this feature badly as well.  Could you ping us if this is implemented, please?


Regards
Bill
0
ss
Top achievements
Rank 1
answered on 18 Sep 2012, 10:09 AM
HI,

I have a radgridview row selection issue.

i have tabcontrol with two tab items.

each tabitem have a radgridview as a content of radtabitem.

if i select any of the row from the radgridview-1 under radtabitem-1

and then i moved two radgridview -2 under radtabitem-2.

and i when i came back to the radgridview-1 under radtabitem-1 the selecteditem property is not null but the row is not highlited.oly the cel wat i clicked to select the row that cell is just displaying like textbox.

but i want to hightlight the entire row as like how it will appear when you select the row.

please help me on this.

advance thanx

regards,
ss
Tags
GridView
Asked by
Nirmal
Top achievements
Rank 1
Answers by
Kalin Milanov
Telerik team
Jon
Top achievements
Rank 1
Rod
Top achievements
Rank 1
Helen
Top achievements
Rank 2
Marc Roussel
Top achievements
Rank 2
Matt WEyland
Top achievements
Rank 1
Jose
Top achievements
Rank 1
James
Top achievements
Rank 1
ss
Top achievements
Rank 1
Share this question
or