Monday, March 26, 2012

Updating GridView control in a ModalPopupExtender

I feel that this should be a simple enough pattern, but I'm having trouble figuring out what's best to do, and how to implement it...

Offically sactioned best practices needed!

I've got a page with a gridview on it, where a link button in each row can pop up a panel using the ModalPopupExtender in order to allow the user to edit details from another table. The panel that pops up has a gridview on it that allows for in-line editing of rows in this secondary table. I show Edit and Delete buttons for each row, and when in Edit mode, I show the user Update and Cancel buttons. The panel itself has only a Close button referenced as the OKControlID of the ModalPopupExtender. The first gridview is enclosed in an UpdatePanel to avoid unnecessary page reloads since nothing the user does on the popup will affect the results of the top gridview.

My question is this: What is the best way to ensure that the user has clicked either Update or Cancel in the gridview before closing the popup? I would like to do this so that I ensure that the gridview on the popup is returned to ReadOnly view for the next possible edit and not left in Edit mode.

First Attempted Solution:

No validation needs to take place, so ideally I would simply like to automatically update whatever the user may or may not have done in order to return the gridview to edit mode. I tried to remove btnClose as the OKControlID of the popup extender and put server side code in the OnClick event of the button instead to detect if the gridview was in edit mode (EditIndex<>-1) and then call the UpdateRow method for the current row. This worked, but the page reload caused by this button is undesirable. If there was some way to fire off the UpdateRow method from the client side (i.e. from the OnOKScript of the popup extender), this would be ideal.

Second Attempted Solution:

I also tried to simply disable the Close button on the panel via client side script when I click the Edit button in the gridview and then re-enable it when the user clicks Update or Cancel, thus preventing the closing of the popup until the user has performed one of those tasks, but I can't figure out the javascript needed for those buttons' OnClientClick properties.

Any help with either method (or suggestions on an alternate one!) would be greatly appreciated...

- Ronn

I found my own workaround to this by simply not utilizing an OKControlID button on the panel at all. I put code in the ItemUpdated and ItemDeleted events of the GridView itself to call back to a public method of the form which calls the ModalPopupExtender.Hide() method.


I use this technique when making a progress bar visible/invisible:

var imgBar = document.images.namedItem("imgProgBar");
imgBar.style.visibility = "visible";

Perhaps you could use this idea within your OnLoad() and OnUnLoad() functions.

Either that or I believe you could use the "enabled" attribute as well. You should verify that, though.

Good luck,

Bob

No comments:

Post a Comment