QrCode in Grid

[Edmund Herbert]

Happy New Year Guys, can you supply me an example of a field in a Grid that is a Qr Code that gets its text value from a field in grid example Serial Number
I am using Asp.net Mvc 5 and latest Syncfusion build.

I would also like to print grid

Thanks

Edmund Herbert

[Sathyanarayanamoorthy Eswararao]

Hi Kavan, 

We have analyzed your query and found that you want to add a barcode column to the grid and need to print the grid with barcode column. We have achieved your requirement in the following example using template column. 

Refer the below code example.  

 

@{ 

    ViewBag.Title = "Home Page"; 

} 

 

 

 

<div> 

    @(Html.EJ().Grid<object> 

            ("grid") 

          .Datasource((IEnumerable<object> 

        )ViewBag.datasource) 

 

    .AllowPaging() 

 

    .ClientSideEvents(eve => eve.DataBound("databound").BeforePrint("beforeprint").TemplateRefresh("template")) 

 

   -------------------------------- 

 

    .Columns(col => 

    { 

        col.HeaderText("Barcode").Template("#columnTemplate").TextAlign(TextAlign.Center).Width(110).Add(); 

 

           --------------------------------- 

    }) 

    ) 

</div> 

 

<script type="text/x-jsrender" id="columnTemplate"> 

    <div id="{{:OrderID}}barcode" class="barcode"></div> 

</script> 

 

<script type="text/javascript"> 

 

 

    function databound(args) { 

        var len1 = this.model.dataSource.length; 

        for (var j = 0; j < len1; j++) { 

            var num = this.model.dataSource[j].OrderID; 

            this.element.find(".barcode").ejBarcode({ text: num.toString(), symbologyType: "qrbarcode" }); 

        } 

    } 

 

    function beforeprint(args) { 

            if (args.requestType == "print") { 

                var img = new Image(); 

                var len = $(".barcode").children("canvas").length; 

               this.model.allowPaging = false; 

                var obj = $("#grid").data("ejGrid"); 

                obj.refreshContent(); 

                obj.getPager().css('display', 'none'); 

                for (var i = 0; i < len; i++) { 

                    img = new Image(); 

                    img.src = $(".barcode").children("canvas")[i].toDataURL(); 

                    args.element.find(".barcode").eq(i).parent("td").append(img); 

                } 

                this.model.allowPaging = true; 

                obj.refreshContent(); 

                obj.getPager().css('display', 'block'); 

            } 

    } 

 

    function template(args) { 

        if (!this.initialRender) { 

            var num1 = args.data.OrderID; 

            $(args.cell).find(".barcode").ejBarcode({ text: num1.toString(), symbologyType: "qrbarcode" }); 

 

        }    

    } 

     

</script> 

 

 

We have prepared a sample for your reference which can be downloaded from the below location. 

Sample: https://www.syncfusion.com/downloads/support/forum/135303/ze/SyncfusionMvcApplication1-1520846348.zip 

Refer the help documentation for column template. 

Link: https://help.syncfusion.com/js/grid/columns#column-template 

Regards, 

Sathyanarayanamoorthy