?>
</div>
<div class="demo-section">
<h3>Telephone</h3>
<?php
$qrTelephoneBorder = new \Kendo\Dataviz\UI\QRCodeBorder();
$qrTelephoneBorder->color("#67a814")->width(5);
$qrTelephone = new \Kendo\Dataviz\UI\QRCode('qrTelephone');
$qrTelephone->value("tel:+1-888-365-2779")->size(120)->errorCorrection("Q")->color("#67a814")->border($qrTelephoneBorder);
echo $qrTelephone->render();
?>
</div>
<div class="demo-section">
<h3>Geo Location</h3>
<?php
$qrGeoLocation = new \Kendo\Dataviz\UI\QRCode('qrGeoLocation');
$qrGeoLocation->value("geo:42.65049,23.37925,100")->errorCorrection("H")->size(120)->color("#166a83");
echo $qrGeoLocation->render();
?>
</div>
<style scoped>
.demo-section {
display: inline-block;
margin: 17px;
}
.k-qrcode {
display:inline-block;
margin: 10px 0 0;
border: none;
}
<input id="borderColor" data-role="colorpicker" data-bind="value: qrOptions.border.color" />
</li>
<li>
<label for="backgroundColor">Background color:</label>
<input id="backgroundColor" data-role="colorpicker" data-bind="value: qrOptions.background" />
</li>
<li>
<label for="moduleColor">Module color:</label>
<input id="moduleColor" data-role="colorpicker" data-bind="value: qrOptions.color" />
</li>
</ul>
</div>
</div>
<div class="demo-section">
<?php
$qrCode = new \Kendo\Dataviz\UI\QRCode('qrCode');
$qrCode->size(200);
echo $qrCode->render();
?>
</div>
<script type="text/javascript">
$(document).ready(function () {
var qrCode = $("#qrCode").kendoQRCode({
size: 200
}).data("kendoQRCode");
var viewModel = kendo.observable({
qrValue: "Hello World",
qrOptions: {
errorCorrection: "L",
