Radgrid selected item style

12 posts, 1 answers
  1. Ron
    Ron avatar
    113 posts
    Member since:
    Apr 2011

    Posted 14 Sep 2011 Link to this post

    Hi,

    can you tell me  how to change radgrid selected item style? When I use the following css, it appears that there's a grey overlay and blow there's the red background i'm looking for. I attached a photo to give you an example.
    .SelectedStyle
    {
     background-color: red !important;
    }
    <telerik:RadGrid ID="grdClients" runat="server" Width="100%" AutoGenerateColumns="false"
           AllowMultiRowEdit="false" ShowHeader="false" DataSourceID="objClients"
               CssClass="RadGrid_Default" SelectedItemStyle-CssClass="SelectedStyle">

    Thanks
  2. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 14 Sep 2011 Link to this post

    Hello,

    <style>
        .RadGrid .rgSelectedRow
        {
            background-image : none !important;
            background-color: red !important;
        }
    </style>


    let me know if any concern.

    Thanks,
    Jayesh Goyani
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ron
    Ron avatar
    113 posts
    Member since:
    Apr 2011

    Posted 14 Sep 2011 Link to this post

    Thanks a lot, that worked. Can you tell me how to apply a hover style to rad grid. Apparently what I'm doing is not working.
    .RadGrid .rgHoveredRow
                {
                    background-color:blue;
                }
  5. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 14 Sep 2011 Link to this post

    Hello,

    If you want to overwrite existing css then add "!important;" after every css property.

    Thanks,
    Jayesh Goyani
  6. Ron
    Ron avatar
    113 posts
    Member since:
    Apr 2011

    Posted 14 Sep 2011 Link to this post

    I tried that but still did not work, I wonder if im using the correct style.
  7. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 15 Sep 2011 Link to this post

    Hello Ron,

    To enable the hover style for the grid rows, set the ClientSettings  EnableRowHoverStyle property of RadGrid to True. For further information check the following help documentation.
    Set style on mouse over

    Thanks,
    Princy.
  8. Prabhu
    Prabhu avatar
    8 posts
    Member since:
    Jan 2012

    Posted 10 Feb 2012 Link to this post

    Hi,
        As Jayesh Goyani suggested I've used the CSS for hightlighting my RadGrid. it works fine but I am able to see Green border for the seleted item eventhough ive mentioned the Border Style in my CSS. Please let me know where the Problem is. Ive attached the CSS and the image for your references.

    .RadGrid .rgSelectedRow
    {
        background-image : none !important;
        background-color: #cee2ff !important;
        height: 19px !important;
        border:solid 1px #0e4b7d !important;
    }

    For better viewable, ive zoom in my page to 200%.
  9. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Feb 2012 Link to this post

    Hello,

    Try the following CSS.
    CSS:
    .RadGrid_Default .rgSelectedRow td
    {
        border-bottom-color:transparent !important;
    }

    -Shinu.
  10. Vishu
    Vishu avatar
    18 posts
    Member since:
    May 2014

    Posted 28 May 2014 Link to this post

    Can I disable mouse hovering on grid first row and let it be enable for other rows? I am displaying first row as footer total and do not wan't to let user to hover over it. See screen shot.
  11. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 28 May 2014 in reply to Vishu Link to this post

    Hi Vishu,

    Please try to attach the client side OnRowMouseOver event of the RadGrid and cancel the event only for the first row of the RadGrid.

    ASPX:
    ...
    <
    ClientSettings>
        <ClientEvents OnRowMouseOver="RowMouseOver" />
    </ClientSettings>
    ...

    JavaScript:
    function RowMouseOver(sender, args) {
        if (args._itemIndexHierarchical == 0) {
            args._domEvent.preventDefault();
        }
    }

    Thanks,
    Shinu.
  12. Vishu
    Vishu avatar
    18 posts
    Member since:
    May 2014

    Posted 29 May 2014 in reply to Shinu Link to this post

    Thanks Shinu. 
    This did not fix the issue. Still mouse hover change the half of the row color.Please see attached screenshot.
    It seems when the text is wrapped to down then issue arises. Somehow mouse hover event not identifying the first row.

    In code behind Implementation, first row has been created with an empty object of list and bind to radgrid. Other columns are being hidden on _prerender event.
  13. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 29 May 2014 in reply to Vishu Link to this post

    Hi Vishu,

    Another approach is that on mouse over of first row in RadGrid you can change the background color as follows. From the attached screenshots I have noticed that footer is showing at the top of the RadGrid , such a behavior is not expected. Please share your code if it doesn't help.

    JavaScript:
    function RowMouseOver(sender, args) {
        if (args._itemIndexHierarchical == 0) {
            sender.get_masterTableView().get_dataItems()[0]._element.bgColor = "White";
        }
    }

    ​Thanks,
    Shinu.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017