This is a migrated thread and some comments may be shown as answers.

How to *append* a CSS class to a row

7 Answers 1099 Views
Grid
This is a migrated thread and some comments may be shown as answers.
dstj
Top achievements
Rank 1
dstj asked on 26 Jan 2010, 07:47 PM
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.

7 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 27 Jan 2010, 07:15 AM
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.
0
dstj
Top achievements
Rank 1
answered on 27 Jan 2010, 02:52 PM
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.
0
Dimo
Telerik team
answered on 28 Jan 2010, 07:42 AM
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.
0
Joshua Grippo
Top achievements
Rank 1
answered on 27 Dec 2011, 11:13 PM
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;
    }
}
0
Princy
Top achievements
Rank 2
answered on 28 Dec 2011, 05:56 AM
Hello,

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

Thanks,
Princy.
0
John Eptaminitakis
Top achievements
Rank 1
answered on 25 Nov 2015, 01:51 AM
Rather than using string literals for rgAltRow and rgRow are there string constants within Telerik that could be used?
0
Eyup
Telerik team
answered on 27 Nov 2015, 11:05 AM
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
Tags
Grid
Asked by
dstj
Top achievements
Rank 1
Answers by
Dimo
Telerik team
dstj
Top achievements
Rank 1
Joshua Grippo
Top achievements
Rank 1
Princy
Top achievements
Rank 2
John Eptaminitakis
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or