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)
    )

For runnable example on the Swiss type, refer to the following online demo:

• Swiss QR Code of the QRCode for ASP.NET MVC (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)
    )

For runnable sample on the QRCode defined with an Image type, refer to the following online demo:

• Adding a Custom Logo of the QRCode for ASP.NET MVC (Demo)

See Also

• Basic Usage of the QRCode component for ASP.NET MVC (Demo)
• Using the API of the QRCode component for ASP.NET MVC (Demo)
• Server-Side API