In trying to print an ID card, the background image set from ImageButton inside DataList does not print. Every other control, like label and image can print except background image.
How is it that background image cannot print even after I used window.print()?
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous" />
<script defer="" src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" media="all" />
<link href="css/bootstrap.css" rel="stylesheet" media="all" />
<link href="css/IdStyle.css" rel="stylesheet" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<title>Identification Document</title>
<script type="text/javascript">
$(function () {
var fileUpload = $("[id*=imgupload]");
var img = $("[id*=imgfile]");
img.click(function () { fileUpload.click(); });
fileUpload.change(function () {
var reader = new FileReader();
reader.onload = function (e) {
$("[id*=imgfile]").attr("src", e.target.result);
}
reader.readAsDataURL($(this)[0].files[0]);
});
});
</script>
<style type="text/css">
@import url('https://fonts.cdnfonts.com/css/proxima-nova-2?styles=44818,44819,44822,44823,44817,44820,44821,44812,44813,44814,44815,44810');
@import url('https://fonts.cdnfonts.com/css/graphik?styles=44660,44666,44654,44656,44658,44662,44652,44650,44664');
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
min-height: 100vh;
}
#sidebar {
min-width: 200px;
min-height: 100vh;
top: 0;
left: 0;
z-index: 999;
background-color: #0b2436;
color: #fff;
transition: all 0.3s;
font-family: 'Graphik', sans-serif;
}
#content {
flex: auto;
}
@media screen and (min-width: 1200px) {
#content {
width: 100%;
}
}
@media screen and (min-width: 360px) and (max-width:640px) {
#content {
width: 100%;
}
}
#sidebar.active {
margin-left: -200px;
}
a[data-toggle="collapse"] {
position: relative;
background-color: #0b2436;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
@media (max-width: 768px) {
#sidebar {
margin-left: -200px;
min-height: 100vh;
}
#sidebar.active {
margin-left: 0;
}
}
p {
font-family: 'Graphik', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a, a:hover, a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
#sidebar {
/* don't forget to add all the previously mentioned styles here too */
background-color: #0b2436;
color: #fff;
transition: all 0.3s;
min-height: 100vh;
min-width: 200px;
top: 0;
left: 0;
z-index: 999;
font-family: 'Graphik', sans-serif;
}
#topbar {
background-color: #0b2436;
}
#sidebar ul.components {
padding: 10px 0;
}
#sidebar ul p {
color: #fff;
padding: 10px;
font-size: medium;
}
#navbarSupportedContent li a {
color: #eeeeee;
font-family: 'Graphik', sans-serif;
}
#sidebar ul li a {
padding: 10px;
display: block;
font-size: 10pt;
font-family: 'Graphik', sans-serif;
}
#sidebarCollapse {
background-color: transparent;
color: #0b2436;
font-size: 10pt;
width: 28px;
height: 28px;
border: none;
}
#sideCollapse {
background-color: transparent;
color: #0b2436;
font-size: 10pt;
width: 30px;
height: 30px;
border: none;
}
#pageSubmenu {
font-size: 9pt;
background-color: #0b2436;
font-family: 'Graphik', sans-serif;
}
#pageSubmenu1 {
font-size: 9pt;
background-color: #0b2436;
font-family: 'Graphik', sans-serif;
}
.navbar navbar-expand-lg {
background-color: #0b2436;
}
#sidebar ul li a:hover {
color: #eeeeee;
background-color: rgba(44, 62, 80, 0.3);
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
color: #31b8ef;
background-color: rgba(44, 62, 80, 0.3);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #0b2436;
font-family: 'Graphik', sans-serif;
}
.navbar navbar-expand-lg {
background-color: #0b2436;
}
.imagelogo {
position: relative;
object-fit: cover;
width: 100%;
}
.idcardimg {
position: relative;
object-fit: cover;
width: 100%;
}
.imgfile {
cursor: pointer;
position: relative;
border-radius: 5px;
object-fit: cover;
width: 100%;
font-size: 13px;
border: none;
}
#parent {
font-size: 12px;
text-align: center;
display: flex;
align-items: stretch;
border: none;
}
span.circle {
display: inline-block;
margin: 0 auto;
text-align: center;
}
.grids {
overflow-y: scroll;
height: 520px;
width: 100%;
}
#PermitPrint { background-color: #145c7c; border-color: #145c7c; font-size: 9pt; color: #fff; margin: 0 auto; min-width: 100px;}
@media print {
body * {
visibility: hidden;
}
.print-contents, .print-contents * {
visibility: visible;
}
.print-contents {
position: absolute;
left: 0px;
right: 0px;
}
}
</style>
</head>
<body style="background-color: #fdfdfd; font-family: 'Graphik', sans-serif; font-size: 17px; font-weight: 400;">
<form id="form1" runat="server">
<asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
<div class="wrapper">
<nav id="sidebar" style="font-family: 'Graphik', sans-serif;">
<ul class="list-unstyled sidebar-header" style="padding: 10px; margin: 0 auto; margin-top: 2%;">
<li style="margin: 0 7px;">
<span class="circle">
<asp:Image ID="img11" Class="imagelogo" alt="" runat="server" Height="33" /></span>
<asp:Label runat="server" ID="ident" Font-Size="9pt" ForeColor="#546579" Font-Bold="true" Text=""></asp:Label>
</li>
<li style="margin: 0 7px;">
<asp:Label ID="named" runat="server" Font-Size="10pt" Text="" ForeColor="White"></asp:Label>
</li>
<li>
<i class="fal fa-credit-card" aria-hidden="true" style="margin: 0 7px; font-size: 10pt;"></i>
<asp:Label ID="Units" runat="server" Font-Size="9pt" Text="" ForeColor="White"></asp:Label>
</li>
</ul>
<ul class="nav navbar-nav list-unstyled components">
<li class="nav-item">
<a class="nav-link" href="https://quirver.com/dashboard"><i class="fal fa-columns" aria-hidden="true" style="margin: 0 7px; font-size: 10pt;"></i>Overview</a>
</li>
<li class="nav-item">
<a href="https://quirver.com/certificatedocument">
<i class="fal fa-file-certificate" aria-hidden="true" style="margin: 0 7px; font-size: 10pt;"></i>Certificate</a>
</li>
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fal fa-file-invoice" aria-hidden="true" style="margin: 0 7px; font-size: 10pt;"></i>Invoice</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
<a href="https://quirver.com/invoicetemplate">Template</a>
</li>
<li>
<a href="https://quirver.com/invoicePDF">PDF Document</a>
</li>
<li>
<a href="https://quirver.com/invoiceDOCX">Word Document</a>
</li>
</ul>
</li>
<li>
<a href="#pageSubmenu1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fal fa-receipt" aria-hidden="true" style="margin: 0 7px; font-size: 10pt;"></i>Receipt</a>
<ul class="collapse list-unstyled" id="pageSubmenu1">
<li>
<a href="https://quirver.com/receipttemplate">Template</a>
</li>
<li>
<a href="https://quirver.com/receiptPDF">PDF Document</a>
</li>
<li>
<a href="https://quirver.com/receiptDOCX">Word Document</a>
</li>
</ul>
</li>
<li class="nav-item active">
<a class="nav-link" href="https://quirver.com/identificationcard"><i class="fal fa-id-card" aria-hidden="true" style="margin: 0 7px; font-size: 10pt;"></i>ID Card</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fal fa-ticket-alt" aria-hidden="true" style="margin: 0 7px; font-size: 10pt;"></i>Pass/Ticket</a>
</li>
</ul>
<ul class="list-unstyled components">
<li class="nav-item" id="Li1" runat="server"><a href="https://quirver.com/admindashboard">
<i class="fal fa-users" aria-hidden="true" style="margin: 0 7px; font-size: 10pt;"></i>Manage Account</a>
</li>
<li class="nav-item" id="Li2" runat="server"><a href="https://quirver.com/settings">
<i class="fal fa-user-cog" aria-hidden="true" style="margin: 0 7px; font-size: 10pt;"></i>Settings</a>
</li>
</ul>
</nav>
<div id="content" style="font-size: 10pt; width: 100%;">
<nav id="topnav" class="navbar navbar-expand-lg navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="font-size: 12pt; font-weight: 500; border-bottom: 0.1px solid #f3f3f4; background-color: #fff;">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-bars"></i>
<span class="sr-only">Toggle Navigation</span>
</button>
<button class="btn btn-info d-lg-none ml-auto" id="sideCollapse" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="dropdown" runat="server" style="padding: 5px; font-weight: 400;">
<asp:Label ID="user" runat="server" Font-Size="10pt" Text="" ForeColor="#0b2436"></asp:Label>
<a class="dropdown" data-toggle="dropdown" aria-expanded="false" href="#" style="background-color: transparent; border: none; cursor: pointer;">
<i class="fal fa-user-circle" style="margin: 0 auto; font-size: 11pt; color: #0b2436;"></i>
</a>
</li>
<li class="dropdown" runat="server" style="padding: 5px; font-weight: 400; color: #0b2436; font-size: 10pt;">
<i class="fal fa-credit-card" aria-hidden="true" style="margin: 0 auto; padding: 5px; font-size: 10pt; color: #0b2436;"></i>
<label runat="server" id="unitlbl"></label>
</li>
</ul>
</div>
</div>
</nav>
<div class="grids">
<asp:Label ID="labelid" runat="server" Visible="false"></asp:Label><asp:Label ID="createby" runat="server" Visible="false"></asp:Label><asp:Label ID="role" runat="server" Visible="false"></asp:Label>
<div class="row col-sm-12" runat="server" style="width: 100%; margin: 0 auto; padding: 10px; margin-bottom: 0%;">
<div class="col-sm-3" style="margin-top: 2%; left: 0; z-index: 999; width: 100%; margin: 0 auto; padding: 10px; border-radius: 4px; border: 0.2px solid #f0f1f2; background-color: #fff;">
<div class="card" style="width: auto; background-color: #fff; border: none;">
<div class="card-body">
<asp:DataList ID="TemplateList" runat="server" Width="100%" RepeatDirection="Horizontal" RepeatColumns="3" CellSpacing="2" RepeatLayout="Table" CssClass="row">
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" CssClass="ImageButton" runat="server" ImageUrl='<%# "data:image/png;base64," + Convert.ToBase64String((byte[])Eval("Data")) %>' Height="100" BorderStyle="Solid" BorderWidth="1" />
</ItemTemplate>
</asp:DataList>
</div>
</div>
</div>
<div class="col-sm-5">
<asp:Panel Class="print-contents" ID="pnlContents" runat="server">
<div class="card" id="IDcard" runat="server" style="margin: 0 auto; width: 78%; height: 430px; border-radius: 10px; background-image:src();">
<div class="row" runat="server" id="header" style="width: 100%; margin: 0 auto; margin-top: 2%;">
<div class="col-2">
<asp:Image ID="Image2" ImageUrl="image.png" CssClass="idcardimg" AlternateText="logo" runat="server" Height="28" />
</div>
<div class="col-8">
<div style="float: inline-start;">
<div style="text-align: center;">
<asp:Label ID="lblName" runat="server" Text="Organization Name"></asp:Label>
</div>
<div style="text-align: center;">
<asp:Label ID="addresslbl" runat="server" Text="Contact Address"></asp:Label>
</div>
</div>
</div>
</div>
<div style="text-align: center;">
<asp:Label ID="TypeLbl" runat="server" Text="ID card Type"></asp:Label>
</div>
<div class="contained" runat="server" id="middle" style="margin-bottom: 3%; margin-top: 20%; margin: 0 auto; text-align: center;">
<br />
<div style="text-align: center; margin-top: 20%;">
<div style="text-align: center; margin-top: 20%;">
<asp:Image ID="Image1" runat="server" Width="80" Height="80" />
</div>
<div style="text-align: center; margin-top: 3%;">
<asp:Label ID="Namelbl" runat="server" Text="Holder's Name"></asp:Label>
</div>
<div style="text-align: center; margin-top: 3%;">
<asp:Label ID="DeptLbl" runat="server" Text="Title/Department"></asp:Label>
</div>
</div>
</div>
<div class="row" runat="server" id="below" style="width: 100%; margin-top: 30%; vertical-align: bottom;">
<div class="col-sm-5">
<div class="form-group" style="float: left; font-size: 5pt;">
<div class="input-group">
<asp:Label ID="permitID" runat="server" Text=""></asp:Label>
</div>
</div>
</div>
<div class="col-sm-7">
<div style="float: right; font-size: 5pt; vertical-align: bottom;">
<asp:Image ID="Image3" ImageUrl="Test.png" runat="server" ImageAlign="Baseline" Style="position: relative; bottom: 0px; display: block;" Width="70" Height="70" />
</div>
</div>
</div>
</div>
</asp:Panel>
<div style="margin: 0 auto; padding: 10px;">
<asp:Button ID="PermitPrint" runat="server" CssClass="btn navbar-btn" Text="Print ID Card" OnClientClick="return PrintPanel();" />
</div>
</div>
<div class="col-sm-3" style="margin-top: 2%; left: 0; z-index: 999; width: 100%; margin: 0 auto; padding: 10px; border-radius: 4px; border: 0.2px solid #f0f1f2; background-color: #fff; overflow-y: scroll; height: 500px;">
<div class="" style="width: 100%; margin: 0 auto; padding: 6px; margin-top: 1%; border-radius: 4px;">
<div style="margin-top: 1%; margin-bottom: 4%;">
<label style="font-weight: 500; font-size: 8pt; color: #93979e;">Edit your ID Card</label>
</div>
<asp:Label ID="Label4" runat="server">Address</asp:Label>
<div class="input-group" style="font-size: 4pt; margin-top: 3%;">
<asp:TextBox ID="TextBox3" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" placeholder="Name" AutoPostBack="true" />
</div>
<asp:Label ID="colorhead" runat="server">Header Color</asp:Label>
<div class="input-group" style="font-size: 4pt;">
<asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" />
<cc1:ColorPickerExtender ID="ColorPicker1" runat="server" TargetControlID="TextBox1"
PopupButtonID="ColorBtn" PopupPosition="TopRight" OnClientColorSelectionChanged="HeadColor" />
<div class="input-group-append">
<span class="input-group-text" id="ColorBtn" runat="server" style="height: auto; background-color: transparent; color: #404344;">
<span id="toggle_picker" class="fad fa-eye-dropper" aria-hidden="true" style="cursor: pointer; font-size: 11pt; border: none;"></span>
</span>
</div>
</div>
<asp:Label ID="Label3" runat="server">Middle Card</asp:Label>
<div class="input-group" style="font-size: 4pt;">
<asp:TextBox ID="BackTxt" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" />
<cc1:ColorPickerExtender ID="ColorPickerExtender1" runat="server" TargetControlID="BackTxt"
PopupButtonID="BackColorBtn" PopupPosition="TopRight" OnClientColorSelectionChanged="midColor" />
<div class="input-group-append">
<span class="input-group-text" id="BackColorBtn" runat="server" style="height: auto; background-color: transparent; color: #404344;">
<span id="perm_id" class="fad fa-eye-dropper" aria-hidden="true" style="cursor: pointer; font-size: 11pt; border: none;"></span>
</span>
</div>
</div>
<asp:Label ID="Label7" runat="server">Bottom Card</asp:Label>
<div class="input-group" style="font-size: 4pt;">
<asp:TextBox ID="TextBox5" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" />
<cc1:ColorPickerExtender ID="ColorPickerExtender2" runat="server" TargetControlID="TextBox5"
PopupButtonID="BottomColorBtn" PopupPosition="TopRight" OnClientColorSelectionChanged="DownColor" />
<div class="input-group-append">
<span class="input-group-text" id="BottomColorBtn" runat="server" style="height: auto; background-color: transparent; color: #404344;">
<span id="idcard_id" class="fad fa-eye-dropper" aria-hidden="true" style="cursor: pointer; font-size: 11pt; border: none;"></span>
</span>
</div>
</div>
<asp:Label ID="fontlbl" runat="server">Choose Font</asp:Label>
<div class="input-group">
<input type="text" class="fonts" />
</div>
<br />
<asp:Label ID="Label1" runat="server">Personal Details</asp:Label>
<hr />
<asp:Label ID="Label2" runat="server">Name</asp:Label>
<div class="input-group" style="font-size: 4pt; margin-top: 2%;">
<asp:TextBox ID="TextBox2" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" placeholder="Name" AutoPostBack="true" />
</div>
<asp:Label ID="Label5" runat="server">Card Type</asp:Label>
<div class="input-group" style="font-size: 4pt; margin-top: 3%;">
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="form-control" ClientIDMode="Static" AutoPostBack="true">
<asp:ListItem>Select</asp:ListItem>
<asp:ListItem Value="STAFF">STAFF</asp:ListItem>
<asp:ListItem Value="STUDENT">STUDENT</asp:ListItem>
</asp:DropDownList>
</div>
<asp:Label ID="Label6" runat="server">Department/Title</asp:Label>
<div class="input-group" style="font-size: 4pt; margin-top: 3%;">
<asp:TextBox ID="TextBox4" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" placeholder="Name" AutoPostBack="true"/>
</div>
</div>
</div>
</div>
</div>
<br />
<br />
</div>
</div>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/fontselect.css" />
<script src="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/jquery.fontselect.js"></script>
<script type="text/javascript">
//This is the javascript for changing label font family.
$(document).ready(function () {
function selectFontAndApplyToEle(fontName, callback) {
$('div.font-select').find('.fs-results li').removeClass('active');
var dropEle = $('div.font-select').find('.fs-drop');
var fontToSelect = $('div.font-select').find('.fs-results li:contains(' + fontName + ')');
dropEle.addClass('fs-drop-op');
var posFont = fontToSelect.offset().top
var posFontOffset = $('div.font-select').find('.fs-results li:first').offset().top
$('div.font-select').find('.fs-results').scrollTop(posFont - posFontOffset);
fontToSelect.addClass('active').trigger('click');
setTimeout(function () {
$('div.font-select a div').trigger('click');
dropEle.removeClass('fs-drop-op');
callback && callback(fontToSelect.data('value').replace(/\+/g, ' '));
}, 500);
}
$(function () {
$('input.fonts').fontselect({
style: 'font-select',
placeholder: 'Select a font',
lookahead: 2
}).on('change', function (e) {
var fontFamily = $(this).val().replace(/\+/g, ' ');
$('.card').css('font-family', fontFamily);
});
selectFontAndApplyToEle('Anton', function (fontFamily) {
$('.card').css('font-family', fontFamily);
setTimeout(function () {
selectFontAndApplyToEle('Anonymous Pro', function (fontFamily) {
$('.card').css('font-family', fontFamily);
});
}, 1000);
});
});
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript">
//My sidebar toggle navigation
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
function PrintPanel() {
window.print();
var panel = document.getElementById("<%=pnlContents.ClientID %>");
var printWindow = window.open('', '', 'height=500,width=900');
printWindow.document.write('<html><head><title>DIV Contents</title>');
printWindow.document.write('</head><body >');
printWindow.document.write(panel.innerHTML);
printWindow.document.write('</body></html>');
printWindow.document.close();
setTimeout(function () {
printWindow.print();
}, 500);
return false;
}
</script>
<script type="text/javascript">
$(document).ready(function () {
$('.ImageButton').click(function () {
var image = $(this).attr('src');
$('#IDcard').css({ 'background-image': 'url(' + image + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover' });
return false;
});
});
</script>
</body>
</html>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = this.GetTemplate();
TemplateList.DataSource = dt;
TemplateList.DataBind();
}
}
private DataTable GetTemplate()
{
string connectionString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
using (SqlConnection con = new SqlConnection(connectionString))
{
using (SqlCommand cmd = new SqlCommand("SELECT Data FROM TemplateTable WHERE ContentType = 'image/png'"))
{
using (SqlDataAdapter da = new SqlDataAdapter())
{
cmd.Connection = con;
da.SelectCommand = cmd;
using (DataTable dt = new DataTable())
{
da.Fill(dt);
return dt;
}
}
}
}
}
