5 Replies - 11511 Views - Last Post: 02 April 2012 - 01:08 PM

#1 sh0td0wn  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 25-November 10

Triggering ModalPopupExtender from ListBox Item Select

Posted 29 February 2012 - 07:20 AM

Hi, I'm working on a web application and would like to know how to properly trigger a ModalPopupExtender by selecting an item from a ListBox. My problem is that it wouldn't fire the onselectedIndexChanged event in the ListBox and display the MPE from there. I do not know what is wrong.

So what I was doing was trying to display a ModalPopupExtender that will display the selected items on the listbox and the number of quantities for each item.

So what I did was create a ModalPopupExtender that has a hiddenbutton as the Target.ControlID so that I can manually fire it from a function from the codebehind which then fires a javascript function.

MPE Code
<cc1:ModalPopupExtender ID="mpe" runat="server"
                    OkControlID="OKButton" TargetControlID="btnHiddenMPE" PopupControlID="ModalPanel" BackgroundCssClass="ModalPopupBG">
                    </cc1:ModalPopupExtender>


Then I tried to add onselectedIndexChanged event on the ListBox to a function on the codebehind:
<asp:ListBox ID="listBox" runat="server" DataSourceID="XMLData" 
                    DataTextField="name" DataValueField="name" Height="167px" Width="385px" onselectedIndexChanged="listBApps_SelectedIndexChanged"
                    SelectionMode="Multiple" AutoPostBack="true" EnableViewState="true"  >


protected void listBox_SelectedIndexChanged(object sender, System.EventArgs e)
   {             
       collection = new ListItemCollection();
       foreach (ListItem item in listBox.Items)
       {
           if (item.Selected)
               collection.Add(item);
       }
              mpe.Show();
    }


That MPE would display this panel but as much as possible I would like to remove c# code from the aspx:
<asp:Panel ID="ModalPanel" runat="server" Width="500px" CssClass="modalPopup" EnableViewState="true">
                     
                        <%
                            Response.Write("<table>");
                            foreach (ListItem item in getCollection())
                          {
                                  Response.Write("<tr>");
                                  Response.Write("<td>");
                                  Response.Write(item.Text);
                                  Response.Write("</td");
                                  Response.Write("<td>");
                                  Response.Write("num of requests");
                                  Response.Write("</td>");
                                  Response.Write("</tr>");
                          }
                          Response.Write("</table>");
                          clearCollection();
                        %>
                   <asp:button ID="OKButton" runat="server" Text="Close"/>
                              
                </asp:Panel>


Is This A Good Question/Topic? 0
  • +

Replies To: Triggering ModalPopupExtender from ListBox Item Select

#2 Nakor  Icon User is offline

  • Professional Lurker
  • member icon

Reputation: 444
  • View blog
  • Posts: 1,492
  • Joined: 28-April 09

Re: Triggering ModalPopupExtender from ListBox Item Select

Posted 04 March 2012 - 09:31 PM

One nice thing about the ModalPopupExtender is that you don't need to execute it's show() method from the server, you can also call it on the client side. Since it looks like all you're doing is using the selected text and selected value to populate the table in the popup you should be able to do this all without ever sending a postback.

Well, here is a quick example I came up that will hopefully get you going. This example makes use of jQuery

<asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple" onchange="listbox_selecting();return false;">
        <asp:ListItem Text="Item 1" />
        <asp:ListItem Text="Item 2" />
        <asp:ListItem Text="Item 3" />
        <asp:ListItem Text="Item 4" />
    </asp:ListBox>
    
    <asp:Panel runat="server" ID="panelPopup" style="overflow: auto;border: 1px solid gray; background-color: white; padding: 10px;width: 100px; height: 100px; position: fixed; top: 49%; left: 49%;">
        <ul id="popup_content" style='list-style-type: none;'></ul>
    </asp:Panel>


    <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="panelPopup" TargetControlID="ListBox1">
    </cc1:ModalPopupExtender> 
    

    <script type="text/javascript">
        listbox_selecting = function () {
            var listbox = $('select[id$="ListBox1"] :selected');
            // Gets the selected items from the listbox

            var popup = $('#ModalPopupExtender1');
            // Gets the modal popup extender element

            var ul = $('#popup_content');
            // gets the ul element that I want to append the list items to


            // Now we go through each selected item in the list box and create an li
            // element that will be added to the ul
            var itemsToAppend = "";
            listbox.each(function (i, selected) {
                itemsToAppend += '<li>' + $(selected).text() + '</li>';
                // selected value can be retrieved using "$(selected).val()"
            });

            // Add the list items to the ul element
            ul.html(itemsToAppend);

            // Show the popup
            popup.show();
        }

        removeChildren = function (element) {
            element.each(function (i, item) { $(item).remove(); });
        }
    </script>


This post has been edited by Nakor: 04 March 2012 - 09:32 PM

Was This Post Helpful? 1
  • +
  • -

#3 sh0td0wn  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 25-November 10

Re: Triggering ModalPopupExtender from ListBox Item Select

Posted 13 March 2012 - 12:01 PM

I've tried the code snippet above, and to me it makes complete sense and simplifies everything with the removal of the requirement of a postback to the server. But the problem is that I seem to be getting an Object Expected Error with that code when I select item(s) from the ListBox.
Was This Post Helpful? 0
  • +
  • -

#4 sh0td0wn  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 25-November 10

Re: Triggering ModalPopupExtender from ListBox Item Select

Posted 13 March 2012 - 12:08 PM

It seems that only part of the Javascript/JQuery section that works is showing the popup which contains nothing.
Was This Post Helpful? 0
  • +
  • -

#5 sh0td0wn  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 25-November 10

Re: Triggering ModalPopupExtender from ListBox Item Select

Posted 02 April 2012 - 08:29 AM

BUMP
Was This Post Helpful? 0
  • +
  • -

#6 sh0td0wn  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 25-November 10

Re: Triggering ModalPopupExtender from ListBox Item Select

Posted 02 April 2012 - 01:08 PM

Nevermind, I got it to work. The function I was calling wasn't the right spelling as declared so I was stressing for nothing xD
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1