GridTableRow gradient style

[Mat]

Hy,

I want to draw programmatically colors to GridTableRow on RadGrid.ItemDataBound event. Switch my bounded item status, I call this method with different colors :

private void SetItemBackgroundColor(GridDataItem _item, string _sBackgroundColor, string _sGradientColor = null, string _sFontColor = null)
{
  if (string.IsNullOrEmpty(_sGradientColor) || _sBackgroundColor == _sGradientColor)
  {
    _item.Style.Add(HtmlTextWriterStyle.BackgroundColor, _sBackgroundColor);
  }
  else
  {
    _item.Style.Add("filter", " progid:DXImageTransform.Microsoft.gradient(startColorStr=" + _sBackgroundColor + ", endColorStr=" + _sGradientColor + ", GradientType=1)");
    _item.Style.Add("background", "-moz-linear-gradient(left, " + _sBackgroundColor + ", " + _sGradientColor + ")");
    //_item.Style.Add(HtmlTextWriterStyle.Height, "auto");
  }

  if (!string.IsNullOrEmpty(_sFontColor))
  {
    _item.Style.Add(HtmlTextWriterStyle.Color, _sFontColor);
  }
}

It works well under Firefox, but doesn't work in IE.

I used this link but it doesn't work for GridTableRow. I can't found properties described in this post !

Thanks for your help !

[Andrey]

Hi,

You could check this help topic which explains how to customize row appearance.

All the best,
Andrey
the Telerik team

[Mat]

Thank you for the answer, but it is not described how to draw a "grandient-style".

Any idea ?

[Andrey]

Hi,

You could combine the approach from the link I have provided with the information from the page you have found and thus you will be able to achieve your goal.

I have created a project to illustrate the approach. Give the project a try and check whether this is the desired behavior.

Greetings,
Andrey
the Telerik team

[Mat]

Hi,

I'm back to this Post :).

The problem for me is not to apply a style to a row or another object. The problem is that gradient-style doesn't work properly on GridTableRow... I see in source code that my style is applied, but it is not displayed...

Thanks in advance,
Stéphane

[Andrey]

Hello,

How and whether the gradient will be shown is up to the browser. What browser you are using and what is its version?

Greetings,
Andrey
the Telerik team

[Mat]

It works fine in Firefox 12 & Safari, but doesn't work in IE9.

[Andrey]

Hi,

You could check this StackOverflow conversion for more information on gradients in IE9.

All the best,
Andrey
the Telerik team

[Mat]

Thanks for this link. I tried it but doesn't draw a gradient in RadGridItem. I've tried many many css custom styles but I never can draw gradient in IE...

Does anybody have already drawn gradient from left to right in a raw in RadGrid ?

[Andrey]

Hi,

Since the issue you are experiencing is a browser behavior and most probably won't be fixed before the next version is released, I will suggest to draw a gradient over an image and use this image in your website instead of dynamically generate the gradient in the browser.

Regards,
Andrey
the Telerik team

[Mat]

Hi,

Using images whith gradient will show other issues (width, height which are dynamic, transparency, hover style, ...). I can't use this solution.

I don't think that my issue is a browser problem because my code works well in buttons or panel, but doesn't work in RadGridItem.

Let me know if you have a solution.

Regards,
Stéphane

[Andrey]

Hi,

When sent to the browser each item of RadGrid is rendered as a HTML tr element. You could inspect what is the rendered HTML and the applied styles through some web inspector like FireBug.

You could try to place your code in a normal HTML table and check whether it is displayed correctly. Another approach is to try to set empty skin to RadGrid.

Give these suggestions a try and check whether the issue still replicates.

Greetings,
Andrey
the Telerik team