Changing Grid Cell Background and Text Color in RowInitialize

Having an issue with setting the background and text color of an individual cell in a row based on the value in another column of the row.

Here’s the code:

Private Sub TabsGrid_InitializeRow(ByVal sender As Object, ByVal e As Infragistics.Web.UI.GridControls.RowEventArgs) Handles TabsGrid.InitializeRow

‘ Get the cell and color from the grid

Dim ColorCell As Infragistics.Web.UI.GridControls.GridRecordItem = e.Row.Items.FindItemByKey(“tabcolor”)
Dim ColorInteger As Integer = CInt(e.Row.Items.FindItemByKey(“tab_color”).Value)

‘ Now set the color to RGB format

Dim Color As Color = Functions.BgrToRgb(ColorInteger)
Dim HexColor As String = Functions.HexFromRGB(Color.R, Color.G, Color.B)

‘ Now set the fore and back color of the cell and populate it

ColorCell.CssClass = Infragistics.Web.UI.Framework.AppStyling.AppStylingManager.Settings.CssRegistry.Add(“color: ” & HexColor & “; background-color: ” & HexColor, “”)
ColorCell.Text = HexColor

End Sub

When the code runs, the background neither the text color or background color is being changed. Is there another way to accomplish this with server side events?

Here’s the column definition, not sure if using an unbound field is the right one to use to be able to change the background color:

<Columns>
<igtbl:BoundDataField Header-Text=”Tab” Key=”tab_no” Header-Tooltip=”Tab” DataFieldName=”tab_no” />
<igtbl:BoundDataField Header-Text=”Description” Key=”description” Header-Tooltip=”Description” DataFieldName=”description” />
<igtbl:BoundDataField Header-Text=”Page” Key=”doc_page” Header-Tooltip=”Page” DataFieldName=”doc_page” />
<igtbl:UnboundField Header-Text=”Color” Key=”tabcolor” Header-Tooltip=”Color” />
<igtbl:BoundDataField Header-Text=”” Key=”tab_color” Header-Tooltip=”” Hidden=”true” DataFieldName=”tab_color” />
</Columns>

I was able to figure this out but not completely filling in the cell with the desired color.

I changed the unboundfield to the following:

<igtbl:TemplateDataField Key="tabcolor" Header-Text="Color" Header-Tooltip="Color" CssClass="NoPaddingCssClass">

<ItemTemplate>

<asp:Panel ID="CellColorPanel" runat="server" Width="100%" Height="100%" />

</ItemTemplate>

</igtbl:TemplateDataField>

In the CssClass, I set the following properties:

.NoPaddingCssClass

{

padding: 0px 0px 0px 0px;

margin: 0px 0px 0px 0px;

}

This leaves me with a small white border around the panel that I can't get to go away, is there some css that I'm missing?

Hello Quan Mac,

Thank you for posting in our community.

Let solve the issues one by one.

First, if you want to change something in the cell layout or styling the proper place for this should be in CSS or in JS.

If the target cell that need to be styled is placed after the depended cell (which value you are using to determine whether to trigger this styling or not) in the row, there is a chance to handle this  styling only in the CSS. There is a CSS selector for a sibling DOM element (https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors). It depends on the logic you rely on.

If the logic is too complicated, the you can use JS code to handle this issue by adding some custom css class and define your custom styles in it.

Please, send more details about what is the logic in your scenario to determine whether the target cell should be styled.

We allow users to select a color for a background on a certain part of our website and the grid displays the selected color in one of the cells from the database.

I'm using the grid InitializeRow to set the background color based on a column from the data source.

Hello Quan,

You can use clientside intialize event to set the color of the cell and loop through the rows to set the cell background color.

function WebDataGrid_OnInitialize_ChangeColor(sender) {    var rows = sender.get_rows();

for (var i = 0; i < rows.get_length(); i++) {        var row = rows.get_row(i),        cell = row.get_cellByColumnKey(“Color”),        cellElement = cell.get_element();

cellElement.style.border = “none”;        cellElement.style.background = cell.get_value();        cellElement.style.color = “white”;    }}

I have attached a sample to demonstrate this.

Please let me know if I may be of further assitance.

Attachments:

1. SetBackgroundColor.zip

Thanks Denis,

Unfortunately setting the background color client-side isn't an option as we have some server-side code to process data and set the tabs as we aren't hard coding the background color, it's being pulled dynamically from a database entry.

Hello Quan,

Thank you for your patience and explanation.

The correct way of handling this is by adding CSS classes to the cells.

You could dynamically add styles to the page from the code-behind.

I am attaching a sample demonstrating this approach.

Please let me know if you need anything else.

Attachments:

1. ChangeCellBackgroundColor.zip

This will not likely work for our scenario since we can't create CSS classes for every background color a user can choose.

Is there a likely chance that Infragistics is going to allow the background color to be modified outside of using CSS classes?

Was able to get around the issue with putting a panel inside the grid and setting the background color of the panel and that worked

Sometimes simple is better. This worked for me.

Dim FreeSpace As Double
For Each r As Infragistics.Web.UI.GridControls.GridRecord In DiskSpaceWebDataGrid.Rows
   Dim FreeSpaceCell As Infragistics.Web.UI.GridControls.GridRecordItem = r.Items.FindItemByKey("FreeSpace")
   FreeSpace = FreeSpaceCell.Value
   If FreeSpace < 8 Then
       FreeSpaceCell.Text = "<font color=red>" & FreeSpaceCell.Text & "</font>"
   End If
Next