New to Kendo UI for jQuery? Start a free 30-day trial
Kendo UI QRCode supports different types of overlay.
Swiss QR Type
The QRCode component supports the Swiss QR Code format. Enabling the swiss type of the overlay will add a swiss cross in the QRCode.
The following implementation demonstrates the code needed for the Swiss Type:
html
<div id="example" class="demo-section k-content center">
<div class="qr-wrapper">
<h3>Swiss</h3>
<div id="qrSwiss"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#qrSwiss").kendoQRCode({
value: "SPC 0200 1 CH4431999123000889012 S Robert Schneider AG Rue du Lac 1268 2501 Biel CH 1949.75 CHF S Pia-Maria Rutschmann-Schnyder Grosse Marktgasse 28 9400 Rorschach CH QRR 210000000003139471430009017 Order of 15 June 2020 EPD //S1/10/10201409/11/200701/20/140.000-53/30/102673831/31/200615/32/7.7/33/7.7:139.40/40/0:30 Name AV1: UV;UltraPay005;12345 Name AV2: XY;XYService;54321",
size: 173,
overlay: {
type: "swiss",
height: 26,
width: 26
}
});
});
</script>
<style>
.k-qrcode {
display: inline-block;
margin: 10px 0 0;
border: none;
}
</style>
</div>
Overview of the Swiss Type:
QRCode Image Type
The image type of the overlay is adding an image in the QRCode.
The following implementation demonstrates the code needed for the Image Type:
html
<div id="example" class="demo-section k-content center">
<div class="qr-wrapper">
<h3>Image</h3>
<div id="qrImage"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#qrImage").kendoQRCode({
value: "https://docs.telerik.com/kendo-ui/controls/qrcode/types",
size: 173,
overlay: {
imageUrl: "https://demos.telerik.com/kendo-ui/content/shared/images/site/kendoka-cta.svg",
width: 40,
height: 40
}
});
});
</script>
<style>
.k-qrcode {
display: inline-block;
margin: 10px 0 0;
border: none;
}
</style>
</div>
Overview of the Image Type:
