locked
Make Gridview Column1 As QR Code RRS feed

  • Question

  • User-807418713 posted

    Hello

    This is my sql data

    USE [master]
    GO
    /****** Object:  Table [dbo].[Orders]    Script Date: 12/10/2020 11:27:17 ******/
    SET ANSI_NULLS ON
    GO
    SET QUOTED_IDENTIFIER ON
    GO
    SET ANSI_PADDING ON
    GO
    CREATE TABLE [dbo].[Orders](
    	[OrderNo] [varchar](50) NULL,
    	[Item_Name] [varchar](50) NULL,
    	[Order_Quantity] [float] NULL
    ) ON [PRIMARY]
    GO
    SET ANSI_PADDING OFF
    GO
    INSERT [dbo].[Orders] ([OrderNo], [Item_Name], [Order_Quantity]) VALUES (N'01', N'AA', 100)
    INSERT [dbo].[Orders] ([OrderNo], [Item_Name], [Order_Quantity]) VALUES (N'01', N'BB', 200)
    INSERT [dbo].[Orders] ([OrderNo], [Item_Name], [Order_Quantity]) VALUES (N'N23', N'TT', 50)
    

    This is my aspx Code

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="A.aspx.cs" Inherits="A" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid"
                ShowFooter="true">
                <Columns>
                    <asp:BoundField ItemStyle-Width="150px" DataField="OrderNo" HeaderText="Order No" />
                    <asp:BoundField ItemStyle-Width="150px" DataField="Item_Name" HeaderText="Item_Name" />
                      <asp:BoundField ItemStyle-Width="150px" DataField="ORder_Quantity" HeaderText="Order Quantity" />
                </Columns>
            </asp:GridView>
        </div>
        </form>
    </body>
    </html>
    

    This is my c# Code

    using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using System.Data.SqlClient;
    using System.Collections.Specialized;
    using System.Text;
    using System.Drawing;
    using System.IO;
    using System.Net;
    using System.Net.Mail;
    using System.Net.Configuration;
    
    
    public partial class A : System.Web.UI.Page
    {
    
        private DataTable Chem_Details()
        {
    
            DataTable dt = new DataTable();
            SqlConnection con1 = new SqlConnection(ConfigurationManager.ConnectionStrings["masterConnectionString"].ConnectionString);
            con1.Open();
            SqlCommand cmd1 = new SqlCommand("select OrderNo,Item_Name,ORder_Quantity from dbo.Orders", con1);
            SqlDataAdapter ada1 = new SqlDataAdapter(cmd1);
            ada1.Fill(dt);
            return dt;
    
        }
            
    
    
        protected void Page_Load(object sender, EventArgs e)
        {
            //select OrderNo,Item_Name,ORder_Quantity from dbo.Orders
            if (!Page.IsPostBack)
            {
    
                DataTable dt = Chem_Details();
                gvCustomers.DataSource = dt;
                gvCustomers.DataBind();
    
            }
        }
    }
    

    This is my resultset

    I want like below ouput with QR code using jquery or javascript, I used asp.net 2.0 older version hope the code works in asp.net 2.0

    Thanking You

    Thursday, December 10, 2020 5:57 AM

Answers

  • User1535942433 posted

    Hi Gopi.MCA,

    Accroding to your description,I suggest you could use jquery. Just like this:

     <script src="Scripts/jquery-3.1.1.min.js"></script>
        <script src="Scripts/jquery.classyqr.js"></script>
        <script>
            $(function () {
                $('#<%=gvCustomers.ClientID%> tr').filter(':not(:first)').filter(':not(:last)').each(function () {
                    $(this).find("td:nth(0)").ClassyQR({
                        create: true,// signals the library to create the image tag inside the container div.
                        type: 'text',// text/url/sms/email/call/locatithe text to encode in the QR. on/wifi/contact, default is TEXT
                        text: $(this).find("td:nth(0)").html()// the text to encode in the QR.
                    });
                });
                var $textNodes = $(".Grid tr").find("td:nth(0)").contents().filter(function () {
                    return this.nodeType === Node.TEXT_NODE;
    
                }).remove();
            })
        </script>
     <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid"
                    ShowFooter="true">
                    <Columns>
                        <asp:BoundField ItemStyle-Width="150px" DataField="OrderNo" HeaderText="Order No" />
                        <asp:BoundField ItemStyle-Width="150px" DataField="Item_Name" HeaderText="Item_Name" />
                        <asp:BoundField ItemStyle-Width="150px" DataField="ORder_Quantity" HeaderText="Order Quantity" />
                    </Columns>
                </asp:GridView>

    Code-behind:

     private DataTable Chem_Details()
            {
    
                DataTable dt = new DataTable();
                SqlConnection con1 = new SqlConnection(ConfigurationManager.ConnectionStrings["aspnet-TestApplicationWithDatabase-20190820030542"].ConnectionString);
                con1.Open();
                SqlCommand cmd1 = new SqlCommand("select OrderNo,Item_Name,ORder_Quantity from Orders", con1);
                SqlDataAdapter ada1 = new SqlDataAdapter(cmd1);
                ada1.Fill(dt);
                return dt;
    
            }
    
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
                {
                    DataTable dt = Chem_Details();
                    gvCustomers.DataSource = dt;
                    gvCustomers.DataBind();
    
                }
            }

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, December 11, 2020 4:20 AM

All replies

  • User1535942433 posted

    Hi Gopi.MCA,

    Accroding to your description,I suggest you could use jquery. Just like this:

     <script src="Scripts/jquery-3.1.1.min.js"></script>
        <script src="Scripts/jquery.classyqr.js"></script>
        <script>
            $(function () {
                $('#<%=gvCustomers.ClientID%> tr').filter(':not(:first)').filter(':not(:last)').each(function () {
                    $(this).find("td:nth(0)").ClassyQR({
                        create: true,// signals the library to create the image tag inside the container div.
                        type: 'text',// text/url/sms/email/call/locatithe text to encode in the QR. on/wifi/contact, default is TEXT
                        text: $(this).find("td:nth(0)").html()// the text to encode in the QR.
                    });
                });
                var $textNodes = $(".Grid tr").find("td:nth(0)").contents().filter(function () {
                    return this.nodeType === Node.TEXT_NODE;
    
                }).remove();
            })
        </script>
     <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid"
                    ShowFooter="true">
                    <Columns>
                        <asp:BoundField ItemStyle-Width="150px" DataField="OrderNo" HeaderText="Order No" />
                        <asp:BoundField ItemStyle-Width="150px" DataField="Item_Name" HeaderText="Item_Name" />
                        <asp:BoundField ItemStyle-Width="150px" DataField="ORder_Quantity" HeaderText="Order Quantity" />
                    </Columns>
                </asp:GridView>

    Code-behind:

     private DataTable Chem_Details()
            {
    
                DataTable dt = new DataTable();
                SqlConnection con1 = new SqlConnection(ConfigurationManager.ConnectionStrings["aspnet-TestApplicationWithDatabase-20190820030542"].ConnectionString);
                con1.Open();
                SqlCommand cmd1 = new SqlCommand("select OrderNo,Item_Name,ORder_Quantity from Orders", con1);
                SqlDataAdapter ada1 = new SqlDataAdapter(cmd1);
                ada1.Fill(dt);
                return dt;
    
            }
    
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
                {
                    DataTable dt = Chem_Details();
                    gvCustomers.DataSource = dt;
                    gvCustomers.DataBind();
    
                }
            }

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, December 11, 2020 4:20 AM
  • User-807418713 posted

    Hello

    Thanks For Your Code

    How to set height and width of qr image so that it will fit in our label size?

    Thanking You

    Friday, December 11, 2020 1:03 PM