[Solved] change cell colour on DataBind

[Suzan]

I have a Telerik grid which is created in Code in the Page_Init. I have to do this because the number of columns varies.
I need to be able to change the colour of a cell depending on the value in it. How do I do this?
Also is there a way to alter the orientation of the column headings?
I have a large number of columns so it would be best to have the headings at an angle.
  

[Eyup]

Hello Suzan,

You can use the following approach to modify the cell background color depending on its text content:

protected void Page_Init(object sender, EventArgs e)
{
    RadGrid grid = new RadGrid();
    grid.ItemDataBound += grid_ItemDataBound;
      ...
}
protected void grid_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem dataItem = e.Item as GridDataItem;
        GridTableCell cell = dataItem["ShipCountry"] as GridTableCell;
        cell.BackColor = cell.Text.Length > 7 ? Color.LightBlue : Color.Orange;
    }
}

That should do the trick. Please give it a try and let me know about the result.

As for rotating the header text, please note that this is a complex task which could be achieved "partially" with extensive use of CSS. Place label controls in the header templates of your columns and add them the following CSS:

Copy Code

<asp:Label ID="LabelJobDesign1" runat="server" Text="Job Design" CssClass="labelRotated" Height="35px" Width="30px">

CSS:

Copy Code

.labelRotated
{
    -moz-transform: rotate(-60deg); /* FF3.5+ */
    -o-transform: rotate(-60deg); /* Opera 10.5 */
    -webkit-transform: rotate(-60deg); /* Saf3.1+, Chrome */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-60); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=-60)"; /* IE8 */
    -sand-transform: rotate(-60deg);
    transform: rotate(-60deg);
    writing-mode: tb-rl; /* for ie */
}

 
Then, you will need to adjust the position of your labels with margin property.

Generally, the browsers themselves could not support fully this feature yet, therefore, I suggest you to review your idea. You could hide the originally generated grid header and add controls to top of the grid adjusting them with CSS to have the desired appearance.

I hope this helps.

Greetings,
Eyup
the Telerik team