Retaining GridView cell color on postback

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

Rounded Corners - Colors for top and bottom?

I am trying to use rounded corners control, and its working fine, but I need to see if its possible to have the top of the control a differant color than the bottom?

is there a way to tell each corner to be a differant color? How about the bottom corners to be a smaller/larger size than the top?

Any advice would be helpful

Thanks

-Shane

You'd need to modify the implementation of RoundedCorners to get either of these features. If you do so and others find the changes desirable, we'd be happy to integrate them into the Toolkit!

RoundedCornersExtender - border instead of background color?

Does anyone know if there's a way to use a RoundedCornersExtender on a panel to create add just a border with rounded corners instead of having to set the whole background color?

In other words, picture a white page background, with a white background inside my panel, but i want a rounded black border around the panel. Is this possible?

Thanks in advance for any thoughts/suggestions.

-Gabe

RoundedCorners has a Color property. Set that to black, then set

style="border-left:thin black solid;border-right:thin black solid;"

on your element.

sburke_msft:

RoundedCorners has a Color property. Set that to black, then set

style="border-left:thin black solid;border-right:thin black solid;"

on your element.

A suggestion for futher releases of the toolkit would be to use less CSS and more properties... would help a lot and make development more intuitive...

Regards,

Felipe Oquendo
MCAD

Thanks for the feedback. It might make certain things more discoverable but there's really no way to mimic the power and flexibility found in CSS via properties.
Alas, this doesnt look very good at all. The borders don't meet up nicely with the top and bottom, and they're not nearly the same thickness. Any other suggestions, or am I doing something wrong?

Here's the markup I'm using:
<asp:Panel ID="panTest" runat="server" style="border-left:thin black solid;border-right:thin black solid;">
Some content goes here <br />
Some content goes here <br />
Some content goes here <br />
Some content goes here <br />
Some content goes here <br />
Some content goes here <br />
Some content goes here <br />
</asp:Panel>
<cc1:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server">
<cc1:RoundedCornersProperties Color="black" Radius="6" TargetControlID="panTest" />
</cc1:RoundedCornersExtender
Screenshot here:http://img130.imageshack.us/img130/6744/iescreenshot7mb.gif

Thanks for the screenshot - very helpful.

Try this instead:

<asp:Panel ID="panTest" runat="server" >

<div style="width:100%;border-left:thin black solid;border-right:thin black solid;">
Some content goes here <br />
Some content goes here <br />
Some content goes here <br />
Some content goes here <br />
Some content goes here <br />
Some content goes here <br />
Some content goes here <br />

</div>
</asp:Panel>

Thanks for the suggestion, but that doesn't look any better to me. Did you try it and get nice looking results?

No but I just did and if you make the borders a little wider I think it looks good:

<asp:PanelID="panTest"runat="server">

<divstyle="border-left:5px black solid;border-right:5px black solid;">

Some content goes here

<br/>

Some content goes here

<br/>

Some content goes here

<br/>

Some content goes here

<br/>

Some content goes here

<br/>

Some content goes here

<br/>

Some content goes here

<br/></div></asp:Panel>

ghollombe:

Does anyone know if there's a way to use a RoundedCornersExtender on a panel to create add just a border with rounded corners instead of having to set the whole background color?

In other words, picture a white page background, with a white background inside my panel, but i want a rounded black border around the panel. Is this possible?

The comments seem to have gotten off the original topic, and the original topic interests me a lot.

Let's get back to the original question...could the RoundedCornersExtender be modified to give us a rounded border option (and the option to set the thickness of the border)?

I have a case where we would like a rounded border (slghtly darker color than the content it surrounds). I see what the extender is doing..it adds several 1px high divs above and below. To get the rounding effect, they have left and right margins.

However, if it was modified to do a border, then it would have to work differently, which could be a little tricky. This is because at some point you would need an indented div of the border color that is only borderwidth wide, then a div of the background color, then an indented div of the border color again. I'm not sure if that works by itself or if you'd have to get into tables to do it.

Furthermore, you'd have to put a border on the left and right of the panel.

It would be useful and cool, but definitely more comlicated.

Hi Guys,

You were pretty close. The solution that appears to works across browsers for me is. It is just a shame the RoundedCornersProperties can't be driven from a stylesheet.

<div id="hello" runat="server">
<div style='border-left:thin black solid;border-right:thin black solid;'>
test
</div>
</div>
<cc1:RoundedCornersExtender ID="DropShadowExtender1" runat="server">
<cc1:RoundedCornersProperties TargetControlID='hello' Radius="10" Color="black" />
</cc1:RoundedCornersExtender>

have you tried something like this...

<asp:PanelID="Panel1"runat="server"Height="50px"Width="500px"BackColor="lightBlue"style="margin:10px 10px 10px 10px"><asp:PanelID="Panel2"runat="server"height="42px"BackColor=Whitestyle="margin: 0px 4px 0px 4px">

TEST

</asp:Panel></asp:Panel><AjaxToolkit:RoundedCornersExtenderID="RoundedCornersExtender1"runat="server"TargetControlID="Panel1"Radius=4/>

<AjaxToolkit:RoundedCornersExtenderID="RoundedCornersExtender2"runat="server"TargetControlID="Panel2"Radius=4/>

It may be one too many panels for you but it works

RoundedCornersExtender Properties

Hi,

I'm just looking for how to dynamically set the color (for example) for a RoundedCornersExtender ("rceRightCol") I put on a Master Page, if I'm on a separate Content page. For example, i might want the color (rounded corners color attribute) to be red while on page1, but blue while on page2.

Thanks.

Change the setting in Page_Load of the sub-page?