Buy Questpond's video subscriptions on huge discount.
DotNetFunda.com
Online: 4052
Home > Forums > ASP.NET >

ModalPopup Extender Dropdownlist problem

Posted by Roopkt under ASP.NET on 3/19/2009 | Views : 19171 | Status : [Member] | Replies : 8
Write New Post | Search Forums | AnsweredResolved Posts | Un Answered Posts | Forums Home 
Usercontrol.ascx
<cc1:ModalPopupExtender BehaviorID="mdlSelectAll" ID="mdlSelectAll" runat="server" TargetControlID="pnlSelectAll" PopupControlID="pnlSelectAll" BackgroundCssClass="modalBackground" OnCancelScript="fnHideModalPopup('mdlSelectAll')" OkControlID="btnOk" CancelControlID="btnClose" />
<asp:Panel ID="pnlSelectAll" runat="server" BackColor="White" Height="100px" Width="400px" Style="display: none">
<asp:UpdatePanel ID="upAlerts" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<table cellpadding="0" id="tblSelectAll" cellspacing="0" border="0" style="width: 100%">
<tr>
<td colspan="2" style="width: 100%" valign="top" align="center">
<asp:DropDownList runat="server" ID="comboTest"> <asp:ListItem Text="a" Value=""></asp:ListItem> <asp:ListItem Text="b" Value=""></asp:ListItem> <asp:ListItem Text="c" Value=""></asp:ListItem> </asp:DropDownList>
</td>
</tr>
<tr>
<td style="width: 193px">
&nbsp;
</td>
</tr>
<tr>
<td style="width: 193px" valign="top" align="right">
<input
onserverclick="btnOK_Click"
id="btnOk"
runat="server"
type="button" value="OK" />
</td>
<td style="width: 50%">
<input id="btnClose" runat="server" type="button" value="Close" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>

Usercontrol.ascx.cs


protected void btnOK_Click(object sender, EventArgs e)
{
string hi = string.Empty;
}

.js file


function fnShowModalPopup(mdlBehaviourID)
{
var modal = $find(mdlBehaviourID);

modal.show();

}

function fnHideModalPopup(mdlBehaviourID)
{
var modal = $find(mdlBehaviourID);
modal.hide();
}



I have one main page inside that I have the user control in the usercontrol I do have the link to open up the MPE (modalpopup extender). But in main page also I have one grid inside that I have column having combo box. Also in I have certain combo boxes in main page also.

My requirement was, in MPE on click of OK button I want to save the selected value in Combo box. And on click of the close button I want to close the modal popup extender.

That's why on OK button's server click I had put a server side method to get the selected value of the combo and save it to database.

But when I am opening the popup extender and selecting some value from the combo box and clicking the OK button. One small flicker is occurring on the modal popup and server side method is being called. But after that if I am clicking on Close button then popup is not closing.

That means the moment I click on OK button server side method gets called but right after when I click on close button then fnHideModalPoup method is not getting fired and the MPE remains opened.

Also, when I open MPE then all the combo boxes in the main page is being hided. But when I open MPE and change some value in combo box of the MPE and click on Close button to hide the MPE then it hides the MPE but all the combo in the Main page remai

Regards,
Rupesh Kumar Tiwari

Reply | Reply with Attachment
Alert Moderator 

Responses

Posted by: Majith on: 3/19/2009 [Member] Starter

Up
0
Down
Greetings ,

For hiding the Model popup (in the OkCancelScript) call the following javascript: 

 <script type="text/javascript">

    function HideModalPop()

      {

        var MP = $find('MPExtender1');        

        MP .hide();

      }

      function showModalPop()

    {   window.parent.document.getElementById('ctl00_ContentPlaceHolder1_MPExtender1').show();

    }    

    </script>

Model Popup: 
<cc1:ModalPopupExtender ID="MPExtender1" runat="server" BackgroundCssClass="MPclass"

CancelControlID="imbOK" OkControlID="imbOK" OnCancelScript="HideModalPop()"

PopupControlID="panelPop" TargetControlID="panelPop">

</cc1:ModalPopupExtender>


Then for avoiding the flicker in the Panel add the attributes like:
Style="display: none" 

 

<asp:Panel ID="panelPop" runat="server"style="display: none">


Let me know any issues.

Roopkt, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Roopkt on: 3/20/2009 [Member] Starter

Up
0
Down
Thanks for your suggestions let me try with that ... but one more thing....
Why it is happening that after doing any server side activity on MPE it may be clicking of buttons or chaning the combo box value in MPE and after closing it; all the dropdownlist on the main page remains hidden they donot reappear. I have used update panel inside that i have put all the buttons and combos of the MPE.

Am I only facing this issue


Regards,
Rupesh Kumar Tiwari

Roopkt, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Roopkt on: 3/20/2009 [Member] Starter

Up
0
Down
Hi ,
Thanks for your quick reply....but
when i am using $find(id of Mpe) then i am getting null so i have to use the behaviour id.
Also i am using panel with visible none.
your suggestions not helped more!
Now changed my code lil bit but now the problem is:

Now what is happening after changing the combo box choice and clicking on close button is closing the mpe and the comboboxes on the main page are also reappearing this is fine. But the problem is after clicking on the Save button if i click on the close button then the mpe is not closing and it is being open. And when i do change in value of the combo box and clicks on the save button after that when i click on the close button then it is not closing the MPE rather it shows some time runtime js error:

Error : Microsoft JScript runtime error: 'this.get_element().style' is null or not an object

Below is my code:

<cc1:ModalPopupExtender BehaviorID="mdlSelectAll" ID="mdlSelectAll"

runat="server" TargetControlID="lknbtnSelectAllSecurities"

PopupControlID="pnlSelectAll" BackgroundCssClass="modalBackground"

CancelControlID="btnClose" >

</cc1:ModalPopupExtender>



<asp:Panel ID="pnlSelectAll" runat="server" BackColor="White" Height="100px" Width="400px" Style="display: none">

<asp:UpdatePanel ID="upAlerts" UpdateMode="always" runat="server">

<ContentTemplate>

<table cellpadding="0" id="tblSelectAll" cellspacing="0" border="0" style="width: 100%">

<tr>

<td align="center" colspan="2" style="background-color: #C4D0DC">

<asp:Label ID="lblHeaderSelectAll" runat="server" Text="Select desired Manager" SkinID="LabelFields"></asp:Label>

</td>

</tr>

<tr>

<td style="width: 193px">

</td>

</tr>

<tr>

<td colspan="2" style="width: 100%" valign="top" align="center">

<asp:DropDownList runat="server" ID="comboManagersSelectAll">

<asp:ListItem Text="28B00X15 BLACKROCK BAL TAX/LCC NRC MAA" Value=""></asp:ListItem>

<asp:ListItem Text="28B00X16 BLACKROCK BAL TAX/LCC NRC MAA" Value=""></asp:ListItem>

<asp:ListItem Text="28B00X17 BLACKROCK BAL TAX/LCC NRC MAA" Value=""></asp:ListItem>

</asp:DropDownList>

</td>

</tr>

<tr>

<td style="width: 193px">

</td>

</tr>

<tr>

<td style="width: 193px" valign="top" align="right">

<input title="click here to select the desired manager"

onserverclick="btnOK_Click" id="btnOk"

class="minibutton" runat="server"

type="button" value="OK" />

</td>

<td style="width: 50%">

<%--<input

title="click here to close the window" id="btnClose"

class="minibutton" runat="server" type="button"

value="Close"/>--%>

<asp:Button ID="btnClose" CssClass="minibutton" runat="server" Text="Close" />

</td>

</tr>

</table>

</ContentTemplate>

</asp:UpdatePanel>

</asp:Panel>



<tr id="trSelectAll" runat="server">

<td style="width: 100%" valign="top">

<a id="lknbtnSelectAllSecurities" runat="server">

<asp:Label CssClass="omdlink" ToolTip="Click here to select all" ID="lblSelectAll"

runat="server" Text=""></asp:Label>

</a>

</td>

</tr>

Kindly see this... and suggest me where i am wrong...




Regards,
Rupesh Kumar Tiwari

Roopkt, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Majith on: 3/20/2009 [Member] Starter

Up
0
Down
Roopkt,

you have totally confused with your code in Modelpopup understand basic needed things.

Dont use the BehavoirId and your TargetControlID ,PopupControlID will be same PanelId.


refer the code I have checked its working fine: 

<asp:ScriptManager ID="ScriptManager1" runat="server">

  </asp:ScriptManager>

    <div>    

<asp:LinkButton ID="lnkbtnAuditTrail" runat="server" OnClick="lbl_Click">  SHOW </asp:LinkButton> 



<asp:UpdatePanel ID="upAlerts" UpdateMode="Conditional" runat="server"> 

<ContentTemplate> 



<asp:Panel ID="pnlSelectAll" runat="server" BackColor="red" Height="100px" Width="400px" Style="display: none"> 



<asp:Label ID="lblHeaderSelectAll" runat="server" Text="Select desired Manager"></asp:Label> 



<asp:DropDownList runat="server" ID="comboManagersSelectAll"> 



<asp:ListItem Text="28B00X15 BLACKROCK BAL TAX/LCC NRC MAA" Value=""></asp:ListItem> 



<asp:ListItem Text="28B00X16 BLACKROCK BAL TAX/LCC NRC MAA" Value=""></asp:ListItem> 



<asp:ListItem Text="28B00X17 BLACKROCK BAL TAX/LCC NRC MAA" Value=""></asp:ListItem> 



</asp:DropDownList> 



<cc1:ModalPopupExtender  ID="ModalPopupExtender1" 



runat="server" TargetControlID="pnlSelectAll" PopupControlID="pnlSelectAll" 

OkControlID="imbOK" OnCancelScript="HideModalPopup()"  

 DropShadow="true"  

CancelControlID="imbOK"> </cc1:ModalPopupExtender> 



 <asp:LinkButton ID="imbOK" runat="server">

                                   Close           </asp:LinkButton>

</asp:Panel> 

</ContentTemplate> 

</asp:UpdatePanel>


Check it and reply



Roopkt, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Roopkt on: 3/20/2009 [Member] Starter

Up
0
Down
Dear Majith,
Thanks for your continous reply ...

But when i used your code then after changing any value in the combo box and then clicking on close button all the comboboxes in the parent page are not reappearing. Also, when i click on ok button to save the value of the mpe in database and then click on the close button then it is not closing the mpe.

but when i am using the following code (given bellow )then it is at least on closing of close button after changing the values in combo of mpe. it is closing the mpe also all the combo boxes on the parent page are reappearing.
only issue is when i click on ok button and then click close button then close button is not working and mpe remain opened. And some times on clicking close button after clicking ok button it shows js error:

Error : Microsoft JScript runtime error: 'this.get_element().style' is null or not an object

kindly run this code my main page is a content page inside the content page i am having mpe and link to open the mpe. 

<cc1:ModalPopupExtender BehaviorID="mdlSelectAll" ID="mdlSelectAll" 



runat="server" TargetControlID="lknbtnSelectAllSecurities" 



PopupControlID="pnlSelectAll" BackgroundCssClass="modalBackground"



CancelControlID="btnClose" >



</cc1:ModalPopupExtender>







<asp:Panel ID="pnlSelectAll" runat="server" BackColor="White" Height="100px" Width="400px" Style="display: none">



<asp:UpdatePanel ID="upAlerts" UpdateMode="always" runat="server">



<ContentTemplate>



<table cellpadding="0" id="tblSelectAll" cellspacing="0" border="0" style="width: 100%">



<tr>



<td align="center" colspan="2" style="background-color: #C4D0DC">



<asp:Label ID="lblHeaderSelectAll" runat="server" Text="Select desired Manager" SkinID="LabelFields"></asp:Label>



</td>



</tr>



<tr>



<td style="width: 193px">



 </td>



</tr>



<tr>



<td colspan="2" style="width: 100%" valign="top" align="center">



<asp:DropDownList runat="server" ID="comboManagersSelectAll">



<asp:ListItem Text="28B00X15 BLACKROCK BAL TAX/LCC NRC MAA" Value=""></asp:ListItem>



<asp:ListItem Text="28B00X16 BLACKROCK BAL TAX/LCC NRC MAA" Value=""></asp:ListItem>



<asp:ListItem Text="28B00X17 BLACKROCK BAL TAX/LCC NRC MAA" Value=""></asp:ListItem>



</asp:DropDownList>



</td>



</tr>



<tr>



<td style="width: 193px">



 </td>



</tr>



<tr>



<td style="width: 193px" valign="top" align="right">



<input title="click here to select the desired manager" 



onserverclick="btnOK_Click" id="btnOk" 



class="minibutton" runat="server" 



type="button" value="OK" />



</td>



<td style="width: 50%">



  <%--<input 



title="click here to close the window" id="btnClose" 



class="minibutton" runat="server" type="button" 



value="Close"/>--%>



<asp:Button ID="btnClose" CssClass="minibutton" runat="server" Text="Close" />



</td>



</tr>



</table>



</ContentTemplate>



</asp:UpdatePanel>



</asp:Panel>







<tr id="trSelectAll" runat="server">



<td style="width: 100%" valign="top">



<a id="lknbtnSelectAllSecurities" runat="server">



<asp:Label CssClass="omdlink" ToolTip="Click here to select all" ID="lblSelectAll"



runat="server" Text=""></asp:Label>



</a>



</td>



</tr>




on click of ok button i want to save the mpe selected value in db and after that on click of the close button i want to close the mpe.


Regards,
Rupesh Kumar Tiwari

Roopkt, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Roopkt on: 3/20/2009 [Member] Starter

Up
0
Down
Dear Majith,
Kindly suggest me any quick suggestion if you have ... why i am getting such problem...
Its lil urgent to me....

thanks in advance....

Regards,
Rupesh Kumar Tiwari

Roopkt, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Majith on: 3/21/2009 [Member] Starter

Up
0
Down
You have not modified the code as per my instruction , note the key points:

1. Remove the BehaviorId
2. Your TargetControlId and PopupcontrolId will be same
3. Add the Ajax ModelPopup Control inside the panel.
4. Do your database coding for storing dropdown values as normal method.
5.I have checked everything its working fine.

Attach your code in a zipped folder.let me try and get back to you.

Thanks.

Roopkt, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Roopkt on: 3/25/2009 [Member] Starter

Up
0
Down
Hi,
Finally I resolved the issue. Now I am using the below code and every thing is working fine with me.


<cc1:ModalPopupExtender BehaviorID="mdlSelectAll" ID="mdlSelectAll" runat="server"

TargetControlID="lknbtnSelectAllSecurities" PopupControlID="pnlSelectAll"

CancelControlID="btnCloseMPE" BackgroundCssClass="modalBackground"

DropShadow="true" OnCancelScript="fnHideModalPopup('mdlSelectAll')">

</cc1:ModalPopupExtender>



<asp:Panel ID="pnlSelectAll" runat="server" BackColor="White" Height="100px" Width="400px" Style="display: none">

<asp:UpdatePanel ID="upSelectAll" UpdateMode="always" runat="server">

<ContentTemplate>

<table cellpadding="0" id="tblSelectAll" cellspacing="0" border="0" style="width: 100%">

<tr>

<td align="center" colspan="2" style="background-color: #C4D0DC">

<asp:Label ID="lblHeaderSelectAll" runat="server" Text="Select desired Manager" SkinID="LabelFields"></asp:Label>

</td>

</tr>

<tr>

<td style="width: 193px">

&nbsp;</td>

</tr>

<tr>

<td colspan="2" style="width: 100%" valign="top" align="center">



<asp:DropDownList runat="server" ID="comboManagersSelectAll">

<asp:ListItem Text="28B00X15 BLACKROCK BAL TAX/LCC NRC MAA" Value=""></asp:ListItem>

<asp:ListItem Text="28B00X16 BLACKROCK BAL TAX/LCC NRC MAA" Value=""></asp:ListItem>

<asp:ListItem Text="28B00X17 BLACKROCK BAL TAX/LCC NRC MAA" Value=""></asp:ListItem>

</asp:DropDownList>

</td>

</tr>

<tr>

<td style="width: 193px">

&nbsp;</td>

</tr>

<tr>

<td style="width: 193px" valign="top" align="right">

<input title="click here to select the desired manager"

onserverclick="btnOK_Click" id="btnOk"

class="minibutton" runat="server"

type="button" value="OK" />

</td>

<td style="width: 50%">

&nbsp; <input

title="click here to close the window" id="btnCloseMPE"

class="minibutton" runat="server" type="button"

value="Close" onclick="fnHideModalPopup('mdlSelectAll')"/>

<%-- <asp:Button ID="btnClose" CssClass="minibutton" runat="server" Text="Close" />--%>

</td>

</tr>

</table>

</ContentTemplate>

</asp:UpdatePanel>

</asp:Panel>

Thanks to you for your useful suggestions...


Regards,
Rupesh Kumar Tiwari

Roopkt, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response

Latest Posts