CODEWITHSUNDEEP
asp.netdrop-down-menumodalpopupextender
Splunk
Splunk

Reputation: 499

ModalPopupExtender only show on Selected index changed event, not on clicking DropDownList?

I said in my last question and will say in this one too, basically my username reflects my experience!

I currently have a page with 2 listviews, one of which has a number of controls in the InsertItem template.

One of these controls in particuilar is a DDL and I have a Modal Popup Extender hooked up to it. I want to trigger the MPE only when a particular value(not index) is selected. Here is where I am up to now!

DropDownList ExpenseTypeDDL = 
    (DropDownList) Expenses.InsertItem.FindControl("ExpenseTypeDDL");
int ExpenseType = (Int32.Parse(ExpenseTypeDDL.SelectedValue.ToString()));

if (ExpenseType == 1)
{
    AjaxControlToolkit.ModalPopupExtender mpeMiles = 
        (AjaxControlToolkit.ModalPopupExtender)Expenses.InsertItem.
        FindControl("mpeMiles");
    mpeMiles.Show();
}

Above are the contents of the DDL SelectedIndexChanged event. This DDL is based on expense types, I want to target a particular value (db primary key) and then display the modal popup so the user can enter their mileage then do some other stuff after.

Here is my mpe

<cc1:ModalPopupExtender ID ="mpeMiles" TargetControlID ="ExpenseTypeDDL" 
    runat="server" DropShadow="true" PopupControlID="pnlMiles" 
    BackgroundCssClass="modalBackground" />
<asp:Panel CssClass="modalPopup" ID="pnlMiles" runat="server" 
    Height="170px">
    <div style="padding: 5px; text-align:center">
        <asp:Label ID="lblStart" runat="server">Start location.</asp:Label>
        <asp:TextBox ID="txtLocationStart" runat="server" />
        <asp:RequiredFieldValidator ID="reqLocation" runat="server" 
            ErrorMessage="You must enter a start location" 
            ControlToValidate="txtLocationStart" Display="Dynamic" Text="*" >
        </asp:RequiredFieldValidator>
        <asp:Label ID="lblDestination" runat="server">Destination.</asp:Label>
        <asp:TextBox ID="txtDestination" runat="server" />
        <asp:RequiredFieldValidator ID="reqDestination" runat="server" 
            ErrorMessage="You must enter a destination" 
            ControlToValidate="txtDestination" Display="Dynamic" Text="*" >
        </asp:RequiredFieldValidator>
        <asp:Label ID="lblMiles" runat="server">Please enter your Mileage</asp:Label>
        <asp:RequiredFieldValidator ID="reqMileage" runat="server" 
            ErrorMessage="You must enter your mileage" ControlToValidate="txtMiles" 
            Display="Dynamic" Text="*" ></asp:RequiredFieldValidator>
        <asp:TextBox ID="txtMiles" runat="server" />
        <br />
        <br />
        <asp:Button ID="btnMiles_OK" runat="server" Text="Save" 
            CausesValidation="false" />
        <asp:Button ID="btnMiles_Cancel" runat="server" Text="Cancel" 
            CausesValidation="false"/>
    </div>
</asp:Panel>

At the moment the mpe shows as soon as the DDL is clicked, but I want that to happen only for the selected value of 1.

Can someone please tell me what I am doing wrong?

TIA

dotnetnewb

Upvotes: 0

Views: 3962

Answers (1)

VinayC
VinayC

Reputation: 49195

This is happening because you have set up the DDL as target of your modal popup extender - so whenever target index is changed, the dialog is shown. The solution is to have an hidden button and make that a target control for modal popup extender - if your DDL has auto-postback as true then your server side code will check the selected index and popup the dialog.

From user experience perspective, unless you have UpdatePanel on page, this would mean on DDL change, page will refreshed and a dialog will be shown. You can also use modal pop-up javascript API to show/hide on DDL selected index change w/o doing post-back. For example,

$find('mpeMiles').show();

Upvotes: 1

Related Questions