It seems like the pending edit will change the red background color after the row loses focus. Is there a way around this? I have a need to make some cell updates and then change the row's background but no matter what, the edit seems to be overriding the red background.

I was thinking of using the grid's OnRowSelect event but I don't seem to find a way to revert back to the grid row's background color to "undo" the red.

In such scenario, you will need to re-apply the change background color logic in the AfterExitEditMode client side event handler. By default the WebGrid will apply the edited row with a predefined style. Here is the snippet to changed the background color during AfterExitEditMode event handler:

function WebGrid1_OnAfterExitEditMode(controlId, tableName, editObject) {
    var grid = ISGetObject(controlId);
    var selObj = grid.GetSelectedObject();
    var row = selObj.ToRowObject();
    var rowCells = row.GetCells();

    var columnLength = grid.RootTable.Columns.length;
    var rowObject = row;
    for (var i = 1; i <= columnLength; i++) {
        var rowElement = rowObject.RowElement;
        if (rowElement != null) {
            var cell = rowElement.cells[i];
            if (cell != null) { cell.style.setAttribute("backgroundColor", "Red", true); }
        }
    }
}

In such scenario, you will need to re-apply the change background color logic in the AfterExitEditMode client side event handler. By default the WebGrid will apply the edited row with a predefined style. Here is the snippet to changed the background color during AfterExitEditMode event handler:

function WebGrid1_OnAfterExitEditMode(controlId, tableName, editObject) {
    var grid = ISGetObject(controlId);
    var selObj = grid.GetSelectedObject();
    var row = selObj.ToRowObject();
    var rowCells = row.GetCells();

    var columnLength = grid.RootTable.Columns.length;
    var rowObject = row;
    for (var i = 1; i <= columnLength; i++) {
        var rowElement = rowObject.RowElement;
        if (rowElement != null) {
            var cell = rowElement.cells[i];
            if (cell != null) { cell.style.setAttribute("backgroundColor", "Red", true); }
        }
    }
}

This won't fix the problem because the cell edit that fires the OnAfterExitEditMode event occurs BEFORE the RowContextMenu's function fires.  I don't understand what is then causing the row's background to be set back given the RowContextMenu's function is setting the background to red?

By default in BatchUpdate mode the WebGrid will apply a style for modified row. This style is applied by setting the cell attribute, which will override the style you already applied. My previous post suggestion is to override this default style during the AfterExitEditMode event handler with the style you already defined.

In order to integrate the RowContextMenu and AfterExitEditMode method, you could assign a custom attribute to the row in RowContextMenu, for example CustomColor='CustomColor', in the AfterExitEditMode event handler you only assigned the Red color to the row which has the CustomColor attribute.

By default in BatchUpdate mode the WebGrid will apply a style for modified row. This style is applied by setting the cell attribute, which will override the style you already applied. My previous post suggestion is to override this default style during the AfterExitEditMode event handler with the style you already defined.

In order to integrate the RowContextMenu and AfterExitEditMode method, you could assign a custom attribute to the row in RowContextMenu, for example CustomColor='CustomColor', in the AfterExitEditMode event handler you only assigned the Red color to the row which has the CustomColor attribute.

Can you explain this a bit more?

Thanks.

rowObject.RowElement.setAttribute("CustomRowColor", "customrowcolor");

function WebGrid1_OnAfterExitEditMode(controlId, tableName, editObject) {
    var grid = ISGetObject(controlId);
    var selObj = grid.GetSelectedObject();
    var row = selObj.ToRowObject();
    var rowCells = row.GetCells();

    var columnLength = grid.RootTable.Columns.length;
    var rowObject = row;

    var rowElement = rowObject.RowElement;

    if (rowElement != null && rowElement.getAttribute("CustomRowColor") == "customrowcolor") {
        for (var i = 1; i <= columnLength; i++) {
            var cell = rowElement.cells[i];
            if (cell != null) { cell.style.setAttribute("backgroundColor", "Red", true); }
        }
    }
}

Try adding a custom attribute in the row element during the WebGrid_SetRowBackgroundColor

rowObject.RowElement.setAttribute("CustomRowColor", "customrowcolor");

And during the AfterExitEditMode only modify the cell color if the custom attribute is applied in the row element

function WebGrid1_OnAfterExitEditMode(controlId, tableName, editObject) {
    var grid = ISGetObject(controlId);
    var selObj = grid.GetSelectedObject();
    var row = selObj.ToRowObject();
    var rowCells = row.GetCells();

    var columnLength = grid.RootTable.Columns.length;
    var rowObject = row;

    var rowElement = rowObject.RowElement;

    if (rowElement != null && rowElement.getAttribute("CustomRowColor") == "customrowcolor") {
        for (var i = 1; i <= columnLength; i++) {
            var cell = rowElement.cells[i];
            if (cell != null) { cell.style.setAttribute("backgroundColor", "Red", true); }
        }
    }
}

This is the same problem as I described above. The row's background is changed by Intersoft *AFTER* the WebGrid's OnAfterExitEditMode. Therefore, the background that I changed is not persiste

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SetRowBackgroundColor.aspx.cs" Inherits="SetRowBackgroundColor" %>
<%@ Register TagPrefix="iswebgrid" Namespace="ISNet.WebUI.WebGrid" Assembly="ISNet.WebUI.WebGrid" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
	<HEAD runat=server>
		<title>SetRowBackgroundColor</title>
		<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
		<meta name="CODE_LANGUAGE" Content="C#">
		<meta name="vs_defaultClientScript" content="JavaScript">
		<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
		<script language="javascript">
		 
		    function WebGrid1_OnRowContextMenu(controlID, rowType, rowElement, menuObject) 
            {
                try 
                {
                    // Seperator
                    var separator = new WebMenuItem();
                    separator.Type = "Separator";
                    separator.Name = "wmiSeperator";
                    menuObject.Items.Add(separator);

                    var changeBackgroundColor = new WebMenuItem();
                    changeBackgroundColor.Text = "ChangeBackgroundColor";
                    changeBackgroundColor.Name = "wmiChangeBackgroundColor";
                    changeBackgroundColor.OnClick = "ChangeBackgroundColor";
                    menuObject.Items.Add(changeBackgroundColor);                              
                }
                catch (ex) { ShowJSException(ex); }
            } 
             
            function ChangeBackgroundColor()
            {
                var returnVal = false;
             
                try {
                     
                    var row = WebGrid_GetSelectedRow("WebGrid1");       
                    if (row == null) { return; }
                    
                    WebGrid_SetRowBackgroundColor("WebGrid1", row, "red"); 
                    
                    returnVal = true;
                }
                catch (ex) { ShowJSException(ex); returnVal = false; }
                
                return returnVal;
            }

            function WebGrid_GetSelectedRow(gridID) {

                try {
                    // Get selected row
                    var grid = ISGetObject(gridID);
                    if (grid == null) { return; }
                    var selObj = grid.GetSelectedObject();
                    if (selObj == null) { return; }
                    return selObj.ToRowObject();
                }
                catch (ex) { ShowJSException(ex); }
            }

            function WebGrid_SetRowBackgroundColor(gridID, row, color) {
                var returnVal = false;

                try {
                    // Set row's background color
                    if (row == null) { return false; }
                    var rowCells = row.GetCells();
                    if (rowCells == null) { return false; }

                    // Get grid
                    var grid = ISGetObject(gridID);
                    if (grid == null) { return false; }

                    // Get table's column length and starting position (Check Grouped Columns)
                    var columnLength = grid.RootTable.Columns.length;
                    if (grid.RootTable.GroupedColumns.length > 0) {
                        indexNumber = 2;
                    }
                    else {
                        indexNumber = 1;
                    }

                    var rowObject = row;
                    if (rowObject.Type.toUpperCase != "GROUPHEADER") {
                        for (var i = 1; i <= columnLength; i++) {
                            var rowElement = rowObject.RowElement;
                            if (rowElement != null) {
                                var cell = rowElement.cells[i];
                                if (cell != null) { cell.style.setAttribute("backgroundColor", color, true); }
                            }
                        }
                    }

                    returnVal = true;
                }
                catch (ex) { ShowJSException(ex); returnVal = false; }

                return returnVal;
            }

            function WebGrid1_OnAfterExitEditMode(controlId, tableName, editObject) 
            {
                var grid = ISGetObject(controlId);
                var selObj = grid.GetSelectedObject();
                var row = selObj.ToRowObject();
                var rowCells = row.GetCells();
                var columnLength = grid.RootTable.Columns.length;
                var rowObject = row;
                window.alert("WebGrid1_OnAfterExitEditMode");
                for (var i = 1; i <= columnLength; i++) 
                {
                    var rowElement = rowObject.RowElement;
                    if (rowElement != null) 
                    {
                        var cell = rowElement.cells[i];
                        if (cell != null) 
                        {
                            cell.style.setAttribute("backgroundColor", "Red", true);
                        }
                    }
                }
            }
            
		</script>
	
	</HEAD>
	<body MS_POSITIONING="GridLayout">
		<form id="Form1" method="post" runat="server">
		
			<iswebgrid:webgrid id=WebGrid1 runat="server" Height="279px" Width="896px" 
			DefaultStyleMode="Elegant"
                                    UseDefaultStyle="True"
			OnInitializeDataSource="WebGrid1_InitializeDataSource">
                    <LayoutSettings AutoHeight="false" AutoWidth="false" AllowBatchUpdate="true" BatchUpdateSettings-PromptUnsavedChanges="false"
        BatchUpdateSettings-AutomaticObjectUpdate="false" AllowEdit="Yes" EditOnClick="True"
        AllowAddNew="Yes" AllowDelete="Yes" PromptBeforeDelete="true" NewRowLostFocusAction="AlwaysPrompt"
        ResetNewRowValuesOnError="True" RowHeightDefault="22px" AllowFilter="Yes" AllowSelectColumns="Yes"
        AllowSorting="Yes" HideColumnsWhenGrouped="Default" AllowExport="Yes" InProgressUIBehavior="ChangeCursorToHourGlass"
        ApplyFiltersKey="Enter" AllowColumnFreezing="Yes" ShowFilterStatus="True" PagingMode="VirtualLoad"
        VerboseEditingInformation="False" FilterBarVisible="True" PagingExportMode="ExportAllData"
        CellPaddingDefault="0" AlwaysShowHelpButton="False" VirtualPageSize="25"          
        >
        <ClientSideEvents OnRowContextMenu="WebGrid1_OnRowContextMenu" OnAfterExitEditMode="WebGrid1_OnAfterExitEditMode" />
					<HeaderStyle BorderStyle="Solid" BorderWidth="1px" BackColor="#ECE9D8" ForeColor="Black" Height="20px"
						Font-Size="8pt" Font-Names="Verdana" BorderColor="#ACA899">
						<BorderSettings>
							<Left Color="White"></Left>
							<Top Color="White"></Top>
						</BorderSettings>
					</HeaderStyle>
					<FrameStyle BackColor="#F1EFE2"></FrameStyle>
					<GroupByBox>
						<LabelStyle BorderStyle="Solid" BorderWidth="1px" BackColor="White" Font-Size="8pt" Font-Names="Verdana"
							BorderColor="Navy"></LabelStyle>
						<Style BackColor="Gray">
						</Style>
					</GroupByBox>
					<EditTextboxStyle BorderStyle="None" BorderWidth="0px" Font-Size="8pt" Font-Names="Verdana"></EditTextboxStyle>
					<NewRowStyle BackColor="White" ForeColor="DarkGray" Font-Size="8pt" Font-Names="Verdana"></NewRowStyle>
					<FocusCellStyle BorderStyle="Solid" BorderWidth="1px" BorderColor="Navy"></FocusCellStyle>
					<RowStyle CustomRules="text-overflow: ellipsis; overflow-x: hidden" BackColor="White" Font-Size="8pt"
						Font-Names="Verdana"></RowStyle>
					<GroupRowInfoStyle BorderStyle="Solid" BorderWidth="1px" BackColor="#F1EFE2" Font-Size="8pt" Font-Names="Verdana"
						BorderColor="White">
						<BorderSettings>
							<Bottom Color="Silver"></Bottom>
							<Right Color="Silver"></Right>
						</BorderSettings>
					</GroupRowInfoStyle>
					<SelectedRowStyle BackColor="LightSteelBlue"></SelectedRowStyle>
					<AlternatingRowStyle CustomRules="text-overflow: ellipsis; overflow-x: hidden" BackColor="AntiqueWhite"
						Font-Size="8pt" Font-Names="Verdana"></AlternatingRowStyle>
					<StatusBarStyle BorderStyle="Solid" BorderWidth="1px" BackColor="#ECE9D8" Font-Size="8pt" Font-Names="Verdana"
						BorderColor="#ACA899">
						<Padding Bottom="2px" Left="2px" Top="2px" Right="2px"></Padding>
					</StatusBarStyle>
					<StatusBarCommandStyle>
						<Over BorderWidth="1px" BorderColor="Navy" BorderStyle="Solid" BackColor="CornflowerBlue"></Over>
						<Normal>
							<Padding Bottom="1px" Left="1px" Top="1px" Right="1px"></Padding>
						</Normal>
						<Active BackColor="RoyalBlue" BaseStyle="Over"></Active>
					</StatusBarCommandStyle>
					<PreviewRowStyle ForeColor="#0000C0"></PreviewRowStyle>
				</LayoutSettings>
				<RootTable DataKeyField="CustomerID" Caption="Customers" GridLineStyle="NotSet">
					<Columns>
					        <ISWebGrid:WebGridColumn Caption="Portfolio Name" Name="PortfolioNameList"  
                                                DataType="System.String" ColumnType="Text" EditType="NoEdit" NewRowEditType="NoEdit"
                                                FilterEditType="TextBox" Width="100px">
                                            </ISWebGrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="Address" DataMember="Address" Name="Address" Width="100px"></iswebgrid:WebGridColumn>
						 
					 <ISWebGrid:WebGridColumn Caption=" " Name="AddPortfolio" DataMember=""
                        ButtonText="Add Portfolio" DataType="System.String" ColumnType="Template" EditType="NoEdit"
                        NewRowEditType="SameAsEditType" FilterEditType="NoEdit" Width="65px">
                        <ButtonStyle BackColor="AliceBlue">
                            <Padding Top="2px" Left="1px" Right="1px" Bottom="1px" />
                        </ButtonStyle>
                        <CellTemplate>
                            <img runat="server" id="imgPortfolio"  alt="Manage this treaty's portfolios"
                                border="0" style="padding-top: 1px;"  
                             />
                        </CellTemplate>
                    </ISWebGrid:WebGridColumn>
                    
                <iswebgrid:WebGridColumn Caption="City" DataMember="City" Name="City" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="CompanyName" DataMember="CompanyName" Name="CompanyName" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="ContactName" DataMember="ContactName" Name="ContactName" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="ContactTitle" DataMember="ContactTitle" Name="ContactTitle" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="Country" DataMember="Country" Name="Country" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="CustomerID" DataMember="CustomerID" Name="CustomerID" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="Fax" DataMember="Fax" Name="Fax" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="Phone" DataMember="Phone" Name="Phone" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="PostalCode" DataMember="PostalCode" Name="PostalCode" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="Region" DataMember="Region" Name="Region" Width="100px"></iswebgrid:WebGridColumn>
					</Columns>
				</RootTable>
			</iswebgrid:webgrid>
			 
		</form>
	</body>
</HTML>

<BatchUpdateSettings HighlightChanges="false" />

I proprose applying a custom attribute during the WebGrid_SetRowBackgroundColor and re-apply the custom style during the AfterExitEditMode if the custom attribute exist.

I also found an alternative if you do not wish to have the modified row style in the Grid at all, you could just disable it in the BatchUpdate settings.

<BatchUpdateSettings HighlightChanges="false" />

This way, you do not have to implement the AfterExitEditMode event handler.

I don't see how making ANY changes within the AfterExitEditMode event will work given the background color is changed after? I provided sample code above to prove that.

Tyr using CSS instead of directly modifying the cell background color style. Here is the snippet:

<style type="text/css">
    .CustomRowColor
    {
        background-color: "#DC143C" !important;
    }
</style>

Instead of:

cell.style.setAttribute("backgroundColor", "Red", true);

Try:

cell.className += " CustomRowColor";

Tyr using CSS instead of directly modifying the cell background color style. Here is the snippet:

<style type="text/css">
    .CustomRowColor
    {
        background-color: "#DC143C" !important;
    }
</style>

Instead of:

cell.style.setAttribute("backgroundColor", "Red", true);

Try:

cell.className += " CustomRowColor";

 

This is on the right track. However, it might be necessary to remove that style. Here's a quick function that allows the adding/removing of a particular CSS to satisfy this problem.

Thanks for your help!

function WebGrid_SetRowCSS(gridID, row, css, addCSS) 
{
    var returnVal = false;

    try 
    {    
        // Set row's CSS
        if (row == null) { return false; }
        var rowCells = row.GetCells();
        if (rowCells == null) { return false; }

        // Get grid
        var grid = WebGrid_GetGrid(gridID);
        if (grid == null) { return false; }

        // Check if adding or removing CSS
        // NOTE: Assume adding
        if (typeof (addCSS) == "undefined") { addCSS = true; }
        
        // Get table's column length and starting position (Check Grouped Columns)
        var columnLength = grid.RootTable.Columns.length;
        indexNumber = (grid.RootTable.GroupedColumns.length > 0) ? 2 : 1;        
        var rowObject = row;
        if (rowObject.Type.toUpperCase() != "GROUPHEADER") 
        {
            for (var i = 1; i <= columnLength; i++)
            {
                var rowElement = rowObject.RowElement;
                if (rowElement != null) 
                {
                    var cell = rowElement.cells[i];
                    if (cell != null) 
                    {
                        // Set/Remove CSS
                        // NOTE: Only set CSS if it doesn't already exist
                        var cellCSS = cell.className;
                        if (addCSS == true)
                        {
                            if (cellCSS.match(css) == null)
                            {
                                cell.className += " " + css;
                            }
                        }
                        else 
                        {
                            cell.className = cellCSS.replace(css, "");
                        }                          
                    }
                }
            }
        }
        
        returnVal = true;
    }
    catch (ex) { ShowJSException(ex); returnVal = false; }

    return returnVal;
}