QR Code Types
The QRCode component supports different overlay types.
Swiss QR Type
The Swiss QR Code format adds a Swiss cross in the QR code. You can enable it by setting the Type("swiss") option of the Overaly() configuration.
The following implementation demonstrates the QRCode component with Swiss overlay:
@(Html.Kendo().QRCode()
.Name("qrSwiss")
.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")
.Overlay(o => o.Type("swiss").Width(26).Height(26))
.Size(173)
)
@{
var 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";
}
<kendo-qrcode name="qrSwiss" value="@value" size="173">
<overlay type="swiss" height="26" width="26" />
</kendo-qrcode>
For runnable example on the Swiss type, refer to the following online demo:
QRCode Image Type
The Image type of the overlay adds an image in the QR code.
The following implementation demonstrates how to configure the image type in the QRCode component:
@(Html.Kendo().QRCode()
.Name("qrImage")
.Value("https://docs.telerik.com/aspnet-mvc/html-helpers/barcodes/qrcode/types")
.Overlay(o => o.ImageUrl("https://demos.telerik.com/kendo-ui/content/shared/images/site/kendoka-cta.svg").Height(40).Width(40))
.Size(173)
)
<kendo-qrcode name="qrImage" value="https://docs.telerik.com/aspnet-core/html-helpers/barcodes/qrcode/types" size="173">
<overlay image-url="https://demos.telerik.com/kendo-ui/content/shared/images/site/kendoka-cta.svg" height="40" width="40" />
</kendo-qrcode>
For runnable sample on the QRCode defined with an Image type, refer to the following online demo: