manipulating ajax collapsablepanel in codebehind with radiobuttonlist

Question

0.00/5 (No votes)

See more:

i have a radiobuttonlist and two panels on a page. i would like to use the radiobuttonlist to collapse the appropriate panel, but what i have so far isn't working. any help would be appreciated.

page:

ASP.NET

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:CollapsiblePanelExtender ID="equationPanelExtender" runat="server" TargetControlID="equationPanel">
    </asp:CollapsiblePanelExtender>
    <asp:CollapsiblePanelExtender ID="variablePanelExtender" runat="server" TargetControlID="variablePanel">
    </asp:CollapsiblePanelExtender>

<div id="lookup" style="width:100%;float:left;background-color:yellow;">
    <div id="lookupLeft" style="width:49%;float:left;background-color:Blue;">
        <div class="radioButtonListDiv" style="width:55%;margin:0 auto;">
            <asp:RadioButtonList ID="RadioButtonList1" runat="server" 
                RepeatDirection="Horizontal" 
                onselectedindexchanged="RadioButtonList1_SelectedIndexChanged" 
                AutoPostBack="True">
                <asp:ListItem Value="1">Equations</asp:ListItem>
                <asp:ListItem Value="2">Variables</asp:ListItem>
            </asp:RadioButtonList>
        </div><!-- radioButtonListDiv -->
        <asp:Panel ID="equationPanel" runat="server">
            <div class="centerDDL" style="width:55%;margin:0 auto;">
                <asp:DropDownList ID="equationDDL" runat="server" DataSourceID="equationsDS" 
                    DataTextField="equationName" DataValueField="equationID">
                </asp:DropDownList>
                <asp:SqlDataSource ID="equationsDS" runat="server" 
                    ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
                    SelectCommand="SELECT * FROM [equationsTable]"></asp:SqlDataSource>
            </div><!-- centerDDL -->
        </asp:Panel>
        <asp:Panel ID="variablePanel" runat="server">
            <div class="centerDDL" style="width:55%;margin:0 auto;">
                <asp:DropDownList ID="variablesDDL" runat="server" DataSourceID="variablesDS" 
                    DataTextField="variableName" DataValueField="variableID">
                </asp:DropDownList>
                <asp:SqlDataSource ID="variablesDS" runat="server" 
                    ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
                    SelectCommand="SELECT * FROM [variablesTable]"></asp:SqlDataSource>
            </div><!-- centerDDL -->
        </asp:Panel>
    </div><!-- lookupLeft -->
    <div id="lookupRight" style="width:49%;float:right;">
        <asp:DetailsView ID="DetailsView1" Width="100%" runat="server">
        </asp:DetailsView>
    </div><!-- lookupRight -->
</div><!-- lookup -->
<div style="clear;"></div>
<div id="input" style="width:100%;float:left;background-color:orange;">
    <div id="inputLeft" style="width:49%;float:left;background-color:Blue;">
    </div><!-- inputLeft -->
    <div id="inputRight" style="width:49%;float:right;">
    </div><!-- inputRight -->
</div><!-- input -->
</asp:Content>

codebehind:

C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;

public partial class Home : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        equationPanelExtender.Collapsed = false;
        variablePanelExtender.Collapsed = true;
    }

    protected void  RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (RadioButtonList1.SelectedValue == "1")
        {
            equationPanelExtender.Collapsed = false;
            variablePanelExtender.Collapsed = true;
        }
        if (RadioButtonList1.SelectedValue == "2")
        {
            equationPanelExtender.Collapsed = true;
            variablePanelExtender.Collapsed = false;
        }
    }
}

Posted 22-Jan-14 6:26am

memberxxxxxxxxxxxxxxxxx

Updated 22-Jan-14 7:31am

v2

Add a Solution

1 solution

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)

bowlturner · Answer 1 · 2014-01-22T06:51:00

Solution 1

You need to have the AutoPostBack property set to true for RadioButtonList1

edited:
And yes you will need to leave the AutoPostBack in the mark up

C#

protected void  RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (RadioButtonList1.SelectedValue == "1")
        {
            equationPanelExtender.Collapsed = false;
            variablePanelExtender.Collapsed = true;
        }
        if (RadioButtonList1.SelectedValue == "2")
        {
            equationPanelExtender.Collapsed = true;
            variablePanelExtender.Collapsed = false;
        }
    }

Posted 22-Jan-14 6:51am

bowlturner

Updated 22-Jan-14 7:20am

v2

Comments

memberxxxxxxxxxxxxxxxxx 22-Jan-14 13:16pm

didn't seem to do the trick. i swear though...if that fixed it i was gonna go home for the day lol.

i did add the autopostback property in the html though, that ok? or does it have to be in the codebehind?

i suspect the problem has to do with my if statements and/or my radiobutton values. in the html, i have the values set as 1, and 2 and in the codebehind i used those values in the if statement, not sure if done properply?

bowlturner 22-Jan-14 13:18pm

Doh! Missed it. .Equals is a comparison operator, not an assignment.

you need equationPanelExtender.Collapsed = false;

Added more to the solution above.

memberxxxxxxxxxxxxxxxxx 22-Jan-14 13:28pm

ok, made the changes, you suggested and i also added something as a test.

if you look in the page_load...i added lines to have one panel collapsed on load, and the other to be open. just wanted to see how it works...nothing. both panels still open on load.

i've edited the original post to reflect the code as it is now.

thanks for the help btw, turning those bowls? lol

bowlturner 22-Jan-14 13:34pm

Do you need to set the CollapsedSize="0"?

and yes, I turn bowls on a lathe to relieve stress. It's very effective.

memberxxxxxxxxxxxxxxxxx 22-Jan-14 14:08pm

i had something completely different in mind lol. but stress relief is always good.

i could use stress relief now :P, i tried collapsedsize...nothing :(

bowlturner 22-Jan-14 14:10pm

I've done this before, but it's been long enough I can't remember what I'm missing. You could always try turning visible on and off too... :)

memberxxxxxxxxxxxxxxxxx 22-Jan-14 14:25pm

i think that's what i'll end up having to do. thanks for the help, i really appreciate it.

bowlturner 22-Jan-14 14:26pm

No problem, sorry didn't do a better job.