MVC Grid with QRCode

9 posts, 0 answers
  1. Tiago
    Tiago avatar
    3 posts
    Member since:
    Mar 2015

    Posted 20 Aug 2015 Link to this post

    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.

  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 24 Aug 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Tiago
    Tiago avatar
    3 posts
    Member since:
    Mar 2015

    Posted 24 Aug 2015 Link to this post

    Hello Dimiter, 

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

     

    Thanks

  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 24 Aug 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Chris
    Chris avatar
    19 posts
    Member since:
    Feb 2015

    Posted 02 Sep 2015 Link to this post

    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>

     

  7. Shawn
    Shawn avatar
    2 posts
    Member since:
    Jun 2016

    Posted 20 Jul Link to this post

    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!");
    }
  8. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 21 Jul Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  9. Shawn
    Shawn avatar
    2 posts
    Member since:
    Jun 2016

    Posted 21 Jul in reply to Dimiter Madjarov Link to this post

    Hi Dimiter thanks for your response. I'm trying to use a server bound data source.
  10. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 22 Jul Link to this post

    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())
      )
    </text>);

    Regards,
    Dimiter Madjarov
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready