New to Telerik UI for ASP.NET MVC? Download free 30-day trial

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.

UI for ASP.NET MVC Swiss Type

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:

QRCode Image Type

The Image type of the overlay adds an image in the QR code.

UI for ASP.NET MVC Image Type

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:

See Also

In this article