MVC Grid with QRCode

[Tiago]

How can i generate, using kendo ui grid with mvc, a QRCode for every row of grid with link to id page of this row element?

I have something like in the image.

[Dimiter Madjarov]

Hello Tiago,

The following documentation page describes how to include an MVC widget in a client template. It is important to note that the widgets should have unique name.
E.g.

.Name("qr_#=OrderID#")

that it should be converted to client template.
E.g.

.ToClientTemplate().ToHtmlString()

and that the generated JavaScript code should be executed in the dataBound event of the Grid.

Regards,
Dimiter Madjarov
Telerik

 

 

[Tiago]

Hello Dimiter, 

 Thanks for your help but is it possible to show some example?

 

Thanks

[Dimiter Madjarov]

Hello Tiago,

There is an example in the documentation page from the previous answer. It is applicable to the current case too.

Regards,
Dimiter Madjarov
Telerik

 

 

[Chris]

I had a similar question to what Tiago asked. How would I go about creating a "batch" of QR codes on a page.

In the example below I have created a printable page for temp player cards. Idea is that each card has its own QR code. But I am not exactly sure how I would go about generating unique QR codes.  Any guidance would be appreciated.

<div class="printPage">
    @for (var j = 0; j < 10; j++)
    {
        <div class="card">
            @*<div style="text-align:center;">Temporary Player ID</div>*@
            <div class="idname">
            </div>
            <div style="float:right;">
                @(Html.Kendo().QRCode()
                .Name("qrCode_#=j#")
                .Value("#=j#")
                .Size(75)
                )
            </div>
        </div>
    }
</div>

 

[Shawn]

Hi, I'm trying to do exactly this same thing, and when following the code sample in the documentation, I get an Invalid Template error. 

I have my code like this:

CSHTML:

@(Html.Kendo().Grid((IEnumerable<CMACS.Models.Document>)ViewBag.Documents)
    .Name("DocList")
    .Columns(columns => {
        columns.Bound(Doc => Doc.Name)
            .Title("Filename")
            .Template(
                @<text>
                    @Html.ActionLink(@item.Name, "PDFViewer", new { fileName = @item.DocumentExternalId.ToString() }, new { target = "_blank" })
                </text>
            )
            .HtmlAttributes(new { @class = "templateCell" })
            .ClientTemplate(
                Html.Kendo().QRCode()
                    .Name("qrUrl_#=documentExternalId#")
                    .Value("http://demos.telerik.com/kendo-ui/dataviz/overview/index.html")
                    .ErrorCorrection(QRErrorCorrectionLevel.M)
                    .Size(120)
                    .Border(border => border.Color("#000000").Width(5))
                    .ToClientTemplate().ToHtmlString()
            );
        columns.Bound(Doc => Doc.User.FirstName);
        columns.Bound(Doc => Doc.CreatedOn);
        columns.Command(command => command.Custom("ViewDetails").Click("showDetails")).Width(180);
    })
    .Events(ev => ev.DataBound("testStuff"))
)

 

JavaScript:    

function testStuff() {
    alert("testing things!");
}

[Dimiter Madjarov]

Hello Shawn,

The reason for the issue is that the current Grid uses a Server bound dataSource, while client templates should only be used with an Ajax bound dataSource. Which of the two configurations are you looking to implement?

Regards,
Dimiter Madjarov
Telerik by Progress

 

 

[Shawn]

Hi Dimiter thanks for your response. I'm trying to use a server bound data source.

[Dimiter Madjarov]

Hello Shawn,

In this case you should use the .Template() method only.
E.g.

columns.Bound(p => p.UnitsInStock).Template(@<text>
  @(
    Html.Kendo().QRCode()
        .Name("qrUrl_" + Guid.NewGuid())
        .Value("http://demos.telerik.com/kendo-ui/dataviz/overview/index.html")
  )
</text>);

Regards,
Dimiter Madjarov
Telerik by Progress