I'm trying to expand a panel through a Radio Button List

Question

0.00/5 (No votes)

See more:

I have this Radio Button List:

<asp:RadioButtonList ID="flight" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" Width="500px" AutoPostBack="true">
                <asp:ListItem Text="Not Required" Value="Not Required"></asp:ListItem>
                <asp:ListItem Text="Required" Value="Required"></asp:ListItem>
            </asp:RadioButtonList>

And I want to be able to open a panel when "Required" is selected... here's the panel:

<asp:Panel ID="PanelFlight" runat="server" Visible="false">
               <div id="Flight">
                   <p class="space">3.3.1. Departure Information</p>
                   <p>Preferred start date and time:</p>
                   <p>
                       <asp:TextBox ID="flightDepartureStartDate" runat="server" Width="100px"></asp:TextBox>
                       <ajaxToolkit:CalendarExtender ID="CalendarExtender2"  runat="server" Format="dd-MM-yyyy" TargetControlID="flightDepartureStartDate">
                       </ajaxToolkit:CalendarExtender>
                       at
                       <asp:DropDownList ID="flightDepartureStartHour" runat="server">
                           <asp:ListItem>--</asp:ListItem>
                           <asp:ListItem>00</asp:ListItem>
                           <asp:ListItem>01</asp:ListItem>
                           <asp:ListItem>02</asp:ListItem>
                           <asp:ListItem>03</asp:ListItem>
                           <asp:ListItem>04</asp:ListItem>
                           <asp:ListItem>05</asp:ListItem>
                           <asp:ListItem>06</asp:ListItem>
                           <asp:ListItem>07</asp:ListItem>
                           <asp:ListItem>08</asp:ListItem>
                           <asp:ListItem>09</asp:ListItem>
                           <asp:ListItem>10</asp:ListItem>
                           <asp:ListItem>11</asp:ListItem>
                           <asp:ListItem>12</asp:ListItem>
                           <asp:ListItem>13</asp:ListItem>
                           <asp:ListItem>14</asp:ListItem>
                           <asp:ListItem>15</asp:ListItem>
                           <asp:ListItem>16</asp:ListItem>
                           <asp:ListItem>17</asp:ListItem>
                           <asp:ListItem>18</asp:ListItem>
                           <asp:ListItem>19</asp:ListItem>
                           <asp:ListItem>20</asp:ListItem>
                           <asp:ListItem>21</asp:ListItem>
                           <asp:ListItem>22</asp:ListItem>
                           <asp:ListItem>23</asp:ListItem>
                       </asp:DropDownList>
                       :
                       <asp:DropDownList ID="flightDepartureStartMinute" runat="server">
                           <asp:ListItem>--</asp:ListItem>
                           <asp:ListItem>00</asp:ListItem>
                           <asp:ListItem>01</asp:ListItem>
                           <asp:ListItem>02</asp:ListItem>
                           <asp:ListItem>03</asp:ListItem>
                           <asp:ListItem>04</asp:ListItem>
                           <asp:ListItem>05</asp:ListItem>
                           <asp:ListItem>06</asp:ListItem>
                           <asp:ListItem>07</asp:ListItem>
                           <asp:ListItem>08</asp:ListItem>
                           <asp:ListItem>09</asp:ListItem>
                           <asp:ListItem>10</asp:ListItem>
                           <asp:ListItem>11</asp:ListItem>
                           <asp:ListItem>12</asp:ListItem>
                           <asp:ListItem>13</asp:ListItem>
                           <asp:ListItem>14</asp:ListItem>
                           <asp:ListItem>15</asp:ListItem>
                           <asp:ListItem>16</asp:ListItem>
                           <asp:ListItem>17</asp:ListItem>
                           <asp:ListItem>18</asp:ListItem>
                           <asp:ListItem>19</asp:ListItem>
                           <asp:ListItem>20</asp:ListItem>
                           <asp:ListItem>21</asp:ListItem>
                           <asp:ListItem>22</asp:ListItem>
                           <asp:ListItem>23</asp:ListItem>
                           <asp:ListItem>24</asp:ListItem>
                           <asp:ListItem>25</asp:ListItem>
                           <asp:ListItem>26</asp:ListItem>
                           <asp:ListItem>27</asp:ListItem>
                           <asp:ListItem>28</asp:ListItem>
                           <asp:ListItem>29</asp:ListItem>
                           <asp:ListItem>30</asp:ListItem>
                           <asp:ListItem>31</asp:ListItem>
                           <asp:ListItem>32</asp:ListItem>
                           <asp:ListItem>33</asp:ListItem>
                           <asp:ListItem>34</asp:ListItem>
                           <asp:ListItem>35</asp:ListItem>
                           <asp:ListItem>36</asp:ListItem>
                           <asp:ListItem>37</asp:ListItem>
                           <asp:ListItem>38</asp:ListItem>
                           <asp:ListItem>39</asp:ListItem>
                           <asp:ListItem>40</asp:ListItem>
                           <asp:ListItem>41</asp:ListItem>
                           <asp:ListItem>42</asp:ListItem>
                           <asp:ListItem>43</asp:ListItem>
                           <asp:ListItem>44</asp:ListItem>
                           <asp:ListItem>45</asp:ListItem>
                           <asp:ListItem>46</asp:ListItem>
                           <asp:ListItem>47</asp:ListItem>
                           <asp:ListItem>48</asp:ListItem>
                           <asp:ListItem>49</asp:ListItem>
                           <asp:ListItem>50</asp:ListItem>
                           <asp:ListItem>51</asp:ListItem>
                           <asp:ListItem>52</asp:ListItem>
                           <asp:ListItem>53</asp:ListItem>
                           <asp:ListItem>54</asp:ListItem>
                           <asp:ListItem>55</asp:ListItem>
                           <asp:ListItem>56</asp:ListItem>
                           <asp:ListItem>57</asp:ListItem>
                           <asp:ListItem>58</asp:ListItem>
                           <asp:ListItem>59</asp:ListItem>
                       </asp:DropDownList>
                   </p>

                   <p>Preferred Flight: </p>
                   <asp:TextBox ID="flightDeparturePreferred" runat="server" Width="500px"></asp:TextBox>

                   <p>Flight URL: </p>
                   <asp:TextBox ID="flightDeparturePreferredURL" runat="server" Width="500px"></asp:TextBox>
                   <div>
                       <p>3.3.2. Return Information</p>
                       <p>Preferred start date and time:</p>

                       <p>
                           <asp:TextBox ID="flightReturnStartDate" runat="server" Width="100px"></asp:TextBox>
                           <ajaxToolkit:CalendarExtender ID="CalendarExtender3"  runat="server" Format="dd-MM-yyyy" TargetControlID="flightReturnStartDate">
                           </ajaxToolkit:CalendarExtender>
                           at
                       <asp:DropDownList ID="flightReturnStartHour" runat="server">
                           <asp:ListItem>--</asp:ListItem>
                           <asp:ListItem>00</asp:ListItem>
                           <asp:ListItem>01</asp:ListItem>
                           <asp:ListItem>02</asp:ListItem>
                           <asp:ListItem>03</asp:ListItem>
                           <asp:ListItem>04</asp:ListItem>
                           <asp:ListItem>05</asp:ListItem>
                           <asp:ListItem>06</asp:ListItem>
                           <asp:ListItem>07</asp:ListItem>
                           <asp:ListItem>08</asp:ListItem>
                           <asp:ListItem>09</asp:ListItem>
                           <asp:ListItem>10</asp:ListItem>
                           <asp:ListItem>11</asp:ListItem>
                           <asp:ListItem>12</asp:ListItem>
                           <asp:ListItem>13</asp:ListItem>
                           <asp:ListItem>14</asp:ListItem>
                           <asp:ListItem>15</asp:ListItem>
                           <asp:ListItem>16</asp:ListItem>
                           <asp:ListItem>17</asp:ListItem>
                           <asp:ListItem>18</asp:ListItem>
                           <asp:ListItem>19</asp:ListItem>
                           <asp:ListItem>20</asp:ListItem>
                           <asp:ListItem>21</asp:ListItem>
                           <asp:ListItem>22</asp:ListItem>
                           <asp:ListItem>23</asp:ListItem>
                       </asp:DropDownList>
                           :
                       <asp:DropDownList ID="flightReturnStartMinute" runat="server">
                           <asp:ListItem>--</asp:ListItem>
                           <asp:ListItem>00</asp:ListItem>
                           <asp:ListItem>01</asp:ListItem>
                           <asp:ListItem>02</asp:ListItem>
                           <asp:ListItem>03</asp:ListItem>
                           <asp:ListItem>04</asp:ListItem>
                           <asp:ListItem>05</asp:ListItem>
                           <asp:ListItem>06</asp:ListItem>
                           <asp:ListItem>07</asp:ListItem>
                           <asp:ListItem>08</asp:ListItem>
                           <asp:ListItem>09</asp:ListItem>
                           <asp:ListItem>10</asp:ListItem>
                           <asp:ListItem>11</asp:ListItem>
                           <asp:ListItem>12</asp:ListItem>
                           <asp:ListItem>13</asp:ListItem>
                           <asp:ListItem>14</asp:ListItem>
                           <asp:ListItem>15</asp:ListItem>
                           <asp:ListItem>16</asp:ListItem>
                           <asp:ListItem>17</asp:ListItem>
                           <asp:ListItem>18</asp:ListItem>
                           <asp:ListItem>19</asp:ListItem>
                           <asp:ListItem>20</asp:ListItem>
                           <asp:ListItem>21</asp:ListItem>
                           <asp:ListItem>22</asp:ListItem>
                           <asp:ListItem>23</asp:ListItem>
                           <asp:ListItem>24</asp:ListItem>
                           <asp:ListItem>25</asp:ListItem>
                           <asp:ListItem>26</asp:ListItem>
                           <asp:ListItem>27</asp:ListItem>
                           <asp:ListItem>28</asp:ListItem>
                           <asp:ListItem>29</asp:ListItem>
                           <asp:ListItem>30</asp:ListItem>
                           <asp:ListItem>31</asp:ListItem>
                           <asp:ListItem>32</asp:ListItem>
                           <asp:ListItem>33</asp:ListItem>
                           <asp:ListItem>34</asp:ListItem>
                           <asp:ListItem>35</asp:ListItem>
                           <asp:ListItem>36</asp:ListItem>
                           <asp:ListItem>37</asp:ListItem>
                           <asp:ListItem>38</asp:ListItem>
                           <asp:ListItem>39</asp:ListItem>
                           <asp:ListItem>40</asp:ListItem>
                           <asp:ListItem>41</asp:ListItem>
                           <asp:ListItem>42</asp:ListItem>
                           <asp:ListItem>43</asp:ListItem>
                           <asp:ListItem>44</asp:ListItem>
                           <asp:ListItem>45</asp:ListItem>
                           <asp:ListItem>46</asp:ListItem>
                           <asp:ListItem>47</asp:ListItem>
                           <asp:ListItem>48</asp:ListItem>
                           <asp:ListItem>49</asp:ListItem>
                           <asp:ListItem>50</asp:ListItem>
                           <asp:ListItem>51</asp:ListItem>
                           <asp:ListItem>52</asp:ListItem>
                           <asp:ListItem>53</asp:ListItem>
                           <asp:ListItem>54</asp:ListItem>
                           <asp:ListItem>55</asp:ListItem>
                           <asp:ListItem>56</asp:ListItem>
                           <asp:ListItem>57</asp:ListItem>
                           <asp:ListItem>58</asp:ListItem>
                           <asp:ListItem>59</asp:ListItem>
                       </asp:DropDownList>
                       </p>

                       <p>Preferred Flight: </p>
                       <asp:TextBox ID="flightReturnPreferred" runat="server" Width="500px"></asp:TextBox>

                       <p>Preferred Flight URL: </p>
                       <asp:TextBox ID="flightReturnPreferredURL" runat="server" Width="500px"></asp:TextBox>
                   </div>
               </div>
           </asp:Panel>
           <ajaxToolkit:CollapsiblePanelExtender ID="CPEFlight"  runat="server" Collapsed="true" TargetControlID="PanelFlight" />

Sorry for the long post guys, please help

Posted 21-Jan-15 3:58am

varmartins

Add a Solution

Comments

ZurdoDev 21-Jan-15 13:19pm

Where are you stuck?

varmartins 22-Jan-15 4:45am

I've been trying functions similar to what paymerich said but nothing is working... I have a panel formed and a radio button list and what I want is for when one of the items in the radio button list is selected for the panel to expand... in this case it's the item "Required"

ZurdoDev 22-Jan-15 7:25am

You keep saying what you want but not telling us what the problem is. I can call my mechanic and tell him that I want to drive my car but if I don't tell him what's exactly wrong, he can't help.

The code in Solution 1 is server-side code which means your radiobuttonlist needs to autopostback. Or you'll have to use JavaScript.

varmartins 22-Jan-15 7:40am

What is wrong is that the panel won't open when i click "Required" and I would like it to open... also I don't like the autopostback so can you please tell me how to do it with JavaScript?

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

paymerich · Answer 1 · 2015-01-21T09:18:00

Solution 1

Did you try adding a OnSelectedIndexChanged="YOURSelection_SelectedIndexChange" event handler yet?

Here is our example:

XML

<asp:RadioButtonList runat="server" Style="float: right;" ID="PeriodSelectionList" RepeatDirection="Horizontal" AutoPostBack="true" OnSelectedIndexChanged="PeriodSelectionList_SelectedIndexChange" ForeColor="White">
       <asp:ListItem Text="Current Period" Value="CurrentPeriod"></asp:ListItem>
       <asp:ListItem Text="Next Period" Value="NextUpcomingPeriod"></asp:ListItem>
   </asp:RadioButtonList>

in Code behind:

SQL

protected void PeriodSelectionList_SelectedIndexChange(object sender, EventArgs e)
      {
         // ... do stuff
         //  tell Panel to open /display

  
   
      }

Posted 21-Jan-15 9:18am

paymerich

Comments

varmartins 22-Jan-15 4:42am

I tried this code:

protected void accomodation_SelectedValueRequired(object sender, EventArgs e)
{
if (accomodation.SelectedValue == "Required") {
PanelAccommodation.Visible = true;
}
}

but it's not working, dont know why

paymerich 22-Jan-15 9:23am

maybe it is updating but it wont show till page refreshes? . Try wrapping an AJAX update panel around the panel?

varmartins 22-Jan-15 10:20am

It's strange because if I change Collapsed="true" to false in the CollapsiblePanelExtender the panel is always showing but if I leave it false and put OnSelectedIndexChanged="accomodation_SelectedValueRequired" on the RadioButtonList and then do this code:
protected void accomodation_SelectedValueRequired(object sender, EventArgs e) {
if (accomodation.SelectedValue == "Required") {
CollapsiblePanelExtender1.Collapsed = false;
}
}

it doesn't work...

varmartins · Answer 2 · 2015-01-22T04:55:00

Solution 2

I managed to get it working with ExpandControlID thanks guys

Posted 22-Jan-15 4:55am

varmartins