The problem where the script is not successfully change the cell background color may happen because the script is not correctly access the TD element that represents WebGrid cell. Below is the snippet code – which I use on my test page that I made based-on your required scenario – that shows how to set cell background color from client-side event.

<script type="text/javascript">
    <!--
    function SetCellBackgroundColor() {
        var WebGrid1 = ISGetObject("WebGrid1");
        var RootTable = WebGrid1.GetRootTable();
        var FirstRow = RootTable.GetRow(0);
        var Cells = FirstRow.GetCells();

        Cells.GetNamedItem("CompanyName").GetElement().style.backgroundColor = "red";

        return true;
    }
    -->
</script>

In order to set the cell background color from server-side event, it is recommended to utilize the OnInitializeRow server-side event. The snippet code below can be used to set cell’s background color in OnInitializeRow server-side event.

protected void WebGrid1_InitializeRow(object sender, ISNet.WebUI.WebGrid.RowEventArgs e)
{        
    e.Row.Cells.GetNamedItem("ProductID").Style.BackColor = System.Drawing.Color.Red;
}

Please use OnEnterEditMode client-side event to set cell’s background color during editing phase and new row scenario.

Please let us hear your response whether it helps or not.

Hi,

on server side it is ok, anyway in client side I have used your code sample but it does not work the backgroudcolor is unchanged. Could you provide me an example to try it?

Thanks,

Vince

I enclosed one simple sample of WebGrid that shows how to set/change WebGrid cell background color. In the sample, the WebGrid is bind to Shippers table of Northwind.mdb database using AccessDataSource.

An HTML button is added into the page. Clicking this button will invoke Javascript function. The Javascript function will set the CompanyName cell of the first column to red color.

Please have the test page tested on your end and let us know whether it helps or not.

Hi,

you are right anyway i need to change the color when I stay in edit mode on the row, and also with your example I can set the color but when I enter in edit mode in the row the color comes back to the old, it does not maintain the red color.

Thanks,

Vince

In order to change the color in edit mode of the row, please try to use OnEnterEditMode client-side event of WebGrid.

I made a minor modification to the sample. OnEnterEditMode client-side event is added to maintain cell background color during edit mode. On the EnterEditMode event, a validation is added to determine whether current edited cell is the cell of “CompanyName” column or not.

function WebGrid1_OnEnterEditMode(controlId, tblName, editObject) {
    // obtain WebGrid object
    var WebGrid1 = ISGetObject(controlId);
            
    // obtain current column based on the current edited cell
    var currentColumn = WebGrid1.GetColumnByElement(editObject.cellElement).Name;
            
    if (currentColumn == "CompanyName")
        editObject.element.style.backgroundColor = "red";
    else
        editObject.element.style.backgroundColor = "";

    return true;
}

Hope this helps.