HII,
I am trying accordion with Plus minus icons in my application and select picker for dropdown inside update panel for my webpage.
dropdown does not get select picker functionality and accordion does not maintain position after postabck also plus minus icons functionality looses.
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<%--<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>--%>
<script src="../custom js/jquery_1.9.1_jquery.min.js"></script>
<script src="../custom js/1.8.3_jquery.min.js"></script>
<link href="../custom css/bootstrap-select.css" rel="stylesheet" />
<script src="../custom js/bootstrap-select.js"></script>
<style>
.bootstrap-select:not([class*="span"]):not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
width: 100%;
}
.form-horizontal .control-label {
padding-top: 7px;
margin-bottom: 0;
text-align: left;
}
.btn-default {
background-color: #E6E6E6;
}
.form-group {
margin-bottom: 7px;
}
</style>
<script type="text/javascript">
$(function () {
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function () {
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
})
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="panel-group" id="Div1" role="tablist" aria-multiselectable="true">
<div class="panel panel-success">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" role="button" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="glyphicon glyphicon-minus"></span>
Step 1 : <i class="fa fa-edit" style="color: brown"></i> Visit Details
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="form-horizontal" style="font-size: 14px !important">
<div class="form-group">
<div class="col-md-4 col-lg-4">
<div class="row">
<asp:Label ID="lblVisitId" runat="server" Text="Visit ID" CssClass="control-label col-md-5 col-lg-5"></asp:Label>
<div class="col-md-7 col-lg-7">
<div class="input-group ">
<span class="input-group-addon">
<i class="fa fa-key"></i>
</span>
<asp:TextBox ID="txtVisitID" runat="server" CssClass="form-control input-sm input-sm" AutoPostBack="true" data-toggle="tooltip" data-placement="top" title="Enter Visit Date "></asp:TextBox>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="row">
<asp:Label ID="lblVisitBookDate" runat="server" Text="Visit Book Date" CssClass="control-label col-md-5 col-lg-5"></asp:Label>
<div class="col-md-7 col-lg-7">
<div class="input-group">
<asp:TextBox ID="txtVisitBookDate" runat="server" Enabled="false" CssClass="form-control input-sm"></asp:TextBox>
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="row">
<asp:Label ID="lblVisitDate" runat="server" Text="Visit Date" CssClass="control-label col-md-5 col-lg-5"></asp:Label>
<div class="col-md-7 col-lg-7">
<div class="input-group ">
<asp:TextBox ID="txtVisitDate" runat="server" CssClass="form-control input-sm input-sm" Placeholder="dd-MM-yyyy" AutoPostBack="true" data-toggle="tooltip" data-placement="top" title="Enter Visit Date "></asp:TextBox>
<span class="input-group-addon">
<cc1:CalendarExtender ID="CalendarExtender1" PopupPosition="BottomRight" runat="server" TargetControlID="txtVisitDate" Format="dd-MM-yyyy"></cc1:CalendarExtender>
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-lg-6">
<div class="row">
<asp:Label ID="lblGroup" runat="server" Text="Group Name" CssClass="control-label col-md-3 col-lg-3"></asp:Label>
<div class="col-md-9 col-lg-9">
<asp:DropDownList ID="drpGroup" runat="server" class="selectpicker" AutoPostBack="true" OnSelectedIndexChanged="drpGroup_SelectedIndexChanged"
data-live-search="true">
</asp:DropDownList>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6">
<div class="row">
<asp:Label ID="lblAuthName" runat="server" Text="Visit Approver Authority" CssClass="control-label col-md-5 col-lg-5"></asp:Label>
<div class="col-md-7 col-lg-7">
<asp:DropDownList ID="drpVisitAuth" runat="server" class="selectpicker" AutoPostBack="true"
data-live-search="true">
</asp:DropDownList>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-lg-6">
<div class="row">
<asp:Label ID="lblOrganization" runat="server" Text="Organization Name" CssClass="control-label col-md-5 col-lg-4"></asp:Label>
<div class="col-md-9 col-lg-8">
<asp:DropDownList ID="drpOrganization" runat="server" class="selectpicker" AutoPostBack="true" OnSelectedIndexChanged="drpOrganization_SelectedIndexChanged"
data-live-search="true">
</asp:DropDownList>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2">
<asp:LinkButton ID="btnAddOrganization" runat="server" CssClass="btn btn-success btn-sm btn-block"><span class="fa fa-plus"></span> Add Organization</asp:LinkButton>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-lg-4">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<span class="glyphicon glyphicon-plus"></span>
Step 2 : <i class="fa fa-user" style="color: brown"></i> Visitor Details
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<div class="form-horizontal" style="font-size: 14px">
<div class="form-group">
<div class="col-md-4 col-lg-4">
<div class="row">
<asp:Label ID="lblVisitorName" runat="server" Text="Visitor Name" CssClass="control-label col-md-5 col-lg-5"></asp:Label>
<div class="col-md-7 col-lg-7">
<div class="input-group ">
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
<asp:TextBox ID="txtVisitorName" runat="server" CssClass="form-control input-sm" AutoPostBack="true" data-toggle="tooltip" data-placement="top" title="Enter Visitor Name"></asp:TextBox>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="row">
<asp:Label ID="lblVisitorLastName" runat="server" Text="Last Name" CssClass="control-label col-md-5 col-lg-5"></asp:Label>
<div class="col-md-7 col-lg-7">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
<asp:TextBox ID="txtVisitorLastName" runat="server" CssClass="form-control input-sm" AutoPostBack="true" data-toggle="tooltip" data-placement="top" title="Enter Visitor Last Name"></asp:TextBox>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="row">
<asp:Label ID="lblGender" runat="server" Text="Gender" CssClass="control-label col-md-4 col-lg-4"></asp:Label>
<div class="col-md-8 col-lg-8">
<div class="input-group ">
<span class="input-group-addon">
<%-- <i class="fa fa-stack"></i>--%>
</span>
<asp:DropDownList ID="drpVisitorGender" runat="server" CssClass="form-control input-sm" AutoPostBack="true" data-toggle="tooltip" data-placement="top" title="Select Gender"></asp:DropDownList>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-lg-4">
<div class="row">
<asp:Label ID="lblVisitorMbile" runat="server" Text="Mobile" CssClass="control-label col-md-5 col-lg-5"></asp:Label>
<div class="col-md-7 col-lg-7">
<div class="input-group ">
<span class="input-group-addon">
<i class="fa fa-phone"></i>
</span>
<asp:TextBox ID="txtVisitorMobile" runat="server" CssClass="form-control input-sm"></asp:TextBox>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2">
<asp:LinkButton ID="LinkButton2" runat="server" CssClass="btn bnt-block btn-sm btn-warning"><i class="fa fa-plus-circle"></i> Add Vehicle</asp:LinkButton>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<span class="glyphicon glyphicon-plus"></span>
Step 3 : <i class="fa fa-briefcase" style="color: brown"></i> Material Details
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<div class="form-horizontal" style="font-size: 14px">
<div class="form-group">
<div class="col-md-4 col-lg-4">
<div class="row">
<asp:Label ID="lblMaterialCategory" runat="server" Text="Material Category" CssClass="control-label col-md-5 col-lg-5"></asp:Label>
<div class="col-md-7 col-lg-7">
<div class="input-group ">
<span class="input-group-addon">
<i class="fa fa-cart"></i>
</span>
<asp:DropDownList ID="drpMaterialCategory" runat="server" CssClass="form-control btn btn-default input-sm" AutoPostBack="true" data-toggle="tooltip" data-placement="top" title="Select Material Type"></asp:DropDownList>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="row">
<asp:Label ID="lblMaterialType" runat="server" Text="Material Type" CssClass="control-label col-md-5 col-lg-5"></asp:Label>
<div class="col-md-7 col-lg-7">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-cart"></i>
</span>
<asp:DropDownList ID="drpMaterialType" runat="server" CssClass="form-control input-sm"></asp:DropDownList>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="row">
<asp:Label ID="lblParameter" runat="server" Text="Parameter" CssClass="control-label col-md-4 col-lg-4"></asp:Label>
<div class="col-md-8 col-lg-8">
<div class="input-group ">
<span class="input-group-addon">
<%-- <i class="fa fa-stack"></i>--%>
</span>
<asp:DropDownList ID="drpParameter" runat="server" CssClass="form-control input-sm input-sm" AutoPostBack="true" data-toggle="tooltip" data-placement="top" title="Select Parameter"></asp:DropDownList>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-lg-4">
<div class="row">
<asp:Label ID="lblParaValue" runat="server" Text="Parameter Value" CssClass="control-label col-md-5 col-lg-5"></asp:Label>
<div class="col-md-7 col-lg-7">
<div class="input-group ">
<span class="input-group-addon">
<i class="fa fa-cab"></i>
</span>
<asp:TextBox ID="txtParameter" runat="server" CssClass="form-control input-sm"></asp:TextBox>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6">
<div class="row">
<asp:Label ID="lblMaterialAppAuth" runat="server" Text="Approval Auth" CssClass="control-label col-md-3 col-lg-3"></asp:Label>
<div class="col-md-9 col-lg-9">
<asp:DropDownList ID="drpMaterialAppAuth" runat="server" class="selectpicker" AutoPostBack="true" OnSelectedIndexChanged="drpMaterialAppAuth_SelectedIndexChanged"
data-live-search="true">
</asp:DropDownList>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2">
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="btn bnt-block btn-sm btn-warning"><i class="fa fa-plus-circle"></i> Add Material</asp:LinkButton>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
<span class="glyphicon glyphicon-plus"></span>
Step 4 : <i class="fa fa-cab" style="color: brown"></i> Vehicle Details
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<div class="form-horizontal" style="font-size: 14px">
<div class="form-group">
<div class="col-md-4 col-lg-4">
<div class="row">
<asp:Label ID="lblVehicleType" runat="server" Text="Vehicle Type" CssClass="control-label col-md-5 col-lg-5"></asp:Label>
<div class="col-md-7 col-lg-7">
<div class="input-group ">
<span class="input-group-addon">
<i class="fa fa-cab"></i>
</span>
<asp:DropDownList ID="drpVehicleType" runat="server" CssClass="form-control btn btn-default input-sm" AutoPostBack="true" data-toggle="tooltip" data-placement="top" title="Select Vehicle Type"></asp:DropDownList>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="row">
<asp:Label ID="lblVehicleNum" runat="server" Text="Vehicle Number" CssClass="control-label col-md-5 col-lg-5"></asp:Label>
<div class="col-md-7 col-lg-7">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-cab"></i>
</span>
<asp:TextBox ID="txtVehicleNumber" runat="server" CssClass="form-control input-sm"></asp:TextBox>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="row">
<asp:Label ID="lblVehDesc" runat="server" Text="Vehicle Desc" CssClass="control-label col-md-4 col-lg-4"></asp:Label>
<div class="col-md-8 col-lg-8">
<div class="input-group ">
<span class="input-group-addon">
<i class="fa fa-credit-card"></i>
</span>
<asp:TextBox ID="txtVehicleDesc" runat="server" CssClass="form-control input-sm input-sm" AutoPostBack="true" data-toggle="tooltip" data-placement="top" title="Enter Visit Date "></asp:TextBox>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-lg-6">
<div class="row">
<asp:Label ID="lblVehAppAuth" runat="server" Text="Approval Auth" CssClass="control-label col-md-3 col-lg-3"></asp:Label>
<div class="col-md-9 col-lg-9">
<asp:DropDownList ID="drpVehAppAuth" runat="server" class="selectpicker" AutoPostBack="true" OnSelectedIndexChanged="drpVehAppAuth_SelectedIndexChanged"
data-live-search="true">
</asp:DropDownList>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2">
<asp:LinkButton ID="btnAddVehicle" runat="server" CssClass="btn bnt-block btn-sm btn-warning"><i class="fa fa-plus-circle"></i> Add Vehicle</asp:LinkButton>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-offset-2 col-lg-offset-2 col-md-2 col-lg-2">
<asp:Button ID="btnPreview" runat="server" CssClass="btn btn-block btn-info btn-sm" Text="expandall" />
</div>
</div>
<asp:HiddenField ID="PaneName" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
$(function () {
ApplySelectPicker();
});
//On UpdatePanel Refresh
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
ApplySelectPicker();
}
});
};
function ApplySelectPicker() {
$('[id*=drpGroup]').selectpicker({
style: 'btn-default btn-sm btn-block',
size: 4
});
$('[id*=drpVisitAuth]').selectpicker({
style: 'btn-default btn-sm btn-block',
size: 4
});
$('[id*=drpVisitClassification]').selectpicker({
style: 'btn-default btn-sm btn-block',
size: 7
});
$('[id*=drpVisitPurpose]').selectpicker({
style: 'btn-default btn-sm btn-block',
size: 7
});
$('[id*=drpOrganization]').selectpicker({
style: 'btn-default btn-sm btn-block',
size: 7
})
$('[id*=drpVehAppAuth]').selectpicker({
style: 'btn-info btn-sm btn-block',
size: 7
})
$('[id*=drpMaterialAppAuth]').selectpicker({
style: 'btn-info btn-sm btn-block',
size: 7
})
};
$("btnAddOrganization").click(function () {
$("drpOrganization").addClass("btn-success btn-sm btn-block");
});
</script>
<%-- <script src="../js/Jquery 1.10.2.js"></script>
<script src="../js/bootstrap.min.js"></script>--%>
<script type="text/javascript">
$(function pageLoad() {
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function () {
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
})
</script>
<script type="text/javascript">
$(function () {
var paneName = $("[id*=PaneName]").val() != "" ? $("[id*=PaneName]").val() : "collapseOne";
//Remove the previous selected Pane.
$("#accordion .in").removeClass("in");
//Set the selected Pane.
$("#" + paneName).collapse("show");
//When Pane is clicked, save the ID to the Hidden Field.
$(".panel-heading a").click(function () {
$("[id*=PaneName]").val($(this).attr("href").replace("#", ""));
});
});
</script>
<script>
$('#btnPreview').click(function () {
$('.panel-collapse.collapse').collapse('show');
});
</script>
</asp:Content>
OleDbConnection VMScon = new OleDbConnection(ConfigurationManager.ConnectionStrings["VMSConnectionString"].ConnectionString);
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Label lblPageTitle = this.Master.FindControl("lblPageTitle") as Label;
lblPageTitle.Text = "Book Visits";
PaneName.Value = Request.Form[PaneName.UniqueID];
if ((Session["EmpNumber"]) != null)
{
BindGroupsByEmployee();
}
}
}
private void BindGroupsByEmployee()
{
DataTable dtGroup = new DataTable();
string queryGroup = "select distinct gp.GroupCode,gp.GroupNameFull from pis.Group_table @PIS9I gp inner join pis.GROUPMULTIEMPLINK_TABLE @PIS9I gl on gp.GroupCode=gl.GroupCode where gl.EMPNUMBER ='" + Session["EmpNumber"].ToString() + "'";// and gp.GROUP_STATUS=0
OleDbCommand cmdGroup = new OleDbCommand(queryGroup, VMScon);
OleDbDataAdapter daGroup = new OleDbDataAdapter(cmdGroup);
daGroup.Fill(dtGroup);
drpGroup.DataSource = dtGroup;
drpGroup.DataTextField = "GroupNameFull"; //Text to be display
drpGroup.DataValueField = "GroupCode"; //ID Field
drpGroup.DataBind();
VMScon.Close();
if (dtGroup.Rows.Count > 0)
{
BindVisitApprovalAuth();
}
}
private void BindVisitApprovalAuth()
{
VMScon.Open();
DataTable dtGroupHeads = new DataTable();
DataTable dtGroupHeadsNames = new DataTable();
//string queryGroupHeads = "select AD,GD,DH from pis.GroupHeads @PIS9I where groupid = '" + drpGroup.SelectedValue + "'";
string queryGroupHeads = "select AD,GD,DH from pis.GroupHeads @PIS9I where groupid ='" + drpGroup.SelectedValue + "'";
OleDbCommand cmdGroupHeads = new OleDbCommand(queryGroupHeads, VMScon);
OleDbDataAdapter daGroupHeads = new OleDbDataAdapter(cmdGroupHeads);
daGroupHeads.Fill(dtGroupHeads);
if (dtGroupHeads.Rows.Count > 0)
{
dtGroupHeadsNames.Clear();
string queryGroupHeadNames = "select name,empnumber from pis.empview @PIS9I where empnumber ='" + dtGroupHeads.Rows[0]["AD"].ToString() + "' or empnumber= '" + dtGroupHeads.Rows[0]["GD"].ToString() + "' or empnumber = '" + dtGroupHeads.Rows[0]["DH"].ToString() + "'";
OleDbCommand cmdGroupHeadnames = new OleDbCommand(queryGroupHeadNames, VMScon);
OleDbDataAdapter daGroupHeadnames = new OleDbDataAdapter(cmdGroupHeadnames);
daGroupHeadnames.Fill(dtGroupHeadsNames);
drpVisitAuth.DataSource = dtGroupHeadsNames;
drpVisitAuth.DataTextField = "name"; //Text to be display
drpVisitAuth.DataValueField = "empnumber"; //ID Field
drpVisitAuth.DataBind();
}
VMScon.Close();
}
protected void drpGroup_SelectedIndexChanged(object sender, EventArgs e)
{
BindVisitApprovalAuth();
}
protected void drpVisitPurpose_SelectedIndexChanged(object sender, EventArgs e)
{
}
protected void drpOrganization_SelectedIndexChanged(object sender, EventArgs e)
{
}
protected void drpVehAppAuth_SelectedIndexChanged(object sender, EventArgs e)
{
}
protected void drpMaterialAppAuth_SelectedIndexChanged(object sender, EventArgs e)
{
}
