Please start any new threads on our new site at https://forums.sqlteam.com. We've got lots of great SQL Server experts to answer whatever question you can come up with.

 All Forums
 Development Tools
 ASP.NET
 How to make Ajax Accordian Visible based on dropdo

Author  Topic 

taj
Starting Member

39 Posts

Posted - 2013-07-17 : 08:14:39
Hi all,

I have a dropdownlist as stated below,

<asp:DropDownList ID="ddlStandardReports" runat="server" Height="25px" Style="font-family: Arial"
Width="250px">
<asp:ListItem Value="1">Patient Information Report</asp:ListItem>
<asp:ListItem Value="2">Patient Billing Report </asp:ListItem>
<asp:ListItem Value="3">Bill Collection Report</asp:ListItem>

Now for this 3 dropdownlist values, I have 3 Ajax Accordions in which i have designed my reports as stated below,

<div class="style1">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div style="padding: 10px; width: 98%">
<asp:Accordion ID="StandardPIRAccordion" runat="server" SelectedIndex="-1" HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"
FadeTransitions="True" FramesPerSecond="40" TransitionDuration="250" RequireOpenedPane="false"
SuppressHeaderPostbacks="False" BorderStyle="Solid" Width="101%" Height="0px"
CssClass="style1" AutoSize="None">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server" ContentCssClass=""
HeaderCssClass="">
<Header>
CRITERIA FOR PATIENT INFORMATION REPORT
</Header>
<Content>
<div class="compactform" style="width: 99%;">
<div class="twoper">
<label style="font-family: Verdana; font-size: small; color: #000000; font-weight: 600;
font-style: normal; font-variant: inherit; text-transform: inherit; width: 30%;">
<asp:CheckBox ID="chkRegDate" runat="server" />
Registration date:
<br />
<asp:TextBox ID="txtRegDateFrom" runat="server" class="element text" Style="width: 30%;
margin-left: 25px;"></asp:TextBox>
<asp:CalendarExtender ID="txtRegDateFrom_CalendarExtender" runat="server" Enabled="True"
TargetControlID="txtRegDateFrom">
</asp:CalendarExtender>
<span style="padding-left: 3px;">To: </span>
<asp:TextBox ID="txtRegDateTo" runat="server" class="element text" Style="width: 30%;"></asp:TextBox>
<asp:CalendarExtender ID="txtRegDateTo_CalendarExtender" runat="server" Enabled="True"
TargetControlID="txtRegDateTo">
</asp:CalendarExtender>
</label>
<label style="font-family: Verdana; font-size: small; color: #000000; font-weight: 600;
font-style: normal; font-variant: inherit; text-transform: inherit; width: 15%;">
<asp:CheckBox ID="chkAge" runat="server" />
Age:
<br />
<asp:TextBox ID="txtAgeFrom" runat="server" class="element text" Style="width: 30%;
margin-left: 25px;" MaxLength="3"></asp:TextBox>
<asp:FilteredTextBoxExtender ID="filter1" runat="server" TargetControlID="txtAgeFrom"
FilterType="Numbers">
</asp:FilteredTextBoxExtender>
<span style="padding-left: 3px;">To: </span>
<asp:TextBox ID="txtAgeTo" runat="server" class="element text" Style="width: 30%;"
MaxLength="3"></asp:TextBox>
<asp:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="txtAgeTo"
FilterType="Numbers">
</asp:FilteredTextBoxExtender>
</label>
<label style="font-family: Verdana; font-size: small; color: #000000; font-weight: 600;
font-style: normal; font-variant: inherit; text-transform: inherit; width: 20%;">
<asp:CheckBox ID="chkOccupation" runat="server" />
Occupation:
<asp:DropDownList ID="ddlstOccupation" runat="server" Style="margin-left: 25px; width: 80%;">
</asp:DropDownList>
</label>
<label style="font-family: Verdana; font-size: small; color: #000000; font-weight: 600;
font-style: normal; font-variant: inherit; text-transform: inherit; width: 20%;">
<asp:CheckBox ID="chkGender" runat="server" />
Gender:
<select id="ddlstGender" runat="server" name="Field25" tabindex="5" style="margin-left: 25px;
width: 60%;">
<option value="male" selected="selected">MALE</option>
<option value="female">FEMALE</option>
</select>
</label>
</div>
<div class="twoper">
<label style="font-family: Verdana; font-size: small; color: #000000; font-weight: 600;
font-style: normal; font-variant: inherit; text-transform: inherit; width: 100%;">
<asp:CheckBox ID="chkBloodGroup" runat="server" />
Blood group:
<asp:CheckBoxList ID="chkLstBlood" runat="server" RepeatDirection="Horizontal" Style="width: 60%;
margin-left: 25px;">
<asp:ListItem Value="0">All</asp:ListItem>
<asp:ListItem Value="A+ve">A+ve</asp:ListItem>
<asp:ListItem Value="A-ve">A-ve</asp:ListItem>
<asp:ListItem Value="AB+ve">AB+ve</asp:ListItem>
<asp:ListItem Value="AB-ve">AB-ve</asp:ListItem>
<asp:ListItem Value="B+ve">B+ve</asp:ListItem>
<asp:ListItem Value="B-ve">B-ve</asp:ListItem>
<asp:ListItem Value="O-ve">O-ve</asp:ListItem>
<asp:ListItem Value="O+ve">O+ve</asp:ListItem>
</asp:CheckBoxList>
</label>
</div>
<div class="twoper">
<label style="font-family: Verdana; font-size: small; color: #000000; font-weight: 600;
font-style: normal; font-variant: inherit; text-transform: inherit; width: 20%;">
<asp:CheckBox ID="chkArea" runat="server" />
Area:
<asp:DropDownList ID="ddlstArea" runat="server" Style="margin-left: 25px; width: 80%;">
</asp:DropDownList>
</label>
<label style="font-family: Verdana; font-size: small; color: #000000; font-weight: 600;
font-style: normal; font-variant: inherit; text-transform: inherit; width: 20%;">
<asp:CheckBox ID="chkDia" runat="server" />
Diabetologist:
<asp:DropDownList ID="ddlstDia" runat="server" Style="margin-left: 25px; width: 80%;">
</asp:DropDownList>
</label>
<label style="font-family: Verdana; font-size: small; color: #000000; font-weight: 600;
font-style: normal; font-variant: inherit; text-transform: inherit; width: 20%;">
<asp:CheckBox ID="chkServiceAvailed" runat="server" />
Service availed:
<asp:DropDownList ID="ddlstServiceAvailed" runat="server" Style="margin-left: 25px;
width: 80%;">
</asp:DropDownList>
</label>
<label style="font-family: Verdana; font-size: small; color: #000000; font-weight: 600;
font-style: normal; font-variant: inherit; text-transform: inherit; width: 20%;">
<asp:CheckBox ID="chkClinicalAssis" runat="server" />
Clinical Assistant:
<asp:DropDownList ID="ddlstClinicalAssistant" runat="server" Style="margin-left: 25px;
width: 70%;">
</asp:DropDownList>
</label>
</div>
<%-- <div class="form_btn" id="div1" runat="server">
<asp:Button ID="btnPIRprint" Text="Print" runat="server" Style="border-width: 0px;"
PostBackUrl="../UserInterface/PatientInformationReport.aspx" />
</div>--%>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</asp:Accordion>
</div>
</div>
<div class="style1">
<div style="padding: 10px; width: 98%">
<asp:Accordion ID="StandardPBRAccordion" runat="server" SelectedIndex="-1" HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"
FadeTransitions="True" FramesPerSecond="40" TransitionDuration="250" RequireOpenedPane="false"
SuppressHeaderPostbacks="False" BorderStyle="Solid" Width="101%" Height="0px"
CssClass="style1" AutoSize="None">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server" ContentCssClass=""
HeaderCssClass="">
<Header>
CRITERIA FOR PATIENT BILLING REPORT
</Header>
<Content>
<div class="compactform" style="width: 99%;">
<div class="twoper">
<label style="font-family: Verdana; font-size: small; color: #000000; font-weight: 600;
font-style: normal; font-variant: inherit; text-transform: inherit; width: 30%;">
<asp:CheckBox ID="Chkrgedate" runat="server" />
Registration date:
<br />
<asp:TextBox ID="txtrfdatefr" runat="server" class="element text" Style="width: 30%;
margin-left: 25px;"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" runat="server" Enabled="True" TargetControlID="txtrfdatefr">
</asp:CalendarExtender>
<span style="padding-left: 3px;">To: </span>
<asp:TextBox ID="txtrtdateto" runat="server" class="element text" Style="width: 30%;"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender2" runat="server" Enabled="True" TargetControlID="txtrtdateto">
</asp:CalendarExtender>
</label>
<label style="font-family: Verdana; font-size: small; color: #000000; font-weight: 600;
font-style: normal; font-variant: inherit; text-transform: inherit; width: 25%;">
<asp:CheckBox ID="chkPatientType" runat="server" />
Patient type:
<asp:DropDownList runat="server" ID="DropDownList1" Style="margin-left: 25px; width: 60%;">
</asp:DropDownList>
</label>
<label style="font-family: Verdana; font-size: small; color: #000000; font-weight: 600;
font-style: normal; font-variant: inherit; text-transform: inherit; width: 15%;">
<asp:CheckBox ID="Chkarae" runat="server" />
Area:
<asp:DropDownList ID="DropDownList2" runat="server" Style="margin-left: 25px; width: 60%;">
</asp:DropDownList>
</label>
</div>
<div class="twoper">
<label style="font-family: Verdana; font-size: small; color: #000000; font-weight: 600;
font-style: normal; font-variant: inherit; text-transform: inherit; width: 20%;">
<asp:CheckBox ID="chkBillNumber" runat="server" />
Bill number:
<br />
<asp:TextBox ID="txtBillNumFrom" runat="server" class="element text" MaxLength="25"
Style="width: 30%; margin-left: 25px;"></asp:TextBox>
<asp:FilteredTextBoxExtender ID="fte1" runat="server" TargetControlID="txtBillNumFrom"
FilterType="Numbers">
</asp:FilteredTextBoxExtender>
<span style="padding-left: 3px;">To: </span>
<asp:TextBox ID="txtBillNumTo" runat="server" class="element text" MaxLength="25"
Style="width: 30%;"></asp:TextBox>
<asp:FilteredTextBoxExtender ID="FilteredTextBoxExtender2" runat="server" TargetControlID="txtBillNumTo"
FilterType="Numbers">
</asp:FilteredTextBoxExtender>
</label>
<label style="font-family: Verdana; font-size: small; color: #000000; font-weight: 600;
font-style: normal; font-variant: inherit; text-transform: inherit; width: 20%;">
<asp:CheckBox ID="chkDiabetologist" runat="server" />
Diabetologist:
<asp:DropDownList ID="ddlstDiabetologist" runat="server" Style="margin-left: 30px;
width: 80%;">
</asp:DropDownList>
</label>
<label style="font-family: Verdana; font-size: small; color: #000000; font-weight: 600;
font-style: normal; font-variant: inherit; text-transform: inherit; width: 20%;">
<asp:CheckBox ID="ChkServicesavail" runat="server" />
Service availed:
<asp:ListBox ID="lstBoxServiceAvailed" runat="server" Style="width: 80%; margin-left: 25px;"
Height="50px" SelectionMode="Multiple"></asp:ListBox>
</label>
</div>
<div class="twoper">
<label style="font-family: Verdana; font-size: small; color: #000000; font-weight: 600;
font-style: normal; font-variant: inherit; text-transform: inherit; width: 95%;">
<asp:CheckBox ID="chkSpecialist" runat="server" />
Specialists:
<asp:CheckBoxList ID="chkLstSpecialist" runat="server" RepeatDirection="Horizontal"
Style="width: 100%; margin-left: 25px;" AutoPostBack="True">
<asp:ListItem Value="0">All</asp:ListItem>
<asp:ListItem Value="4">Ophthalmology</asp:ListItem>
<asp:ListItem Value="15">Podiatry</asp:ListItem>
<asp:ListItem Value="11">Cardiology</asp:ListItem>
<asp:ListItem Value="12">Nephrology</asp:ListItem>
<asp:ListItem Value="13">Neurology</asp:ListItem>
<asp:ListItem Value="9">Dietician</asp:ListItem>
<asp:ListItem Value="0">Psychiatry</asp:ListItem>
<asp:ListItem Value="6">Physiology</asp:ListItem>
</asp:CheckBoxList>
</label>
</div>
<div class="twoper">
<label style="font-family: Verdana; font-size: small; color: #000000; font-weight: 600;
font-style: normal; font-variant: inherit; text-transform: inherit; width: 40%;">
<asp:CheckBox ID="chkBillType" runat="server" />
Bill Type:
<asp:CheckBoxList ID="chklstBillType" runat="server" RepeatDirection="Horizontal"
Style="width: 100%; margin-left: 25px;" AutoPostBack="True">
<asp:ListItem Value="0">All</asp:ListItem>
<asp:ListItem Value="1">Cash</asp:ListItem>
<asp:ListItem Value="3">Credit Card</asp:ListItem>
<asp:ListItem Value="2">Cheque</asp:ListItem>
</asp:CheckBoxList>
</label>
<label style="font-family: Verdana; font-size: small; color: #000000; font-weight: 600;
font-style: normal; font-variant: inherit; text-transform: inherit; width: 20%;">
<asp:CheckBox ID="chkBillDate" runat="server" />
Bill Date:
<br />
<asp:TextBox ID="txtBillDateFrom" runat="server" class="element text" Style="width: 35%;
margin-left: 25px;"></asp:TextBox>
<asp:CalendarExtender ID="txtBillDateFrom_CalendarExtender" runat="server" Enabled="True"
TargetControlID="txtBillDateFrom">
</asp:CalendarExtender>
<span style="padding-left: 3px;">To: </span>
<asp:TextBox ID="txtBillDateTo" runat="server" class="element text" Style="width: 35%;"></asp:TextBox>
<asp:CalendarExtender ID="txtBillDateTo_CalendarExtender" runat="server" Enabled="True"
TargetControlID="txtBillDateTo">
</asp:CalendarExtender>
</label>
</div>
</div>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</asp:Accordion>
</div>
</div>
<div class="style1">
<div style="padding: 10px; width: 98%">
<asp:Accordion ID="StandardBCRAccordion" runat="server" SelectedIndex="-1" HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"
FadeTransitions="True" FramesPerSecond="40" TransitionDuration="250" RequireOpenedPane="false"
SuppressHeaderPostbacks="False" BorderStyle="Solid" Width="101%" Height="0px"
CssClass="style1" AutoSize="None">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server" ContentCssClass=""
HeaderCssClass="">
<Header>
CRITERIA FOR BILL COLLECTION REPORT
</Header>
<Content>
<div class="compactform" style="width: 99%;">
<div class="twoper">
<label style="font-family: Verdana; font-size: small; color: #000000; font-weight: 600;
font-style: normal; width: 30%;">
<asp:CheckBox ID="ChkBilldt" runat="server" />
Bill Date:
<br />
<asp:TextBox ID="txtBillDateFromm" runat="server" class="element text" Style="width: 30%;
margin-left: 25px;"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender3" runat="server" Enabled="True" TargetControlID="txtBillDateFromm">
</asp:CalendarExtender>
<span style="padding-left: 3px;">To: </span>
<asp:TextBox ID="txtBillDateToo" runat="server" class="element text" Style="width: 30%;"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender4" runat="server" Enabled="True" TargetControlID="txtBillDateToo">
</asp:CalendarExtender>
</label>
<label style="font-family: Verdana; font-size: small; color: #000000; font-weight: 600;
font-style: normal; width: 35%;">
<asp:CheckBox ID="chkRegNumber" runat="server" />
Registration No:
<br />
<asp:TextBox ID="txtRegNoFrom" runat="server" class="element text" MaxLength="25"
Style="width: 30%; margin-left: 25px;"></asp:TextBox>
<asp:FilteredTextBoxExtender ID="FilteredTextBoxExtender3" runat="server" TargetControlID="txtRegNoFrom"
FilterType="Numbers">
</asp:FilteredTextBoxExtender>
<span style="padding-left: 3px;">To: </span>
<asp:TextBox ID="txtRegNoTo" runat="server" class="element text" MaxLength="25" Style="width: 30%;"></asp:TextBox>
<asp:FilteredTextBoxExtender ID="FilteredTextBoxExtender4" runat="server" TargetControlID="txtRegNoTo"
FilterType="Numbers">
</asp:FilteredTextBoxExtender>
</label>
</div>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</asp:Accordion>
</div>
</div>

Actually i have 20 reports like this (ie;2O DROPDOWNLIST VALUES AND 20 ACCORDIONS ONE FOR EACH),for reference i have added only 3 dropdownlist values and 3 accordions of code here.

My requirement is , on page_load only the first report (Patient Information Report)should be selected in dropdownlist and the report for the same(accordion)should be visible, and now if i select some other report name in the dropdownlist then that particular report accordion only should be visible,and all other reports(accordions)should be not visible.

Help me in coding this ?

Thank You

afrika
Master Smack Fu Yak Hacker

2706 Posts

Posted - 2013-07-19 : 20:18:25
Not sure about the accordion, as it seems you added a reference in your web.config which is not added here. But for the dropdown.

1. You need to add a postback event. e.g. OnSelectedIndexChanged="ddlStandardReports_SelectedIndexChanged"
2. And add the script in your code behind as

Get the value of the selected dropdownlist as

string value = ddlStandardReports.SelectedValue.ToString();


Full code is

protected void ddlStandardReports_SelectedIndexChanged(object sender, EventArgs e)
{
TextBox1.Text = DropDownList1.SelectedValue;
}
// then show the panel of the accordion you want e.g


switch (value)
{

case "AccordionPane1":
Panes.ActiveViewIndex = 0;

break;
case "AccordionPane2":
Panes.ActiveViewIndex = 1;

break;

// etc
default:
MultiView_Main.ActiveViewIndex = 3;
break;
}


Hope this helps ?
Go to Top of Page
   

- Advertisement -