How to *append* a CSS class to a row

8 posts, 0 answers
  1. dstj
    dstj avatar
    82 posts
    Member since:
    Oct 2006

    Posted 26 Jan 2010 Link to this post

    Hi,

    Using v2009.3.1208.35, I'm trying to append a custom CSS class to each row of a grid depending on some databound condition. For example: appending either "active", "disabled" or "pending" depending on the "state" enum.

    I tried the following code in the ItemDataBound event, but that replaces the CSS class instead of appending it.
    switch (state) { 
       case StateType.Active: 
          e.Item.CssClass += " active"
          break
     
       case StateType.Disabled: 
          e.Item.CssClass += " disabled"
          break
     
       case StateType.Pending: 
          e.Item.CssClass += " pending"
          break

    The rgRow and rgAltRow classes are lost from the rendered HTML result.

    What I really want is this :
    <tr id="..." class="rgRow active"
      <td>row 1 (active css class)</td> 
    </tr> 
    <tr id="..." class="rgAltRow active"
      <td>row 2 (active css class)</td> 
    </tr> 
    <tr id="..." class="rgRow disabled"
      <td>row 3 (disabled css class)</td> 
    </tr> 
    <tr id="..." class="rgAltRow pending"
      <td>row 4 (pending css class)</td> 
    </tr> 

    How can I achieve this result? It's NOT a custom skin, just a css class that will be added on top of the skin.

    The only another similar thread I've found was this one, but the ApplyStylesOnClient properties mentioned is no longer supported it seems so I cannot try it.

    Thanks for your help,

    dstj.
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 27 Jan 2010 Link to this post

    Hi Dominic,

    The observed behavior is expected - CSS classes set at runtime replace the native ones. In order to preserve the original row CSS classes, you need to check what is the row type (e.Item.ItemType) and set the original CSS class (rgRow or rgAltRow) together with the custom one. In your case e.Item.ItemType may be equal to GridItemType.AlternatingItem or GridItemType.Item.

    Sincerely yours,
    Dimo
    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. UI for ASP.NET Ajax is Ready for VS 2017
  4. dstj
    dstj avatar
    82 posts
    Member since:
    Oct 2006

    Posted 27 Jan 2010 Link to this post

    So what's your saying is that I should do this instead:
    if (e.Item.ItemType == Telerik.Web.UI.GridItemType.Item || e.Item.ItemType == Telerik.Web.UI.GridItemType.AlternatingItem) { 
       // ...  
        
       string baseCss = e.Item.CssClass = e.Item.ItemType == Telerik.Web.UI.GridItemType.Item ? "rgRow" : "rgAltRow";  
      
       switch (state) {   
          case StateType.Active:  
             e.Item.CssClass = baseCss + " active";  
             break;   
          
          case StateType.Disabled:   
             e.Item.CssClass = baseCss + " disabled";  
             break;   
          
          case StateType.Pending:   
             e.Item.CssClass = baseCss + " pending";  
             break;   
       } 

    That seems to do the trick. Thanks for your help !

    I do think it's somewhat peculiar that using += does the same thing as =, no ?

    Dominic.
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 28 Jan 2010 Link to this post

    Hello Dominic,

    Well, you can first check whether e.Item is GridDataItem (the first IF statement) instead of checking the ItemType twice.

    As for the += question - yes, at the time you are setting the custom CssClass, it is empty, that's why += acts like =.

    All the best,
    Dimo
    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. Joshua Grippo
    Joshua Grippo avatar
    10 posts
    Member since:
    Nov 2009

    Posted 27 Dec 2011 Link to this post

    I have a very similar situation, but my styles for the alternate rows are not being displayed. When i inspect the element in chrome it is being overridden by something from the default CSS. I am not sure why. Thoughts?

    <style type="text/css">
        .RegularFree
        {   background-color: #00DD00;
        }
        .AlternateFree
        {
            background-color: #00FF00;
        }
        .RegularAllocated
        {
            background-color: #FF0000;
        }
        .AlternateAllocated
        {
            background-color: #DD0000;
        }     
    </style>


    var row = (e.Item as Telerik.Web.UI.GridDataItem);
    if (row != null)
    {
        var data = row.DataItem as Data;
        switch (row.ItemType)
        {
            case Telerik.Web.UI.GridItemType.AlternatingItem:
                row.CssClass = "rgAltRow " + (data.Allocated ? "AlternateAllocated" : "AlternateFree");
                break;
            case Telerik.Web.UI.GridItemType.Item:
                row.CssClass = "rgRow " + (data.Allocated ? "RegularAllocated" : "RegularFree");
                break;            
            default:
                break;
        }
    }
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 27 Dec 2011 Link to this post

    Hello,

    One suggestion is you can try with "!important" modifier. Without the !important modifier, the new CSS rule would not take effect.

    Thanks,
    Princy.
  8. John Eptaminitakis
    John Eptaminitakis avatar
    2 posts
    Member since:
    Sep 2012

    Posted 24 Nov 2015 in reply to Dimo Link to this post

    Rather than using string literals for rgAltRow and rgRow are there string constants within Telerik that could be used?
  9. Eyup
    Admin
    Eyup avatar
    3014 posts

    Posted 27 Nov 2015 Link to this post

    Hi John,

    Generally, you can use these properties for a more generic approach:
    <ItemStyle CssClass="yourItemClass" />
    <AlternatingItemStyle CssClass="yourAltItemClass" />

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

    Hope this helps. If you have different requirements or further instructions, please elaborate on your specific requirement and send us sample screenshots or video demonstrating the desired functionality.

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017