I have a GridView in an UpdatePanel in which I use JavaScript to allow the user to change cell colors on the fly. It works great, until a postback occurs in which case, all of the user changes are lost. How do I maintain the cell colors after postback? I am trying to use a Save button to store the status of each cell to a database. Unfortunately, the cell colors are reset immediately, so even the save routine does not work correctly.
Thanks for any help you can provide,
Todd
Here is the script used to change the color of a cell when the user right-clicks on it:
<script type="text/javascript"><!-- /* script for changing the background color of the table cells based on the "Selection Mode" */ document.getElementById('ctl00_MainContentPlaceHolder_gvWafer').onmousemove = MouseMove; document.getElementById('ctl00_MainContentPlaceHolder_gvWafer').onmousedown = MouseMove; document.getElementById('ctl00_MainContentPlaceHolder_gvWafer').oncontextmenu = DontShowContext; document.getElementById('ctl00_MainContentPlaceHolder_gvWafer').onmouseup = MouseUp; // handle the MouseMove event for the GridView control function MouseMove(event) { // IE doesn't pass the event object, so we have to pass it manually if (event == null) event = window.event; /* only select table cells if the right mouse button is pressed and the underlying item is a 'TD' element (table data) */ if (event.button == 2 && event.srcElement.tagName == 'TD') { var cell=event.srcElement; var cellValue=cell.innerHTML; /* display the row and column indexes in the browser status bar */ window.status="row, column = " + cell.cellIndex + "," + cell.parentElement.rowIndex; /* determine which item in the Selection Mode drop down list box is selected */ switch(document.getElementById( 'ctl00_MainContentPlaceHolder_ddlSelectMode').getAttribute( 'selectedIndex')) { case 1: // available /* Don't allow cells marked as QC Samples to be marked Available */ if (cell.style.backgroundColor != '#996600') { // GREEN cell.style.backgroundColor='#00FF00'; } break; case 2: // picked /* Don't allow cells marked as QC Samples to be marked as Picked */ if (cell.style.backgroundColor != '#996600') { if (cellValue >= 20 || cellValue <= 200) { // GRAY cell.style.backgroundColor='#999999'; } else { // WHITE cell.style.backgroundColor='#FFFFFF'; } } break; case 3: // reserved /* Don't allow cells marked as either Picked or QC Samples to be marked as Reserved */ if (cell.style.backgroundColor != '#996600' && cell.style.backgroundColor != '#999999') { if (cellValue >= 20 || cellValue <= 200) { // PURPLE cell.style.backgroundColor='#9933CC'; } else { // WHITE cell.style.backgroundColor='#FFFFFF'; } } break; default: return; } } } /* clear the status bar data */ function MouseUp(event) { window.status = ""; } /* handle the ContextMenu event for the GridView control - Don't show the default context menu */ function DontShowContext(event) { return false; } if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded(); // --></script>You are going to need to save these styles and reinitalize them on the callback of the UpdatePanel e.g.:
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequestMethod);
prm.add_beginRequest(BeginRequestMethod);
...or you can add your logic to the server side. The problem is that you are rebinding the whole GridView and obviously client-side changes aren't persisted.
-Damien
Get the current PageRequestManager instane and
try to use beginRequest and endRequest
Thanks for both of your inputs. I don't know why I expected the JavaScript to make the changes to the GridView control. I forgot that the GridView control is rendered as a Table and that the JavaScript was simply modifying the Table. I actually took a little bit different route to solve the problem (I didn't see your replies until just a few minutes ago...had email notification turned off by mistake).
So, since the GridView is rendered as a Table and JavaScript cannot change GridView properties, I had to somehow track the changes that were made to the Table and propagate them to the GridView control.
I decided to create a TextBox control in which the JavaScript code would write the changes made to the cells (in the format "[row],[column]=[color]\n"). My VB code then parses out those changes and makes the corresponding change in the GridView control. I make the width and height of the TextBox zero so that it is not visible.
It may not be the best way to accomplish the task, but it is working. Since this is for an intranet application, and I have a ton more work to do, I am going to stick with it. The next time I run into a problem like this I will keep the other suggested solutions in mind.
Thanks,
Todd
