Solved

Modap Popup with Drag Panel Extender in User Control

Posted on 2009-04-01
5
2,091 Views
Last Modified: 2012-08-13
I have a user control that contains a table, two panels and two modal popups, where each panel is displayed modally.  I'm trying to add Drag Panel Extenders to each panel so they are modal and can be moved around the screen.

It is kind of working, however when the modal panel is displayed and I click on the panel to move it, the panel drops down to the bottom of the screen.  My cursor will be where the panel was originally and if I move the cursor the panel does move, but the panel is always about half a screen down below the cursor.  I think this has something to do with being in a user control?

My code is attached.  This is working in IE.  
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ContactNumberMaintenance.ascx.cs" Inherits="SDI.Presentation.UserControls.EntityContactNumberMaintenance.ContactNumberMaintenance" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register Assembly="EmptyGridView" Namespace="SDI.Sys.ThirdParty" TagPrefix="cc2" %>
<link href="../../Styles/Entity.css" rel="stylesheet" type="text/css" />
<link href="../../Styles/ModalPopup.css" rel="stylesheet" type="text/css" />
<asp:HiddenField ID="hfEntityID" runat="server" />
<asp:HiddenField ID="hfSelectedContactNumber" runat="server" />                              
    <table>
        <tr>
            <td valign="top">
                <asp:Label ID="lblContactNumberTitle" runat="server"></asp:Label>
            </td>
            <td valign="top">
                <asp:Panel ID="pnlShowContactNumber" runat="server">
                    <asp:Label ID="lblContactNumber" runat="server"></asp:Label>
                </asp:Panel>
                <asp:Panel ID="pnlNoContactNumber" runat="server">
                    <asp:Label ID="lblNoContactNumber" runat="server" Enabled="false"></asp:Label>
                </asp:Panel>
            </td>
        </tr>                           
        <tr>
            <td colspan="2">
                <asp:LinkButton ID="lbtnSelectContactNumber" runat="server" onclick="lbtnSelectContactNumber_Click"></asp:LinkButton>
                &nbsp;
                <asp:LinkButton ID="lbtnClearSelection" runat="server" onclick="lbtnClearSelection_Click"></asp:LinkButton>
            </td>
        </tr>     
    </table>
    
    <!-- ------- MODAL TO DISPLAY A LIST OF CONTACT NUMBERS - SELECT, ADD & EDIT FUNCTIONS FROM THIS MODAL -->
    
<cc1:DragPanelExtender ID="dpePopupConactNumber" runat="server" TargetControlID="pnlPopupContactNumber">
</cc1:DragPanelExtender>
    <cc1:ModalPopupExtender ID="mpeContactNumber" runat="server"
        PopupControlID="pnlPopupContactNumber" TargetControlID="lbtnPopupContactNumber"
         BackgroundCssClass="modalBackground">
    </cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopupContactNumber" runat="server" CssClass="ModalPopup" Style="display: none">
    <div class="ModalHeader">
        <div class="content">
            Select Contact Number
        </div>
    </div>
    <div class="ModalBody" style="height:100%">
        <div class="content">
            <asp:LinkButton ID="lbtnPopupContactNumber" runat="server" Visible="true" CssClass="hide"></asp:LinkButton>
            <cc2:EmptyGridView ID="gvContactNumbers" runat="server" AutoGenerateColumns="False"
                CellPadding="5" DataKeyNames="ID" ShowFooter="True" ShowFooterWhenEmpty="True"
                ShowHeaderWhenEmpty="True" OnRowEditing="gvContactNumbers_RowEditing" OnRowCommand="gvContactNumbers_RowCommand"
                OnSelectedIndexChanged="gvContactNumbers_SelectedIndexChanged">
                <Columns>
                    <asp:TemplateField ShowHeader="False">
                        <ItemTemplate>
                            <asp:LinkButton ID="lbtnSelect" runat="server" CausesValidation="False" CommandName="Select"
                                Text="Select"></asp:LinkButton>
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:LinkButton ID="lbtnNew" runat="server" CausesValidation="False" CommandName="New"
                                Text="Add New Contact Number" />
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField ShowHeader="False">
                        <ItemTemplate>
                            <asp:LinkButton ID="lbtnEditContactNumber" runat="server" CausesValidation="False"
                                CommandArgument='<%# Bind("ID") %>' CommandName="Edit" Text="Edit"></asp:LinkButton>
                            <asp:HiddenField ID="hfContactNumberUpdateCount" runat="server" Value='<%# Bind("UpdateCount") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Contact Number Type">
                        <ItemTemplate>
                            <asp:Label ID="lblContactNumberType" runat="server" Text='<%# Bind("TypeDescription") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Number">
                        <ItemTemplate>
                            <asp:Label ID="lblNumber" runat="server" Text='<%# Bind("DisplayContactNumber") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Extension">
                        <ItemTemplate>
                            <asp:Label ID="lblExtension" runat="server" Text='<%# Bind("Extension") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Do Not Contact">
                        <ItemTemplate>
                            <asp:CheckBox ID="chkGvDoNotContact" runat="server" Checked='<%# Bind("DoNotContact") %>'
                                Enabled="false" />
                        </ItemTemplate>
                        <ItemStyle HorizontalAlign="Center" />
                    </asp:TemplateField>
                </Columns>
            </cc2:EmptyGridView>
        </div>
    </div>
    <div class="ModalFooter">
        <div class="content">
            <asp:LinkButton ID="lnkbtnCancelContactNumber" runat="server" CausesValidation="False"
                Text="Cancel" />
        </div>
    </div>
</asp:Panel>
    
<!-- ------- MODAL TO EDIT A SELECTED CONTACT NUMBER OR ADD A NEW CONTACT NUMBER -->
<cc1:DragPanelExtender ID="dpeEditContactNumber" runat="server" TargetControlID="pnlEditContactNumber" DragHandleID="pnlEditContactNumber">
</cc1:DragPanelExtender>
<cc1:ModalPopupExtender ID="mpeEditContactNumber" runat="server" PopupControlID="pnlEditContactNumber"
    TargetControlID="lbModalEditContactNumber" BackgroundCssClass="modalBackground"
    Enabled="True">
</cc1:ModalPopupExtender>
<asp:LinkButton ID="lbModalEditContactNumber" runat="server" Visible="true" CssClass="hide"></asp:LinkButton>
<asp:Panel ID="pnlEditContactNumber" runat="server" CssClass="ModalPopup" Width="50%"
    Style="display: none">
    <div class="ModalHeader">
        <div class="content">
            <asp:Label ID="lblMode" runat="server" Text=""></asp:Label>
        </div>
    </div>
    <div class="ModalBody" style="height: 100px">
        <div class="content">
            <asp:HiddenField ID="hfContactNumberID" runat="server" />
            <asp:HiddenField ID="hfContactNumberUpdateCount" runat="server" />
            <table>
                <tr>
                    <td style="width: 20%">
                        <asp:Label ID="Label4" runat="server" Text="Contact Number Type:"></asp:Label>
                    </td>
                    <td>
                        <asp:DropDownList ID="ddlContactNumberType" runat="server">
                        </asp:DropDownList>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="Label" runat="server" Text="Number:"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtNumber" runat="server"></asp:TextBox>
                        <cc1:MaskedEditExtender ID="txtNumber_MaskedEditExtender" runat="server" CultureAMPMPlaceholder=""
                            CultureCurrencySymbolPlaceholder="" CultureDateFormat="" CultureDatePlaceholder=""
                            CultureDecimalPlaceholder="" CultureThousandsPlaceholder="" CultureTimePlaceholder=""
                            Enabled="True" Mask="(999)999-9999" TargetControlID="txtNumber">
                        </cc1:MaskedEditExtender>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="Label12" runat="server" Text="Extension:"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtExtension" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="Label37" runat="server" Text="Do Not Contact:"></asp:Label>
                    </td>
                    <td>
                        <asp:CheckBox ID="chkDoNotContactNumber" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="ModalFooter">
        <div class="content">
            <asp:LinkButton ID="lbtnSaveContactNumber" runat="server" Text="Save" OnClick="lbtnSaveContactNumber_Click"></asp:LinkButton>
            &nbsp;&nbsp;
            <asp:LinkButton ID="lbtnCancelContactNumber" runat="server" Text="Cancel" OnClick="lbtnCancelEditContactNumber_Click"></asp:LinkButton>
        </div>
    </div>
</asp:Panel>

Open in new window

0
Comment
Question by:weimha
  • 3
  • 2
5 Comments
 
LVL 15

Accepted Solution

by:
NazoUK earned 500 total points
ID: 24039081
The modalpopupextender already comes with functionality to enable dragging. There is no need to add a dragpanelextender to it.

Do you have anything in your style sheet that alters the margin or position of the element that contains the modal popups? I've found this can have an adverse affect.
0
 

Author Comment

by:weimha
ID: 24039209
I attached my style sheet.  I also removed the drag extender and I am using the drag options on the modal popup extender.

.ModalHeader
{
    background-position: left top;
    color: #000000;
    border-color: #333333 #333333 #999999 #333333;
    border-style: solid;
    border-width: 1px;
    padding: 3px 10px;  
    font-weight: bold;
    background-image: url('../../../../Images/ModalPopupHeader.png');
    background-repeat: repeat;
}
 
.ModalHeader .content /* The header contents */
{
    font-weight: bold;
    
}
 
.ModalBody
{
    padding: 10px 10px 10px 10px;
    background-color: #FFFFFF;
    border-color: #333333;
    border-style: solid;
    border-width: 0px 1px;
 
}
 
.ModalBody .content
{
    float: left;
    padding-left: 22px;
    padding-bottom: 50px;
}
 
.ModalFooter
{
    border-color: #333333;
    border-style: none solid solid solid;
    border-width: 1px;
    text-align: right;
    padding-bottom: 4px;
    padding-right: 8px;
    padding-top: 4px;
    background-color: #FFFFFF;
 
}
 
.ModalFooter .content /* The footer contents */
{
   
}

Open in new window

0
 

Author Comment

by:weimha
ID: 24039247
More styles
/* The main style of the panel */
.ModalPopup
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    padding: 2px 3px;
    display: block;
    position: absolute;
    z-index: 1000;
  /*  width: 300px; */
}

Open in new window

0
 
LVL 15

Expert Comment

by:NazoUK
ID: 24048183
I had a play about with the code you posted. It seemed to work ok as is. How is the user control placed on the containing page?
0
 

Author Comment

by:weimha
ID: 24091552
After more research we found that  there is a position absolute in our master page styles.  We are trying to get ride of that and we think that will fix the problem.  Thanks.
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
SQL Exceptions 3 43
Make an ajax call ithat alters url and updates a listview in asp.net 1 34
Pagebreak issue while printing the aspx page 3 24
imap mails 1 22
User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
In this video I am going to show you how to back up and restore Office 365 mailboxes using CodeTwo Backup for Office 365. Learn more about the tool used in this video here: http://www.codetwo.com/backup-for-office-365/ (http://www.codetwo.com/ba…
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now