Dear Sir,
Greetings for the day !
Sir, Listbox is not showing select all checkbox option with listbox. please he to show select all option
Master page bootstrap
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
aspx page
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="AtestDropdownMultiSelectBootstrap5.aspx.cs" Inherits="AtestDropdownMultiSelectBootstrap5" %>
<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register Assembly="TimePicker" Namespace="MKB.TimePicker" TagPrefix="Tpc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder2" runat="Server">
<title></title>
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css' />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/js/bootstrap.bundle.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<script type="text/javascript">
$(function () {
$('[id*=lstFruits]').multiselect({
includeSelectAllOption: true,
templates: {
button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown"><span class="multiselect-selected-text"></span></button>'
}
});
});
</script>
<link href="../Styles/DefineCss1.css" rel="stylesheet" />
<link href="../Style/GridViewStyleNew.css" rel="stylesheet" />
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="../Scripts/jquery-1.7.2.min.js"></script>
<link type="text/css" href="../Scripts/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="../Scripts/jquery-ui-1.8.19.custom.min.js"></script>
<%-- Start Sweet Alert --%>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@5.3.2/dist/css/bootstrap.min.css" />
<script type="text/javascript" src='https://cdn.jsdelivr.net/sweetalert2/6.3.8/sweetalert2.min.js'> </script>
<link rel="stylesheet" href='https://cdn.jsdelivr.net/sweetalert2/6.3.8/sweetalert2.min.css' media="screen" />
<link rel="stylesheet" href='https://cdn.jsdelivr.net/sweetalert2/6.3.8/sweetalert2.css' media="screen" />
<%-- end Sweet Alert --%>
<%-- Start Script Confirmtion (Yes/No) --%>
<script type="text/javascript">
function ConfirmOne(sender) {
//var selectedText = $(sender).find("option:selected").text();
if (confirm("Do you want to process ?")) {
$("#HfResponse1").val('YES');
} else {
$("#HfResponse1").val('NO');
}
}
</script>
<%-- End Script Confirmtion (Yes/No) --%>
<%-- Start Sweet Alert confirm --%>
<script type="text/javascript">
function FunctionAlertMessage(title, message, type) {
swal(title, message, type);
}
</script>
<script type="text/javascript">
var object = { status: false, ele: null };
function ConfirmMessageOne(event) {
if (object.status) { return true; };
swal({
title: "Are You Sure ?",
text: "Approve Order ⚠️ ?",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, Process",
cancelButtonColor: 'Crimson',
confirmButtonColor: 'LightSeaGreen',
closeOnConfirm: true,
timer: 5000
}).then(function () {
object.status = true;
object.ele = event;
showLoader1();
$('[id*=BtnApprove').click();
});
return false;
};
</script>
<%-- End Sweet Alert confirm --%>
<%-- Start GridView Scroll --%>
<script src="../GridViewScrollBothSide/jquery-1.9.1.min.js"></script>
<script src="../GridViewScrollBothSide/JavaScript.js"></script>
<script src="../GridViewScrollBothSide/GridViewScrollBothSide.js"></script>
<%-- End Grid View Script --%>
<%-- Start Cleint Machine Date and Time --%>
<script type="text/javascript">
// script by Josh Fraser (http://www.onlineaspect.com)
var minutes;
function calculate_time_zone() {
var rightNow = new Date();
var jan1 = new Date(rightNow.getFullYear(), 0, 1, 0, 0, 0, 0); // jan 1st
var june1 = new Date(rightNow.getFullYear(), 6, 1, 0, 0, 0, 0); // june 1st
var temp = jan1.toGMTString();
var jan2 = new Date(temp.substring(0, temp.lastIndexOf(" ") - 1));
temp = june1.toGMTString();
var june2 = new Date(temp.substring(0, temp.lastIndexOf(" ") - 1));
var std_time_offset = (jan1 - jan2) / (1000 * 60 * 60);
var daylight_time_offset = (june1 - june2) / (1000 * 60 * 60);
var dst;
if (std_time_offset == daylight_time_offset) {
dst = "0"; // daylight savings time is NOT observed
} else {
// positive is southern, negative is northern hemisphere
var hemisphere = std_time_offset - daylight_time_offset;
if (hemisphere >= 0)
std_time_offset = daylight_time_offset;
dst = "1"; // daylight savings time is observed
}
var i;
// check just to avoid error messages
minutes = convert(std_time_offset);
TimeField = document.getElementById("HiddenFieldClientTime");
TimeField.value = minutes;
//alert('your time zone is ' + minutes);
}
function convert(value) {
var hours = parseInt(value);
value -= parseInt(value);
value *= 60;
var mins = parseInt(value);
value -= parseInt(value);
value *= 60;
var secs = parseInt(value);
var display_hours = hours;
// handle GMT case (00:00)
if (hours == 0) {
display_hours = "00";
} else if (hours > 0) {
// add a plus sign and perhaps an extra 0
display_hours = (hours < 10) ? "+0" + hours : "+" + hours;
} else {
// add an extra 0 if needed
display_hours = (hours > -10) ? "-0" + Math.abs(hours) : hours;
}
mins = (mins < 10) ? "0" + mins : mins;
return display_hours + ":" + mins;
}
onload = calculate_time_zone;
</script>
<%-- end client machine date and time --%>
<%-- Start Preview Pdf Image Working --%>
<script type="text/javascript">
function PreviewOwnershipDoc() {
pdffile = document.getElementById("UploadOwnershipDoc").files[0];
pdffile_url = URL.createObjectURL(pdffile);
$('#ViewerOwnershipDoc').attr('src', pdffile_url);
}
</script>
<%-- End Preview Pdf Image Working --%>
<%-- start input file validation --%>
<script>
function fileValidation() {
var fileInput =
document.getElementById('UploadOwnershipDoc');
var filePath = fileInput.value;
// Allowing file type
var allowedExtensions =
/(\.PDF|\.pdf)$/i;
///(\.jpg|\.jpeg|\.png|\.gif)$/i;
if (!allowedExtensions.exec(filePath)) {
alert('Invalid file type');
fileInput.value = '';
return false;
}
else {
//// Image preview
//if (fileInput.files && fileInput.files[0]) {
// var reader = new FileReader();
// reader.onload = function (e) {
// document.getElementById(
// 'imagePreview').innerHTML =
// '<img src="' + e.target.result
// + '"/>';
// };
// reader.readAsDataURL(fileInput.files[0]);
}
// Another File
var fileInput =
document.getElementById('UploadPdfInsGatePass');
var filePath = fileInput.value;
// Allowing file type
var allowedExtensions =
/(\.PDF|\.pdf)$/i;
///(\.jpg|\.jpeg|\.png|\.gif)$/i;
if (!allowedExtensions.exec(filePath)) {
alert('Invalid file type');
fileInput.value = '';
return false;
}
else {
//// Image preview
//if (fileInput.files && fileInput.files[0]) {
// var reader = new FileReader();
// reader.onload = function (e) {
// document.getElementById(
// 'imagePreview').innerHTML =
// '<img src="' + e.target.result
// + '"/>';
// };
// reader.readAsDataURL(fileInput.files[0]);
}
// Another File
}
</script>
<%-- End Input file validation --%>
<%-- Start Separate Loader Start --%>
<script type="text/javascript">
function showLoader1() {
document.getElementById("loader1").style.display = 'block';
}
function showLoader2() {
document.getElementById("loader2").style.display = 'block';
}
function showLoader3() {
document.getElementById("loader3").style.display = 'block';
}
function showLoader4() {
document.getElementById("loader4").style.display = 'block';
}
function showLoader5() {
document.getElementById("loader5").style.display = 'block';
}
function showLoader6() {
document.getElementById("loader6").style.display = 'block';
}
function showLoader7() {
document.getElementById("loader7").style.display = 'block';
}
function showLoader8() {
document.getElementById("loader8").style.display = 'block';
}
function showLoader9() {
document.getElementById("loader9").style.display = 'block';
}
function showLoader10() {
document.getElementById("loader10").style.display = 'block';
}
function showLoader11() {
document.getElementById("loader11").style.display = 'block';
}
function showLoader12() {
document.getElementById("loader12").style.display = 'block';
}
</script>
<%-- End Loader End --%>
<%-- Start Disable Right Click --%>
<script>
document.addEventListener("contextmenu", function (event) {
event.preventDefault();
alert('Right Click is Disabled');
}, false);
</script>
<%-- End Disable Right Click --%>
<%-- Start Disable back button in browser --%>
<script type="text/javascript">
function DisableBackButton() {
window.history.forward()
}
DisableBackButton();
window.onload = DisableBackButton;
window.onpageshow = function (evt) { if (evt.persisted) DisableBackButton() }
window.onunload = function () { void (0) }
</script>
<%-- End Disable back button in browser --%>
<%-- Start Disable button After click --%>
<%-- <script type="text/javascript">
function DisableButton1() {
document.getElementById("<%=BtnSaveRepairOrder.ClientID %>").disabled = true;
}
window.onbeforeunload = DisableButton;
</script> --%>
<%-- End Disable button After click --%>
<%-- Start Allow 10 numeric digit mobile --%>
<script type="text/javascript">
var specialKeys = new Array();
specialKeys.push(8); //Backspace
function IsNumeric(e) {
var keyCode = e.which ? e.which : e.keyCode
var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
document.getElementById("error").style.display = ret ? "none" : "inline";
return ret;
}
</script>
<%-- end alllow 10 digit mobile no --%>
<%-- Start Style --%>
<style type="text/css">
table { border: 1px solid #ccc; border-collapse: collapse; }
table th { background-color: #ccc; color: #333; font-weight: bold; }
table th, table td { padding: 5px; border: 1px solid #ccc; }
.MyDataGridViewListOne { align-items: baseline; margin-left: auto; margin-right: auto; }
.MyDataGridViewListOne td { padding: 5px; }
.MyDataGridViewListOne th { padding: 5px; font-family: Arial; font-size: 12px; background-color: #fb8b03; }
.MyDataGridViewListTwo { align-items: baseline; margin-left: auto; margin-right: auto; }
.MyDataGridViewListTwo td { padding: 5px; }
.MyDataGridViewListTwo th { padding: 5px; font-family: Arial; font-size: 12px; background-color: #f4f909; }
.MyDataGridViewListThree { align-items: baseline; margin-left: auto; margin-right: auto; }
.MyDataGridViewListThree td { padding: 5px; }
.MyDataGridViewListThree th { padding: 5px; font-family: Arial; font-size: 12px; background-color: #fbc406; }
.MyDataGridViewListFour { align-items: baseline; margin-left: auto; margin-right: auto; }
.MyDataGridViewListFour td { padding: 5px; }
.MyDataGridViewListFour th { padding: 5px; font-family: Arial; font-size: 12px; background-color: #94fcc9; }
.MyDataGridViewListFive { align-items: baseline; margin-left: auto; margin-right: auto; }
.MyDataGridViewListFive td { padding: 5px; }
.MyDataGridViewListFive th { padding: 5px; font-family: Arial; font-size: 12px; background-color: #94fcc9; }
/* For History */
.ComboBoxStyle .ajax__combobox_itemlist li { background-color: DarkGreen; border: 1px solid YellowGreen; color: White; font-size: medium; font-family: Arial; font-size: 12px; padding-bottom: 5px; }
. { background-color: #F0F8FF; }
.bg_Entry_Color2 { background-color: #FAEBD7; }
.bg_Entry_Color3 { background-color: #F5F5DC; }
.bg_Entry_Color4 { background-color: #DCDCDC; }
.bg_Entry_Color5 { background-color: #F0E68C; }
.bg_Entry_Color6 { background-color: #FFF0F5; }
.bg_Entry_Color7 { background-color: #C0C0C0; }
.bg_Entry_Color8 { background-color: #FFC0CB; }
.bg_Entry_Color9 { background-color: #AFEEEE; }
.bg_Entry_ColorUserDetail { background-color: #a8a7a7; }
.mydropdownlistnew { color: #fff; font-size: 20px; padding: 5px 10px; border-radius: 5px; background-color: #cc2a41; font-weight: bold; }
.mydropdownlistnew1 { color: #fff; font-size: 20px; padding: 5px 10px; border-radius: 5px 12px; background-color: #292929; font-weight: bold; }
.MvButton { min-width: 10px; min-height: 25px; border-radius: 50px; background: none; outline: none; border: none; color: white; padding: 15px 25px; margin-top: 2px; background: rgba(115,84,178,1); background: -moz-linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%); background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(115,84,178,1)), color-stop(34%, rgba(115,84,178,0.95)), color-stop(35%, rgba(115,84,178,0.95)), color-stop(62%, rgba(96,107,192,0.91)), color-stop(100%, rgba(84,160,231,0.85))); background: -webkit-linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%); background: -o-linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%); background: -ms-linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%); background: linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7354b2', endColorstr='#54a0e7', GradientType=1 ); /*display: block;
padding: 4px 18px 4px 18px;
float: left;
background: url("../Images/InitialImage.png") no-repeat right top;
color: Black;
font-weight: bold;*/ }
.MvButton:hover { color: blue; background: #f5f2c9; /*background:url("~/images/SelectTab.png");*/ /*background: url("../images/SelectTab.png") no-repeat right top;*/ /*background: url("../Images/SelectedButton.png") no-repeat right top;*/ }
/*Header*/
.Tab .ajax__tab_header { color: #4682b4; font-family: Arial; font-size: 46px; font-weight: bold; background-color: #ffffff; margin-left: 0px; }
/*Body*/
.Tab .ajax__tab_body { border: 1px solid #b4cbdf; padding-top: 0px; }
/*Tab Active*/
.Tab .ajax__tab_active .ajax__tab_tab { color: red; background: url("../../tab_active.gif") repeat-x; height: 20px; }
.Tab .ajax__tab_active .ajax__tab_inner { color: #ffffff; background: url("../../tab_left_active.gif") no-repeat left; padding-left: 10px; }
.Tab .ajax__tab_active .ajax__tab_outer { color: #ffffff; background: url("../../tab_right_active.gif") no-repeat right; padding-right: 6px; }
/*Tab Hover*/
.Tab .ajax__tab_hover .ajax__tab_tab { color: #000000; background: url("../../tab_hover.gif") repeat-x; /*height:20px;*/ }
.Tab .ajax__tab_hover .ajax__tab_inner { color: #000000; background: url("../../tab_left_hover.gif") no-repeat left; padding-left: 10px; }
.Tab .ajax__tab_hover .ajax__tab_outer { color: #000000; background: url("../../tab_right_hover.gif") no-repeat right; padding-right: 6px; }
/*Tab Inactive*/
.Tab .ajax__tab_tab { color: #666666; background: url("../../tab_Inactive.gif") repeat-x; /*height:20px;*/ }
.Tab .ajax__tab_inner { color: #666666; background: url("../../tab_left_inactive.gif") no-repeat left; padding-left: 10px; }
.Tab .ajax__tab_outer { color: #666666; background: url("../../tab_right_inactive.gif") no-repeat right; padding-right: 6px; margin-right: 2px; }
/*===================*/
/* ================== START MODAL FOR LOADING ============================= */
.ModalLoader { position: fixed; top: 0; left: 0; background-color: black; z-index: 99; opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8; min-height: 100%; width: 100%; }
.LoadingModal { font-family: Arial; font-size: 10pt; border: 5px solid #67CFF5; width: 200px; height: 100px; display: none; position: fixed; background-color: White; z-index: 999; }
/* ================== END MODAL FOR LOADING ============================= */
</style>
<%-- End Style --%>
<%-- =================================== New ============================================= --%>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="container">
<div class="row">
<div class=" col-12">
<asp:ListBox ID="lstFruits" runat="server" SelectionMode="Multiple">
<asp:ListItem Text="Mango" Value="1" />
<asp:ListItem Text="Apple" Value="2" />
<asp:ListItem Text="Banana" Value="3" />
<asp:ListItem Text="Guava" Value="4" />
<asp:ListItem Text="Orange" Value="5" />
</asp:ListBox>
<asp:Button Text="Submit" runat="server" OnClick="Submit" />
</div>
</div>
</div>
<script type="text/javascript">
//On Page Load.
$(function () {
ApplyMultiSelect();
});
//On UpdatePanel Refresh.
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
ApplyMultiSelect();
}
});
};
function ApplyMultiSelect() {
$('[id*=lstFruits]').multiselect({
includeSelectAllOption: true,
templates: {
button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown"><span class="multiselect-selected-text"></span></button>',
}
});
}
</script>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
