Styling RadGrid Selected RowColor

24 posts, 0 answers
  1. Nirmal
    Nirmal avatar
    14 posts
    Member since:
    Dec 2008

    Posted 07 Jan 2010 Link to this post

    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.
        
  2. Kalin Milanov
    Admin
    Kalin Milanov avatar
    447 posts

    Posted 12 Jan 2010 Link to this post

    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.
  3. DevCraft banner
  4. Jon
    Jon avatar
    539 posts
    Member since:
    Apr 2004

    Posted 26 Jan 2010 Link to this post

    Hi..
    I'm not clear on how you change the SelectedRowStyle.... can you provide a quick example?
    thanks again
  5. Kalin Milanov
    Admin
    Kalin Milanov avatar
    447 posts

    Posted 27 Jan 2010 Link to this post

    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.
  6. Jon
    Jon avatar
    539 posts
    Member since:
    Apr 2004

    Posted 27 Jan 2010 Link to this post

    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
  7. Rod
    Rod avatar
    3 posts
    Member since:
    Dec 2009

    Posted 27 Jan 2010 Link to this post

    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
  8. Kalin Milanov
    Admin
    Kalin Milanov avatar
    447 posts

    Posted 27 Jan 2010 Link to this post

    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.
  9. Rod
    Rod avatar
    3 posts
    Member since:
    Dec 2009

    Posted 27 Jan 2010 Link to this post

    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

  10. Jon
    Jon avatar
    539 posts
    Member since:
    Apr 2004

    Posted 27 Jan 2010 Link to this post

    Any luck...?
    I'm still trying to set the Selected Row color... and font......    still defaults to the Orange.....  thanks
  11. Helen
    Helen avatar
    101 posts
    Member since:
    Nov 2008

    Posted 27 Jan 2010 Link to this post

    Is what you want a selection mode so that the entire row is selected, not a cell?

    I'd like that too.

    Helen
  12. Jon
    Jon avatar
    539 posts
    Member since:
    Apr 2004

    Posted 27 Jan 2010 Link to this post

    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 ?
  13. Kalin Milanov
    Admin
    Kalin Milanov avatar
    447 posts

    Posted 01 Feb 2010 Link to this post

    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.
  14. Marc Roussel
    Marc Roussel avatar
    429 posts
    Member since:
    Dec 2009

    Posted 05 Mar 2010 Link to this post

    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 ?
  15. Marc Roussel
    Marc Roussel avatar
    429 posts
    Member since:
    Dec 2009

    Posted 05 Mar 2010 Link to this post

    I don't know why but my attached file wasn't attached :(.  Here again
  16. Marc Roussel
    Marc Roussel avatar
    429 posts
    Member since:
    Dec 2009

    Posted 05 Mar 2010 Link to this post

    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.


  17. Kalin Milanov
    Admin
    Kalin Milanov avatar
    447 posts

    Posted 09 Mar 2010 Link to this post

    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.
  18. Marc Roussel
    Marc Roussel avatar
    429 posts
    Member since:
    Dec 2009

    Posted 12 Mar 2010 Link to this post

    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 !

  19. Matt WEyland
    Matt WEyland avatar
    1 posts
    Member since:
    May 2010

    Posted 14 May 2010 Link to this post

    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
  20. Marc Roussel
    Marc Roussel avatar
    429 posts
    Member since:
    Dec 2009

    Posted 14 May 2010 Link to this post

    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 !!!!!!!
  21. Jon
    Jon avatar
    539 posts
    Member since:
    Apr 2004

    Posted 14 May 2010 Link to this post

    Agreed... that's why I don't do it... but it's requested all the time.
  22. Kalin Milanov
    Admin
    Kalin Milanov avatar
    447 posts

    Posted 19 May 2010 Link to this post

    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.
  23. Jose
    Jose avatar
    8 posts
    Member since:
    Feb 2012

    Posted 05 Mar 2012 Link to this post

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

    Regards,
    //Jose
  24. James
    James avatar
    26 posts
    Member since:
    Oct 2008

    Posted 07 May 2012 Link to this post

    Hi,

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


    Regards
    Bill
  25. ss
    ss avatar
    37 posts
    Member since:
    Nov 2010

    Posted 18 Sep 2012 Link to this post

    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
Back to Top
DevCraft banner