Intersoft Community - WebGrid Enterprise - How to change cell fore color on lost focus of the cell in WebGrid ?

How to change cell fore color on lost focus of the cell in WebGrid ?

Glayaar — Thu, 20 May 2010 21:57:13 GMT

In my test for both FireFox 3.6.3 and Safari 4.0.5 I found that the method will work without any issue. The edited cell will have a red color as the result of the snippet.

How to change cell fore color on lost focus of the cell in WebGrid ?

desaigs81 — Thu, 20 May 2010 05:33:01 GMT

This solution is not working for Firefox and Safari.

How to change cell fore color on lost focus of the cell in WebGrid ?

Glayaar — Thu, 08 Apr 2010 00:01:09 GMT

WebGrid will rewrite the style and class name after updating a row. If you wish to preserve the style you set during ExitEditMode client side event you will need to buffer the modified style during BeforeUpdate client side event handler and re-apply the style during AfterUpdate client side event handler. Here is the snippet, I am using class name to modify the edited cell:

var EditedCell = "";
var KeyValue = "";

function wgTest_OnExitEditMode(controlId, tblName, editObject)
{
	var wgTest = ISGetObject(controlId);

	editObject.cellElement.className += " Edited-Cell";
	
	return true;
}

function wgTest_OnBeforeUpdate(controlId, tblName, rowObject)
{
	var wgTest = ISGetObject(controlId);
    
	var rowStruct = ["ID", "Name", "Author", "Category"];
	for (var i = 0; i < rowStruct.length; i++)
	{
	    var className = rowObject.GetCell(rowStruct[i]).CellElement.className;
	    if (className.indexOf("Edited-Cell") > 0)
	    {
	        EditedCell += rowStruct[i] + ";";
	    }
	}

	KeyValue = rowObject.KeyValue;
	EditedCell = EditedCell.length > 0 ? EditedCell.substr(0, EditedCell.length - 1) : EditedCell;
	
	return true;
}

function wgTest_OnAfterUpdate(controlId, tblName, rowObject, xmlResponseObject)
{
	var wgTest = ISGetObject(controlId);

	setTimeout(function()
	{
	    var rowEditObj = wgTest.RootTable.GetRowByKeyValue(KeyValue);
	    var rowStruct = EditedCell.split(";");
	    for (var i = 0; i < rowStruct.length; i++)
	    {
	        rowEditObj.GetCell(rowStruct[i]).CellElement.className += " Edited-Cell";
	    }
	    EditedCell = "";
	    KeyValue = "";
	}, 10);
	
	return true;
}

How to change cell fore color on lost focus of the cell in WebGrid ?

desaigs81 — Wed, 07 Apr 2010 04:54:14 GMT

We are using WebGrid 7.0 in SharePoint web part where we are rendering the web part programatically.

We have inline editing enabled in our web grid where we are allowign users to enter data. We want to change font color to (E.g. To RED) after cell editing is done and the focus is moved out of the cell being edited.

We have used the following JavaScript code for the same:

function WebUIGrid_OnExitEditMode(controlId, tblName, editObject) 
{
    editObject.cellElement.style.color = "red";
    return true;
}

But after this gets executed, the server side event "UpdateRow" gets executed and it changes the color back to the default color. So we tried to set the forecolor as Red with the following code written in WebGrid_UpdateRow serverside event:

WebGridRow modifiedRow = e.Row;
            WebGridCellCollection cellCollection = modifiedRow.Cells;
            for(int cellCount = 0; cellCount < cellCollection.Count; cellCount++)
            {
                if (cellCollection[cellCount].DataChanged)
                    cellCollection[cellCount].Style.ForeColor = Color.Red;
            }

But the problem with this approach is that if we change Cell 6, moves the focus out of this row, this code gets executed and cell 6 becomes red in color. Next (Before saving the values) if we change Cell 7 of the same row then we will find only Cell 7 in red and Cell 6 gets the default fore color.

Any help on this would be greatly appreciable.

Thanks.