iSeller Commerce
iSeller POS Retail
iSeller POS F&B
iSeller POS Express
Crosslight
WebUI
ClientUI
What's New
Download Trial
Web Solution
Mobile Solution
Enterprise Solution
Custom Development
Blog
Community
Latest Development Blogs
ForumPostTopic
Browse By Tag
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.
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;}
This solution is not working for Firefox and Safari.
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.
or
Choose this if you're already a member of Intersoft Community Forum. You can link your OpenID account to your existing Intersoft Social ID.
Choose this if you don't have an Intersoft account yet. Your authenticated OpenID will be automatically linked to your new Intersoft account.
Enter your Wordpress Blogname