locked
how to apply my qr code in nested repater control RRS feed

  • Question

  • User-807418713 posted

    Hello

    I use this in my page https://forums.asp.net/post/6159546.aspx

    I want to apply qr code for this Repeater3 = lbl_ItemName"

    then how would be this query

     <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.
                    });
                    
                })
            })
        </script>
    Tuesday, December 15, 2020 9:37 AM

Answers

  • User-1330468790 posted

    Hi  Gopi.MCA,

     

    This is a jQuery question and I think what you want to do is to retrieve the correct <td> elements.

    More details, you could refer to below codes.

    .aspx page

    <form id="form1" runat="server">
            <div>
                <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid" OnRowDataBound="gvCustomers_RowDataBound"
                    ShowFooter="true">
                    <Columns>
                        <asp:TemplateField ItemStyle-Width="150px" HeaderText="Order No">
                            <ItemTemplate>
                                <asp:HiddenField ID="OrderNo" runat="server" Value='<%#Eval("OrderNo") %>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:BoundField ItemStyle-Width="150px" DataField="OrderNo" HeaderText="Order No" Visible="false" />
                        <asp:BoundField ItemStyle-Width="150px" DataField="Item_Name" HeaderText="Item_Name" />
                        <asp:BoundField ItemStyle-Width="150px" DataField="ORder_Quantity" HeaderText="Order Quantity" />
                        <asp:TemplateField HeaderText="SubTable">
                            <ItemTemplate>
                                <asp:HiddenField ID="hf_id" runat="server" Value='<%#Eval("OrderNo") %>' />
                                <asp:Repeater ID="Repeater3" runat="server">
                                    <HeaderTemplate>
                                        <table border="1">
                                        <tr>
                                            <td><b>Item Name</b></td>
                                            <td><b>Rate</b></td>
                                            <td><b>Qty</b></td>
                                            <td><b>Amount</b></td>
                                        </tr>
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <tr>
                                            <td>
                                                <asp:Label ID="lbl_ItemName" runat="server"></asp:Label></td>
                                            <td>
                                                <asp:Label ID="lbl_Rate" runat="server" Text='<%# Eval("Rate") %>'></asp:Label></td>
                                            <td>
                                                <asp:Label ID="lbl_Qty" runat="server" Text='<%# Eval("Qty") %>'></asp:Label></td>
                                            <td>
                                                <asp:Label ID="lbl_PerPiece" runat="server" Text='<%# Eval("Amount") %>'></asp:Label></td>
                                            <td></td>
                                        </tr>
                                    </ItemTemplate>
                                    <FooterTemplate>
                                        </table>
                                    </FooterTemplate>
                                </asp:Repeater>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </div>
        </form>
        <script>
            $(function () {
    
    
                // Find the outside <tr> elements
                $('#<%=gvCustomers.ClientID%> > tbody > tr').filter(':not(:first-child)').filter(':not(:last-child)').each(function () {
                    console.log($(this).find("td:nth-child(0)"));
    
                    // Find the first td and add QR code
                    $(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(1)").html()// the text to encode in the QR.
                    });
    
                    // for each nested <tr> elements
                    $(this).find('tr').filter(':not(:first-child)').each(function () {
                        // Find the first td and add QR code
                        $(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(1) span").html()// the text to encode in the QR. the second td contents
                        });
                    })
    
                });
            })
        </script>

    Code behind:

    // Simulation of the data
            private static DataTable _gridviewDT;
            public static DataTable GridviewDT
            {
                get
                {
                    if (_gridviewDT is null)
                    {
                        _gridviewDT = new DataTable();
    
                        _gridviewDT.Columns.Add("OrderNo", typeof(int));
                        _gridviewDT.Columns.Add("Item_Name", typeof(string));
                        _gridviewDT.Columns.Add("ORder_Quantity", typeof(int));
    
                        _gridviewDT.Rows.Add(1, "AA",100);
                        _gridviewDT.Rows.Add(2, "BB", 200);
                        _gridviewDT.Rows.Add(3, "TT", 50);
                        _gridviewDT.Rows.Add(4, "KK", 2);
                        _gridviewDT.Rows.Add(5, "LL", 6);
    
    
                    }
    
                    return _gridviewDT;
                }
                set
                {
                    _gridviewDT = value;
                }
            }
    
            // Simulation of the data
            private static DataTable _repeaterDT;
            public static DataTable RepeaterDT
            {
                get
                {
                    if (_repeaterDT is null)
                    {
                        _repeaterDT = new DataTable();
    
                        _repeaterDT.Columns.Add("Id", typeof(int));
                        _repeaterDT.Columns.Add("Rate", typeof(string));
                        _repeaterDT.Columns.Add("Qty", typeof(int));
                        _repeaterDT.Columns.Add("Amount", typeof(int));
    
                        _repeaterDT.Rows.Add(1, "Rate1_1",101, 5);
                        _repeaterDT.Rows.Add(1, "Rate1_2",102, 15);
                        _repeaterDT.Rows.Add(2, "Rate2_1",201, 25);
                        _repeaterDT.Rows.Add(2, "Rate2_2",202, 50);
                        _repeaterDT.Rows.Add(3, "Rate3_1",301, 30);
                        _repeaterDT.Rows.Add(3, "Rate3_2",302, 60);
                        _repeaterDT.Rows.Add(4, "Rate4_1",401, 70);
                        _repeaterDT.Rows.Add(5, "Rate5_1",501, 45);
    
                    }
    
                    return _repeaterDT;
                }
                set
                {
                    _repeaterDT = value;
                }
            }
    
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    BindGridView();
                }
            }
    
            protected void BindGridView()
            {
                gvCustomers.DataSource = GridviewDT;
                gvCustomers.DataBind();
            }
    
            protected void gvCustomers_RowDataBound(object sender, GridViewRowEventArgs e)
            {
                if(e.Row.RowType == DataControlRowType.DataRow)
                {
                    // Bind data to the nested Repeater with given ID
                    GridViewRow row = e.Row;
                    Repeater repeater = (Repeater) row.FindControl("Repeater3");
                    HiddenField hiddenField = (HiddenField)row.FindControl("hf_id");
                    DataTable dt = GetRepeaterDT(Convert.ToInt32(hiddenField.Value));
                    repeater.DataSource = dt;
                    repeater.DataBind();
    
                }
            }
    
            private DataTable GetRepeaterDT(int id)
            {
                return RepeaterDT.AsEnumerable()
                   .Where(r => r.Field<int>("Id") == id).CopyToDataTable();
            }

    Demo:

     

    Hope helps.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 16, 2020 10:49 AM