How to *append* a CSS class to a row

[dstj]

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.

[Dimo]

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.

[dstj]

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.

[Dimo]

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.

[Joshua Grippo]

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;
    }
}

[Princy]

Hello,

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

Thanks,
Princy.

[John Eptaminitakis]

Rather than using string literals for rgAltRow and rgRow are there string constants within Telerik that could be used?

[Eyup]

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