This is a migrated thread and some comments may be shown as answers.

Kendo UI QrCode for Angular

6 Answers 113 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Hernando
Top achievements
Rank 1
Iron
Hernando asked on 16 Jan 2019, 06:30 PM

Is it possible to use the Kendo UI QrCode for asp.net core (https://demos.telerik.com/aspnet-core/qrcode/index) in Angular ?

we really need a QrCode Generator in our website using Kendo UI for Angular. 

 

Thanks.

6 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 18 Jan 2019, 07:12 AM
Hello Hernando,

You can use the Kendo UI for jQuery components (including the QR Code) in the Angular application as described in the following section of our documentation:

https://www.telerik.com/kendo-angular-ui/components/framework/kendo-jquery/

The QRCode for ASP.NET Core is just a wrapper that generates the client-side code for the respective widget (like all other Kendo UI for .NET wrappers).

I hope this helps, but if you have the time, please support the following feature request in our UserVoice portal to help us estimate the customer demand for such a component, and prioritize accordingly when updating our roadmap:

https://feedback.telerik.com/kendo-angular-ui/1360811-qr-code-component

Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Hernando
Top achievements
Rank 1
Iron
answered on 18 Jan 2019, 12:13 PM
thanks , I'll add to UserVoice portal, but it would be better to have all the kendo Jquery controls update to Kendo UI .
0
Hernando
Top achievements
Rank 1
Iron
answered on 18 Jan 2019, 12:57 PM

Hi I got the QrCode displaying with a value but I can not change the Value dynamically from an input text , the even and binding is working , but the qrcode is not updating .. Thanks

<!-- home.component.html -->
<p>Kendo UI for jQuery QR Code</p>
<div #qrcodeElement> </div>
 
<p>Enter QR Code Value </p>
 
<input type="text" (change)="textchange($event)" class="txt" name="item" placeholder="QRCode Value" [(ngModel)]="codeText">
 
<br><span>{{ codeText }}</span><br>

 

home.component .ts

codeText: string = 'test';
 
@ViewChild('qrcodeElement') qrcodeEl: ElementRef;
 
textchange(event: any) {
  console.log(event);
}
 
setqrcode() {
  kendo.jQuery(this.qrcodeEl.nativeElement).kendoQRCode({
    value: this.codeText,
    size: 120,
    color: "#000000",
    background: "transparent"
  });
 }

 ngAfterViewInit() {
    // Using a template reference variable
    this.setqrcode();
  }

0
Accepted
Dimiter Topalov
Telerik team
answered on 18 Jan 2019, 01:39 PM
Hello Hernando,

The QRCode widget's value can be updated via calling its value method, and passing the new value. The instance can be obtained as any other Kendo UI for jQuery widget's instance:

this.qrWidgetInstance = kendo.jQuery(this.qrcodeEl.nativeElement).kendoQRCode({
      value: this.codeText,
      size: 120,
      color: "#000000",
      background: "transparent"
    }).data('kendoQRCode');

Regards,
Dimiter Topalov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Dimiter Topalov
Telerik team
answered on 18 Jan 2019, 01:41 PM
Hi,

Here is a sample application, demonstrating the described approach:

https://stackblitz.com/edit/angular-umzdxj?file=src/app/app.component.ts

Regards,
Dimiter Topalov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Hernando
Top achievements
Rank 1
Iron
answered on 18 Jan 2019, 01:51 PM
Great , Thanks for your help. ;)
Tags
General Discussions
Asked by
Hernando
Top achievements
Rank 1
Iron
Answers by
Dimiter Topalov
Telerik team
Hernando
Top achievements
Rank 1
Iron
Share this question
or