Solution Name: DataGridWithColors
Software Version: v10 Update 1b1C
Keywords: Data visualization. Displays. DataGrid. ColorsDataGrid. Colors. Customization. Rows. Cells.
Summary
This solution example customizes colors on the DataGrid object by defining events that modify row and cell colors based on specific rules.
Technical Information
Before customizing DataGrid colors, the data source must be configured to handle it. However, this example preloads data in the CodeBehind to demonstrate the color customizationThis example stores simulated data in a DataTable-type tag, which is populated in the code-behind. The data can also come from a database. Remember to configure the Data Source field in the DataGrid Settings dialog to ensure the data is displayed correctly. See the images below for an example of the configuration.
Key Features
These customization methods enhance the DataGrid by dynamically adjusting row and cell appearances. The method OnCustomizeRow
In this example, the method ApplyRowStyleAlternating()
applies alternating row colors based on index parity, while OnCustomizeCell
modifies cell appearance by applying color changes based on predefined conditions. ApplyCellStyle()
and ApplyRowStyle()
modifies cells and rows colors based on values.
Apply Row Style Alternating
Row Customization
The method OnCustomizeRow
modifies the background and text colors of rows in coloredGridByRow by applying alternating colors based on the row index parity.
Code Block | ||||
---|---|---|---|---|
| ||||
private void OnCustomizeRowApplyRowStyleAlternating(DataRow row, Dictionary<string, object> attributes) { // Retrieves the total number of rows in the table. int rowCount = row.Table.Rows.Count; // Retrieves the index of the current row in the table. int idx = row.Table.Rows.IndexOf(row); // Defines default text color as green and background color as black. string textColor = "#000000"; string bgColor = "#FFFFFF"; // Alternates colors for even and odd row indices. if (idx % 2 == 0) { textColor = "#000000"; bgColor = "#DAF3DB"; } // Assigns the foreground and background colors to the row attributes. attributes["Foreground"] = textColor; attributes["Background"] = bgColor; } |
Apply Cell Customization
The method OnCustomizeCell
converts the value of the "Status" column and modifies the cell colors when the value meets the defined condition.
Style
Code Block | ||||
---|---|---|---|---|
| ||||
private void OnCustomizeCellApplyCellStyle(string columnName, DataRow row, Dictionary<string, object> attributes) { // Logs debug information when the method executes. @Info.Trace($"[DEBUG] || OnCustomizeCellApplyCellStyle || col: {columnName} || [1] "); // Exits the method if the column is not named "Status". if (!string.Equals(columnName, "Status")) return; // Logs debug information when the column matches "Status". @Info.Trace($"[DEBUG] || OnCustomizeCellApplyCellStyle || col: {columnName} || [2] "); // Retrieves the value of the "Status" column string status = row["Status"]?.ToString(); if (string.IsNullOrEmpty(status)) return; // Logs debug information about the retrieved value. @Info.Trace($"[DEBUG] || OnCustomizeCellApplyCellStyle || col: {columnName} || Row[col]: {row[columnName]} || [3] "); // Apply background and text colors based on status value using if-else if (status.Contains("2nd Pass Press")) { attributes["Foreground"] = "#FFFFFF"; attributes["Background"] = "#00B9B6"; } else if (status.Contains("Finished Press")) { attributes["Foreground"] = "#000000"; attributes["Background"] = "#8BE27C"; } else if (status.Contains("Finish Slit")) { attributes["Foreground"] = "#000000"; attributes["Background"] = "#FCFD1A"; } else if (status.Contains("Start Slit")) { attributes["Foreground"] = "#FFFFFF"; attributes["Background"] = "#1929A9"; } else if (status.Contains("Finished Lam")) { attributes["Foreground"] = "#000000"; attributes["Background"] = "#57D845"; } else if (status.Contains("2nd Pass Lam")) { attributes["Foreground"] = "#FFFFFF"; attributes["Background"] = "#1A2B7E"; } } |
Apply Row Style
Code Block | ||||
---|---|---|---|---|
| ||||
private void ApplyRowStyle(DataRow row, Dictionary<string, object> attributes) { string textColor = "#000000"; string bgColor = "#FFFFFF"; int state = TConvert.ToInt( row["State"]); switch(state) { case 1: default: bgColor = Colors.LightGreen.ToString().Replace("#FF","#"); break; case 2: bgColor = Colors.LightCoral.ToString().Replace("#FF","#"); break; case 3: bgColor = Colors.Yellow.ToString().Replace("#FF","#"); break; case 4: bgColor = Colors.Cyan.ToString().Replace("#FF","#"); break; } // Assigns the foreground and background colors to the row attributes. attributes["Foreground"] = textColor; attributes["Background"] = bgColor; } |
Reference Information
→ See DataGrid Control for more information.
In this section:
Page Tree | ||||
---|---|---|---|---|
|