Home / Community & Support / Developer Productivity Tools Forums / Silverlight > GridView > Styling RadGrid Selected RowColor

• Nirmal

  Posted on Jan 7, 2010 (permalink)

  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.
      

  Reply

• Kalin Milanov Kalin Milanov

  Posted on Jan 12, 2010 (permalink)

  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.

  Reply



• Jon Master

  Posted on Jan 26, 2010 (permalink)

  Hi..
  I'm not clear on how you change the SelectedRowStyle.... can you provide a quick example?
  thanks again

  Reply

• Kalin Milanov Kalin Milanov

  Posted on Jan 27, 2010 (permalink)

  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.

  Attached files

  • 271347-rowselectionchange.zip

  Reply

• Jon Master

  Posted on Jan 27, 2010 (permalink)

  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

  Reply

• Rod

  Posted on Jan 27, 2010 (permalink)

  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

  Reply

• Kalin Milanov Kalin Milanov

  Posted on Jan 27, 2010 (permalink)

  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.

  Reply

• Rod

  Posted on Jan 27, 2010 (permalink)

  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
  
  

  Reply

• Jon Master

  Posted on Jan 27, 2010 (permalink)

  Any luck...?
  I'm still trying to set the Selected Row color... and font......    still defaults to the Orange.....  thanks

  Reply

• Helen Intermediate

  Posted on Jan 27, 2010 (permalink)

  Is what you want a selection mode so that the entire row is selected, not a cell?
  
  I'd like that too.
  
  Helen

  Reply

• Jon Master

  Posted on Jan 27, 2010 (permalink)

  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 ?

  Reply

• Kalin Milanov Kalin Milanov

  Posted on Feb 1, 2010 (permalink)

  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.

  Attached files

  • 271347-rowselectionchange.zip

  Reply

• Marc Roussel Master

  Posted on Mar 5, 2010 (permalink)

  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 ?
  

  Reply

• Marc Roussel Master

  Posted on Mar 5, 2010 (permalink)

  I don't know why but my attached file wasn't attached :(.  Here again
  

  Attached files

  • style.jpg

  Reply

• Marc Roussel Master

  Posted on Mar 5, 2010 (permalink)

  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.
  
  
  

  Attached files

  • wrong.jpg

  Reply

• Kalin Milanov Kalin Milanov

  Posted on Mar 9, 2010 (permalink)

  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.

  Reply

• Marc Roussel Master

  Posted on Mar 12, 2010 (permalink)

  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 !
  
  

  Reply

• Matt WEyland

  Posted on May 14, 2010 (permalink)

  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
  

  Reply

• Marc Roussel Master

  Posted on May 14, 2010 (permalink)

  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 !!!!!!!
  

  Reply

• Jon Master

  Posted on May 14, 2010 (permalink)

  Agreed... that's why I don't do it... but it's requested all the time.

  Reply

• Kalin Milanov Kalin Milanov

  Posted on May 19, 2010 (permalink)

  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.

  Reply

• Jose

  Posted on Mar 5, 2012 (permalink)

  Hi,
  What about the property to do this more easily?
  Is it implemented now?
  
  Regards,
  //Jose

  Reply

• James

  Posted on May 7, 2012 (permalink)

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

  Reply

• ss

  Posted on Sep 18, 2012 (permalink)

  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

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > GridView > Styling RadGrid Selected RowColor