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

Bind Grid value to QRCode

3 Answers 113 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Yevgen
Top achievements
Rank 1
Yevgen asked on 09 Jul 2014, 10:52 AM
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 

3 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 11 Jul 2014, 08:02 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Yevgen
Top achievements
Rank 1
answered on 15 Jul 2014, 04:37 PM
Hello Petur, 

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

Kind Regards,
Yevgen Kysil 
0
Daniel
Telerik team
answered on 17 Jul 2014, 10:50 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Yevgen
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Yevgen
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or