question

TReiser-1122 avatar image
0 Votes"
TReiser-1122 asked PeterMilchev-0174 edited

If same event happens in series, ModalPopupExtender gets stuck

I have a ModalPopupExtender tied to a Telerik RadListBox so that when an item is selected from the list box, I need a "Please Wait" message while the page behind loads the data into Telerik RadCharts. The Modal does Hide when the loading is completed. The problem I'm having is if the same list item is selected again, the Modal popup shows again, but never goes away. I've tried just about everything, but the click/selection of a list item in the RadListBox immediately shows the Modal and I can't seem to get before/inbetween the Modal showing to do any type of selected item checking to see if its the same item as before, and if so, then to do nothing or issue a Hide on the Modal.

Here is my Panel and Modal code (ASPX)

 <asp:Panel ID="pnlProgress" runat="server" Height="50px" Width="50px" >
      <div>
         <div class="popupbody">
             <table width="50%">
                 <tr>
                     <td align="center">
                     <asp:Image ID="imgProgress" runat="server" ImageUrl="~/_images/ajax-loader.gif" />
                     <br />
                     <br />
                     <asp:Label ID="lblLoading" runat="server" Text='Please wait...'
                          Font-Bold="true"></asp:Label>
                     </td>
                 </tr>
             </table>
         </div>
     </div>
 </asp:Panel>
    
 <ajaxToolKit:ModalPopupExtender ID="mpeProgress" runat="server" TargetControlID="lboxTestedMachines" PopupDragHandleControlID="pnlProgress"
 X="1000" Y="500" PopupControlID="pnlProgress" BackgroundCssClass="modalBackground" RepositionMode="RepositionOnWindowResize" BehaviorID="lboxTestedMachines">
 </ajaxToolKit:ModalPopupExtender>


And here is my ASPX.CS code

      protected void lboxTestedMachines_SelectedIndexChanged(object sender, EventArgs e)
    {
     int iResultID = Convert.ToInt32(lboxTestedMachines.SelectedValue);
    
     if (tbl_charts.Style.Value != "display:normal")
         tbl_charts.Style.Value = "display:normal";
    
     GetMachineName(iResultID);
    
     RdListView_Chart.DataSource = LoadCassetteForFoodChart(iResultID);
    
     GetApprovalRejectionStatus(iResultID);
    
    }






dotnet-csharpdotnet-entity-framework-coredotnet-aspnet-ajax
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @TReiser-1122 ,

: If your modalPopalExtender is no problem,your problem is RadListBox. I suggest you could ask for help in the Telerik Forums.


0 Votes 0 ·

@YijingSun-MSFT
YijingSun-MSFT avatar imageYijingSun-MSFTFollow
Microsoft Employee
3086
Reputation
391
Posts
0
Following
2
Followers
thanks for the reply and suggestion, however, I have put a breakpoint on the first line of the RadListBox OnSelectedItemIndexChanged event and I never hit it while debugging. I believe the issue is in the ModalPopupExtender for it "should" work the same way even if the same item is selected in series from the control it is tied to by the TargetControlID value. the RadListBox control does the post back and the page should just load up again the very same way with the modal showing while it does the DB pull and draws up the data in the grid components. Why the ModalPopupExtender even "cares" about the RadListBox item being selected is beyond me and that's why I'm reaching out for some glimmer of hope that someone else might have a resolution for this.

thanks again... TReiser

0 Votes 0 ·
Bruce-SqlWork avatar image
0 Votes"
Bruce-SqlWork answered TReiser-1122 commented

while you are displaying up the modal on click, you are counting on a post back to hide it. as the RadListBox appears to not post back if there is no change. you will either need to change how the popup is displayed and hidden (say use the client post back events) or contact RadListBox support and determine how to have it post back when no change in values.

note: you could probably review the RadListBox javascript code and fix the issue.

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi Bruce,
client post back events don't work. When I check the selected value client side, the modal shows. It is almost like doing anything client side on the RadListBox causes the selection event to fire and then due to the AjaxToolkit:ModalPopupExtender being tied to it via the TargetControlID, the modal shows. I tried the OnClientSelectedIndexChanging event on the RadListBox and I'm able to get the selected item, but I can't cancel the selection if it is the same item that is currently selected and therefore not allow the modal to show(again). It is the second time when it gets stuck and a page refresh has to be done to get the page back and the modal to disappear.


0 Votes 0 ·
PeterMilchev-0174 avatar image
0 Votes"
PeterMilchev-0174 answered PeterMilchev-0174 edited

The RadListBox has an internal logic on item click to determine if the item was already selected. If it was, it would not trigger the OnClientSelectedIndexChanging event, hence no postback on clicking a selected item.

The ModalPopupBehavior on the other hand reacts to any click event inside TargetControlID control's element. Here are some code snippets obtained using the browser's DevTools (search for Sys.Extended.UI.ModalPopupBehavior.prototype.initialize by following steps from Get IntelliSense for the client-side object)

 initialize: function() {
     Sys.Extended.UI.ModalPopupBehavior.callBaseMethod(this, "initialize"),
         this._isIE6 = Sys.Browser.agent == Sys.Browser.InternetExplorer && Sys.Browser.version < 7,
         this._popupDragHandleControlID && (this._dragHandleElement = $get(this._popupDragHandleControlID)),
         this._popupElement = $get(this._popupControlID),
         this._createDomElements(),
         this._showHandler = Function.createDelegate(this, this._onShow),
         $addHandler(this.get_element(), "click", this._showHandler),
         this._okControlID && (this._okHandler = Function.createDelegate(this, this._onOk),
             $addHandler($get(this._okControlID), "click", this._okHandler)),
         this._cancelControlID && (this._cancelHandler = Function.createDelegate(this, this._onCancel),
             $addHandler($get(this._cancelControlID), "click", this._cancelHandler)),
         this._scrollHandler = Function.createDelegate(this, this._onLayout),
         this._resizeHandler = Function.createDelegate(this, this._onLayout),
         this.registerPartialUpdateEvents(),
         this._resetAnimationsTarget(),
         this._onHiding.get_animation() && (this._hidingAnimationEndedHandler = Function.createDelegate(this, function () {
             this._isAnimationJustEnded = !0,
                 this.hide()
         }),
             this._onHiding.get_animation().add_ended(this._hidingAnimationEndedHandler)),
         this._onShowing.get_animation() && (this._showingAnimationEndedHandler = Function.createDelegate(this, function () {
             this._isAnimationJustEnded = !0,
                 this.show()
         }),
             this._onShowing.get_animation().add_ended(this._showingAnimationEndedHandler))
 },
 _onShow: function(e) {
     if (!this.get_element().disabled)
         return this.show(),
         e.preventDefault(),
         !1
 },

Solution 1: Subscribe to the Showing event of the ModalPopupBehavior and allow it to show only when you set a flag from the OnClientSelectedIndexChanging event. The example below stores the flag in the RadListBox client-side object as an expando property:

 <telerik:RadCodeBlock runat="server" ID="rdbScripts">
     <script type='text/javascript'> 
         function pageLoadHandler() {
             var modalPopupExtenderClientObject = $find("<%= mpeProgress.ClientID %>")
             modalPopupExtenderClientObject.add_showing(function (sender, args) {
                 // "sender" argument represents the Modal popup control client-side object
                 // sender.get_element() returns the DOM element of the RadListBox
                 // sender.get_element().control return the client-side object of the RadListBox where we stored the expando property __allowModalPopupShow 
                 if (sender.get_element().control.__allowModalPopupShow !== true) {
                     args.set_cancel(true);
                 }
             })
    
         }
    
         function OnClientSelectedIndexChanging(sender, args) {
             // sender in this context is the RadListBox client-side object
             sender.__allowModalPopupShow = true;
         }
    
         Sys.Application.add_load(pageLoadHandler);
     </script>
 </telerik:RadCodeBlock>

Solution 2: Use RadAjaxLoading panel and show it programmatically in OnClientSelectedIndexChanging:

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.