Preserving the style of the RadGrid row on applying custom CssStyle

2 posts, 0 answers
  1. Lax
    Lax avatar
    15 posts
    Member since:
    Mar 2015

    Posted 07 Feb Link to this post

    Hi,

    I am trying to apply conditional formatting on my RadGrid row when the value of a column is true for external action. For this I am setting the CssStyle for the GridDataItem in the code behind to new style as below, as shown in the example in this link:

    http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/appearance-and-styling/conditional-formatting

     .aspx

        <style type="text/css">
                 body div.RadGrid_Office2007 .rgFollowUpRow { background-color: red;      
      }

     code-behind:

      e.Item.CssClass = "rgFollowUpRow";

    But, after this style is applied the row loses its original style and so grid lines disappear, and row losses its padding too, as shown in the attachment. Can anyone please let me know what is that I am missing here in applying this custom style to the grid row?

     

    Thanks in advance,

    Lax

        

  2. Eyup
    Admin
    Eyup avatar
    3007 posts

    Posted 11 Feb Link to this post

    Hi Lax,


    There are various ways to achieve this requirement:
    Copy Code
    Copy Code
    GridDataItem item = e.Item as GridDataItem;
    string orgClass = e.Item.ItemIndex % 2 == 0 ? "rgRow" : "rgAltRow";
    item.CssClass = orgClass + " customClassName";
    CSS:
    Copy Code
    Copy Code
    <style type="text/css">
        .RadGrid tr.customClassName {
            background-color: yellow;
        }
     
        div.RadGrid tr.rgSelectedRow {
            background-color: #828282;
        }
    </style>

    Another straightforward way to just change the font style is this:
    Copy Code
    Copy Code
    Copy Code
    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem item = (GridDataItem)e.Item;
            if (item.ItemIndex % 3 == 0) // custom condition
            {
                item.Font.Bold = true;
            }
        }
    }

    I hope this will prove helpful.


    Regards,
    Eyup
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top