Remove From My Forums

Make Gridview Column1 As QR Code

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