SQL Server Forums
Profile | Register | Active Topics | Members | Search | Forum FAQ
 
Register Now and get your question answered!
Username:
Password:
Save Password
Forgot your Password?

 All Forums
 Development Tools
 ASP.NET
 How to make Ajax Accordian Visible based on dropdo
 New Topic  Reply to Topic
 Printer Friendly
Author Previous Topic Topic Next Topic  

taj
Starting Member

India
39 Posts

Posted - 07/17/2013 :  08:14:39  Show Profile  Reply with Quote
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
Flowing Fount of Yak Knowledge

Nigeria
2706 Posts

Posted - 07/19/2013 :  20:18:25  Show Profile  Reply with Quote
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
  Previous Topic Topic Next Topic  
 New Topic  Reply to Topic
 Printer Friendly
Jump To:
SQL Server Forums © 2000-2009 SQLTeam Publishing, LLC Go To Top Of Page
This page was generated in 0.12 seconds. Powered By: Snitz Forums 2000