Applying dynamic css class styles for each record

How to create and apply dynamic css classes for each record.

First you can create a StringBuilder for organizing the list of css classes that you would like to create dynamically:

StringBuilder cssSylesBuilder = new StringBuilder();
cssSylesBuilder.Append(".BG1 {background-color: red !important;}");
cssSylesBuilder.Append(".BG2 {background-color: blue !important;}");
cssSylesBuilder.Append(".BG3 {background-color: green !important;}");

Then you can register the css styles to a variable in JavaScript using the RegisterClientScriptBlock:

Page.ClientScript.RegisterClientScriptBlock(
    this.GetType(),
    "MyCss",
    "var cssStyles = '" + cssSylesBuilder.ToString() + "'",
    true);

This will register the variable "cssStyles" as a string.

Then you can handle the WebDataGrid's Initialize client side event and dynamically create a style element so that it can be set to the css text that is stored in "cssStyles":

function WebDataGrid1_Grid_Initialize(sender, eventArgs)
{
    ///<summary>
    ///
    ///</summary>
    ///<param name="sender" type="Infragistics.Web.UI.ControlMain"></param>
    ///<param name="eventArgs" type="Infragistics.Web.UI.EventArgs"></param>
   
    var styleElement = document.createElement('style');
    var styleClasses = cssStyles;
    styleElement.setAttribute("type", "text/css");
    styleElement.styleSheet.cssText = styleClasses;
    var headElement = document.getElementsByTagName('head')[0];
    headElement.appendChild(styleElement);
}

Finally you can handle the InitializeRow event and apply some logic to certain records. To set the css class for a record in particular you can retrieve a reference to all cells using "e.Row.Items[index]" which contains a GridRecordItem. Within the GridRecordItem reference you can set the CssClass property:

for (int i = 0; i < e.Row.Items.Count; i++)
{
    e.Row.Items[i].CssClass = "BG1";
}

This will apply the css class "BG1" to this record in particular.

Sample is attached to the thread for an example.