Here is my code snippter of master page and content page in ASP.net C# Webforms.... Which is using modal Popup Extender AJAX -
but not loading the select2 dropdowns,,,,,,as i am using update panel with extender.
Here is my master page file code:
<head runat="server">
<title>Admindek | Admin Template</title>
<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<asp:ContentPlaceHolder ID="body" runat="server"></asp:ContentPlaceHolder>
/////////////////////////////////////////
<script type="text/javascript" src="/newtheme/demo.dashboardpack.com/admindek-html/files/bower_components/jquery/js/jquery.min.js"></script>
<asp:ContentPlaceHolder ID="scripts" runat="server"></asp:ContentPlaceHolder>
</form>
</body>
Here is my content page file:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<style type="text/css">
.modalBackground { background-color: Gray; filter: alpha(opacity=70); opacity: 0.7; }
.modalPopup { background-color: #ffffff; border-width: 3px; border-style: solid; position: absolute; max-height: 80vh; /* Set the maximum height as a percentage of the viewport height */ overflow-y: scroll; }
</style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/css/select2.min.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="body" runat="server">
<asp:ScriptManager runat="server" ID="scrptmgr" />
<asp:UpdatePanel ID="upd" runat="server">
<ContentTemplate>
<h5>
<asp:Button ID="btnsearchpopup" runat="server" OnClick="btnsearchpopup_Click" CssClass="btn btn-add md-trigger m-r-2" Text="Search Here" /></h5>
<!-- Search Popup -->
<ajaxtoolkit:modalpopupextender id="ModalPopupExtender1"
targetcontrolid="btnhiden"
runat="server"
popupcontrolid="pnlCompletePopup"
backgroundcssclass="modalBackground"
repositionmode="RepositionOnWindowResizeAndScroll">
</ajaxtoolkit:modalpopupextender>
<asp:Button ID="btnhiden" runat="server" Style="display: none;" />
<asp:Panel ID="pnlCompletePopup" runat="server" ClientIDMode="Static">
<label class="col-sm-2 col-form-label">ID</label>
<asp:TextBox ID="txtcompanyid" runat="server" CssClass="form-control" TextMode="Number" min="0"></asp:TextBox>
<label class="col-sm-2 col-form-label">Status</label>
<asp:DropDownList ID="ddlstatus" runat="server" CssClass="form-control">
<asp:ListItem Text="All" Value="All"></asp:ListItem>
<asp:ListItem Text="Active" Value="Active"></asp:ListItem>
<asp:ListItem Text="Inactive" Value="Inactive"></asp:ListItem>
</asp:DropDownList>
<label class="col-sm-2 col-form-label">Name</label>
<asp:TextBox ID="txtcompanyname" runat="server" CssClass="form-control" MaxLength="40"></asp:TextBox>
<label class="col-sm-2 col-form-label">Phone</label>
<asp:TextBox ID="txtcompanyphone" runat="server" CssClass="form-control" TextMode="Email"></asp:TextBox>
<label class="col-sm-2 col-form-label">TimeZone</label>
<asp:DropDownList ID="ddlcompanytimezone" runat="server" CssClass="form-control"></asp:DropDownList>
<asp:TextBox ID="txtcompanycity" runat="server" CssClass="form-control" MaxLength="120"></asp:TextBox><div class="form-group row">
<label class="col-sm-2 col-form-label">Country</label>
<asp:DropDownList ID="ddlcountry" runat="server" CssClass="form-control"></asp:DropDownList>
<label class="col-sm-2 col-form-label">State</label>
<asp:DropDownList ID="ddlstates" runat="server" CssClass="form-control"></asp:DropDownList>
<label class="col-sm-2 col-form-label">Contact Name</label>
<asp:TextBox ID="txtcontactname" runat="server" CssClass="form-control"></asp:TextBox>
<label class="col-sm-2 col-form-label">Contact Email</label>
<asp:TextBox ID="txtcontactemail" runat="server" CssClass="form-control"></asp:TextBox>
<label class="col-sm-2 col-form-label">Contact Phone</label>
<asp:TextBox ID="txtcontactphone" runat="server" CssClass="form-control" MaxLength="20"></asp:TextBox>
<asp:Button ID="btnsearch" runat="server" Text="Search" CssClass="btn btn-warning" OnClientClick="return true;" OnClick="btnsearch_Click" />
<asp:Button ID="btnclose" runat="server" Text="Close" CssClass="btn btn-danger" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="scripts" runat="server">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/js/select2.min.js"></script>
<script type="text/javascript">
$(function () {
$("#body_ddlstatus").select2();
});
</script>
</asp:Content>
I need to make select2 working for all dropdowns list in model POPUP Extender. And i am using UPDATE Panel , and by this script it is not working...NOTE: I am filtering my record to populate the gridview with code behind c# function using btnsearch_click event, ,
Can you help me fix this. please........????????
Thanks.
