Bind Grid value to QRCode

[Yevgen]

I have two KendoGrids on my page and i want to bind values to KendoQRCode if some values are editing or was added 

@(Html.Kendo().Grid(Model)
   .Name(ProdGrid")
   .Columns(columns =>
   {
       columns.Bound(p => p.Title);
       columns.Bound(p => p.FirstName);
       columns.Bound(p => p.MiddleName);
       columns.Bound(p => p.FamilyName);
       columns.Command(command => { command.Edit()});
   })
    .Editable(editable => editable.Mode(GridEditMode.InLine))
   .DataSource(dataSource => dataSource.Ajax()
       .Model(model =>
       {
           model.Id(p => p.ID);
       })
       .Read(read => read.Action("PDetails", "Prod"))
       .Update(update => update.Action("EditingP", "Card"))
   )
                    )

@(Html.Kendo().Grid(Model)
        .Name("Phone")
    .Columns(columns =>
    {
        columns.Bound(p => p.PhoneNumber);
        columns.Command(command => { command.Edit().HtmlAttributes(new { id = i + "EditTel" }); });
    })
     .ToolBar(toolbar => toolbar.Create())
     .Editable(editable => editable.Mode(GridEditMode.InLine))
    .HtmlAttributes(new { style = "width:50%; float:left" })
    .DataSource(dataSource => dataSource.Ajax()
            .Model(model =>
            {
                model.Id(p => p.ID);

            })
            .Create(update => update.Action("CreatePhone", "Card", new { id = @i }))
        .Read(read => read.Action("CardPhone", "Card"))
        .Update(update => update.Action("EditingPhone", "Card", new { id = @i }))
    )
)

<div id="example" >
                <div class="configuration-horizontal" id="qrConfig">
                    <div class="config-section">
                        <div>
                            <input id="qrPhone" class="k-textbox" data-bind="value: qrPhone">
                        </div>
                        <br />
                        <div>
                            <textarea id="qrValue" class="k-textbox" data-bind="value: qrValue" rows="5" cols="20"></textarea>
                        </div>
                    </div>
                    <div class="config-section">
                        <span class="configHead">Options</span>
                        <ul class="options">
                            <li>
                                <label for="errorCorrection">Error correction level:</label>
                                <select id="errorCorrection" data-role="dropdownlist" data-bind="value: qrOptions.errorCorrection">
                                    <option value="L">L</option>
                                    <option value="M">M</option>
                                    <option value="Q">Q</option>
                                    <option value="H">H</option>
                                </select>
                            </li>
                            <li>
                                <label for="encoding">Encoding:</label>
                                <select id="encoding" data-role="dropdownlist" data-bind="value: qrOptions.encoding">
                                    <option value="ISO_8859_1">ISO_8859_1</option>
                                    <option value="UTF_8">UTF_8</option>
                                </select>
                            </li>
                            <li>
                                <label for="size">Size:</label>
                                <input id="size" data-bind="value: qrOptions.size" data-role="numerictextbox"
                                       data-format="n0" data-decimals="0" />
                            </li>
                            <li>
                                <label for="borderWidth">Border width:</label>
                                <input id="borderWidth" data-bind="value: qrOptions.border.width" data-role="numerictextbox"
                                       data-format="n0" data-decimals="0" />
                            </li>
                        </ul>
                    </div>
                </div>

                <script type="text/javascript">
                    $(document).ready(function () {
                        var qrCode = $("#qrCode").kendoQRCode({
                            size: 200
                        }).data("kendoQRCode");

                        var viewModel = kendo.observable({
                            qrPhone: 5454
                            qrValue: "HaLo World",
                            qrOptions: {
                                errorCorrection: "L",
                                encoding: "ISO_8859_1",
                                background: "#FFFFFF",
                                color: "#000000",
                                size: 200,
                                border: {
                                    color: "#FFFFFF",
                                    width: 0
                                }
                            },

                            setValue: function () {
                                qrCode.value(this.qrValue + '\n' + this.qrPhone:);
                            },
                            setElementWidth: function () {
                                qrCode.element.width(this.qrOptions.size);
                            }
                        });

                        viewModel.bind("change", function (e) {
                            if (e.field == "qrPhone") {
                                this.setValue();
                            }
                            if (e.field == "qrValue") {
                                this.setValue();
                            }
                            else {
                                this.setElementWidth();
                                qrCode.setOptions(this.qrOptions.toJSON());
                            }
                        });

                        kendo.bind($("#qrConfig"), viewModel);
                        viewModel.setElementWidth();
                        viewModel.setValue();
                    });

                </script>

with input fields works it well, but i want to bind values from Grids after editing or after I add one more Phone to the Table 

[Petur Subev]

Hello Yevgen,

I do not seem to understand the question. you want to show a QRCode when an item is changed or added, but what should the value of the QRCode be? Basically you can use the save event:

http://docs.telerik.com/kendo-ui/api/web/grid#events-save

To set the value of the QRCode you can use its value method:

http://docs.telerik.com/kendo-ui/api/dataviz/qrcode

Could you please clarify your questions regarding the Grid or the QRCode?

Kind Regards,
Petur Subev
Telerik

 

 

[Yevgen]

Hello Petur, 

the value must be an array of a grid entries, which are bind to the QRCode

Kind Regards,
Yevgen Kysil 

[Daniel]

Hello Yevgen,

Unfortunately, it is still not clear what exactly are you trying to achieve. Could you clarify what you mean by:
 an array of a grid entries, which are bind to the QRCode
The QRCode accepts a string value and not an array. If you wish to generate a QRCode for a value in each item in the grid then please clarify what should be the value and where should the QRCodes be displayed.

Regards,
Daniel
Telerik