Home Contact

The Frog Pond of Technology

Ripples of Knowledge for SharePoint and Other .Net Technologies

News

My blog has moved to WordPress at BrianTJackett.com. Any pages will automatically redirect to the new address in 7 seconds. Please excuse an issues during this migration.

 Subscribe to this blog


About Me

Name:
Brian T. Jackett
Location:
Columbus, OH
Company:
Microsoft

Find me on...

Tag Cloud


Archives

Post Categories

Syndication:

An Alternative for the Modal Popup in SharePoint 2007

This week I got to play with some of the controls in the AJAX Control Toolkit, specifically the Modal Popup Extender.  I hadn’t gotten a chance to sink my teeth into anything AJAX so I was pretty excited to see what it offers.  On my current project I’m building custom web parts for a SharePoint application being used on limited size screens (think 800x600).  As such we need to be very resourceful with screen real estate and limit the number of page changes.

The Modal Popup Extender sounded like a great fit for popping up additional entry forms without causing the user to navigate away from the primary entry screen.  As many people who have attempted to implement the Modal Popup Extender on SharePoint can attest (example 1 & example 2) there are compatibility issues with properly viewing the popup.  I quickly ran into some of those issues with the pop up not appearing at the X and Y coordinates specified, the background CSS wasn’t properly rendered, or a host of other errors.  I added the below DOCTYPE tag to the master page as suggested by many people.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Adding the DOCTYPE did help rendering the modal popup, but I began to see errors rendering out of the box SharePoint controls.  As I wasn’t willing to sacrifice out of the box controls for the modal popup extender, we began to search for alternatives.

I quickly found an example offered on a forum, but the formatting and implementation were not very clean or well suited to my needs.  I decided to clean up the code and below is what resulted.  Now we have a modal popup box with disabled background functioning through a web part.

Add the first control which will be the darkened background panel.

private Panel ModalBackgroundPanelControl()
{
// panel will hold modal popup items
Panel pnlModal = new Panel();
pnlModal.ID = "pnlModal";
pnlModal.Style["display"] = "none";
pnlModal.Style["position"] = "absolute";
pnlModal.Style["left"] = "0px";
pnlModal.Style["top"] = "0px";
pnlModal.Style["z-index"] = "9";
pnlModal.Style["background-color"] = "#383838";
pnlModal.Style["filter"] = "alpha(opacity=60)";
 
return pnlModal;
}

Add the second control which will be the modal popup panel.  This panel contains an update panel which will house some controls of its own (buttons, textboxes, inputs, etc).  I place all but the OK button inside this update panel since we want only the OK button to perform a postback (which resets the modal popup) and the other input controls to maintain the modal popup.

 

 

private Panel ModalSelectStoresPanelControl()
{
    Panel pnlSelectStores = new Panel();
    pnlSelectStores.ID = "pnlSelectStores";
    pnlSelectStores.Style["display"] = "none";
    pnlSelectStores.Style["position"] = "absolute";
    pnlSelectStores.Style["left"] = "250px";
    pnlSelectStores.Style["top"] = "25px";
    pnlSelectStores.Style["z-index"] = "10";
    pnlSelectStores.Style["background-color"] = "#FFFFFF";
 
    // add update panel so that interior controls added don't perform postback
    // update panel contains its own controls for program logic
    pnlSelectStores.Controls.Add(ModalSelectStoresUpdatePanelControl());
 
    // add OK button control
    pnlSelectStores.Controls.Add(AcceptChangesButtonControl());
 
    return pnlSelectStores;
}

Lastly is a “Select Stores” button which will fire off the modal popup.  Note the Javascript event handler which essentially sets the display attribute to none or showing (block).

 

private Button SelectStoresButtonControl()
{
    Button btnSelectStores = new Button();
    btnSelectStores.ID = "btnSelectStores";
    btnSelectStores.Text = "Select Stores";
 
    // get reference to the client id for popup panels
    string modalPanelClientId = ((Panel)this.FindControl("pnlModal")).ClientID;
    string selectStoresPanelClientId = ((Panel)this.FindControl("pnlSelectStores")).ClientID;
 
    btnSelectStores.Click += new EventHandler(SelectStoresButtonClicked);
 
    // set onclick event so that popups display and resize to fit screen
    btnSelectStores.Attributes.Add("onClick", "javascript:document.getElementById('" + modalPanelClientId + "').style.width = document.body.clientWidth + 'px';document.getElementById('" + modalPanelClientId + "').style.height = document.body.clientHeight + 'px';document.getElementById('" + modalPanelClientId + "').style.display='block';document.getElementById('" + selectStoresPanelClientId + "').style.display='block';");
 
    return btnSelectStores;
}

Screenshots of the popup in action.  You can see that the popup contains a number of additional controls not shown above in my code.

ModalPopup1 ModalPopup2

 

 

 

 

 

 

 

 

 

There is one drawback that I haven’t yet overcome.  Currently my code resizes the background panel to be the size of the internet browser window.  If the user resizes the window or if the popup content extends beyond that size then the user can edit items in the newly extended area.  I will look into disabling resizing and scroll bars, but that doesn’t fully remove the problems.  If you have suggestions for overcoming those issues please feel free to share.


Wednesday, May 27, 2009 8:46 PM

Feedback

# re: An Alternative for the Modal Popup in SharePoint 2007

Hi,

Thanks for the post. Is there browser issues? i.e. Does this solutions works for FireFox 3.0 and IE browsers?

Thanks
-Hari 6/8/2009 2:39 AM | Hari

# re: An Alternative for the Modal Popup in SharePoint 2007

Hari,

Since this is development for Windows SharePoint Services 3.0 without Service Pack 2 applied I focused development primarily on IE 8 in compatibility view mode (essentially IE 7) to match our end users. I had not tested on FireFox during development. I just checked with FireFox 3.0.8 and I see that it is not fully compatible. The modal popup will display, but unfortunately the processing of button clicks and the transparency effects of the background do not work as intended. Hopefully this answers your question, let me know if it doesn't.

I will mention that Service Pack 2 for WSS 3 and MOSS 2007 is supposed to improve browser compatible for level 2 browsers (FireFox, Safari, etc). Perhaps with that applied you will get different results. We are planning on rolling out SP2 in our development environments in the coming months. I will update my post if I find new results. 6/8/2009 8:20 AM | Brian

# re: An Alternative for the Modal Popup in SharePoint 2007

Can you post all of the code there are a bunch of controls I can't seem to find in you snippits?

ModalSelectStoresUpdatePanelControl?
AcceptChangesButtonControl?
6/19/2009 10:47 AM | Scott Yokiel

# re: An Alternative for the Modal Popup in SharePoint 2007

Scott,

Sorry for the delay in responding, I was out of town the past few days.
Unfortunately I can't post all of the code as this code was developed at a client site and for legal reasons I don't "own" the code. The methods you listed are simplying functions returning a .net control (UpdatePanel and Button respectively) that make up the primary content for the modal popup. The panel contains a number of textboxes and listboxes for making selections while the accept button has a click event that handles saving the information in the varoius fields of the panel.
If you'd like me to provide stubbed out functions I can do so, but the funtionality is very basic in declaring a .net control and returning that. Let me know and thanks for reading. 6/21/2009 2:58 PM | Brian

# re: An Alternative for the Modal Popup in SharePoint 2007

Like your example however finding it difficult to implement with a refresh panel. When the modal panels are added to the refresh panel the modal functionality works momentarily until the refresh panel finishes with the postback. If I add the modal panels outside of the refresh panel they do not appear at all. I beleive my issue is not fully understanding the refresh panel but if you have time any help would be appreciated. 6/22/2009 10:59 PM | Chris M

# re: An Alternative for the Modal Popup in SharePoint 2007

Chris M,

To give you a little background into the architecture, I have a mix of Panels and UpdatePanels contained on the current version of my web part. I have 2 Panels that comprise the modal popup, one is the background grayed out portion and the other is the foreground "popup". The foreground popup then contains 3 primary pieces: accept button, cancel button (not included in my above example), and an update panel. One thing to be aware of is that javascript is being called to display the modal popup and background panels. Therefore a postback of the page will cause them to disappear (return to initial state.)
The purpose of the cancel button is to call javascript that simply hides (set display to 'none') for the popup panel. For performance reasons I encapsulate the cancel button in an updatepanel so it doesn't cause a postback. The accept button can have a click event, but really it only needs to cause a postback in my scenario which then triggers other custom code to fire causing the save of data.
The last piece is the updatepanel containing all of the controls that comprise my form (listboxes, buttons, and textboxes) for selecting an address. Since I am including buttons on that form I need to encapsulate it in an updatepanel so that no postbacks occur. Instead I use some lengthy javascript in the onClick event of the buttons to handle the selection and formatting of my address choices.
Hopefully this gives you a little insight into the structure of my design. If you'd like further help let me know and I'd be glad to shoot you an email. Thanks for the feedback. 6/24/2009 7:35 AM | Brian

# re: An Alternative for the Modal Popup in SharePoint 2007

Hi
I want you to post all of the code of these two methods:
ModalSelectStoresUpdatePanelControl?
AcceptChangesButtonControl?

pleaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaase !
7/24/2009 1:11 AM | Azumir

# re: An Alternative for the Modal Popup in SharePoint 2007

Azumir,

As I said in a comment above I'm not able to post all of the source code as it comes from a client engagement I'm working on.
The two functions that you mentioned are fairly straightforward though. ModalSelectStoresUpdatePanelControl returns a DataTable control (wrapped in an UpdatePanel) that contains the ListBoxes, Labels, and TextBoxes that you see in the in the last picture making up my addressing form. The AcceptChangesButtonControl method returns a Button control with an event handler for clicking the button. The event handler saves off any data filled out in my addressing form to a custom SharePoint list.
I hope this gives you a start for how to create the content to fill your pop up. Let me know if you have any additional questions. 7/25/2009 7:25 AM | Brian

# re: An Alternative for the Modal Popup in SharePoint 2007

Ok i see,
but i have another problem with the accept button: i mean that when i click the accept button nothing happen. when i tried to use another control in the panel like treeview the same problem persist (when i choice a node the postback event does't work).

Thanks for all. 7/27/2009 2:29 AM | Azumir

# re: An Alternative for the Modal Popup in SharePoint 2007

Azumir,

Make sure your button control isn't placed within an UpdatePanel (can prevent postback) or that you don't have any custom javascript disabling the postback (such as "return null." You'll also want to assign an eventhandler to your Click event (button.Click += ...). If you want to send me a snippet of your code I can check it over. My email is brian.jackett@gmail.com. Let me know if that helps. 7/27/2009 12:48 PM | Brian

# re: An Alternative for the Modal Popup in SharePoint 2007

I have a Hyperlink in List ,When click on link , have to populate the Modal Popup

please send some code for this

Thanks & regards
Narasimha 12/1/2009 11:35 PM | Narasimha

# re: An Alternative for the Modal Popup in SharePoint 2007

Narasimha,
Typically you use a Hyperlink control to redirect a user to a different URL, not for running custom code or logic on your page. You may want to look into using a Button control with an event handler such as the example in my code above. You would use something like

button.Click += new EventHandler(button_Clicked)

// inside event handler
{myTextbox.Text = "some value";}

Let me know if that helps. 12/2/2009 7:51 AM | Brian Jackett

# re: An Alternative for the Modal Popup in SharePoint 2007

Hello! I send you a Email.
I really need your help.

Thanks. 11/1/2010 3:19 PM | Lucas Eduardo

Post A Comment
Title:
Name:
Email:
Comment:
Verification: